DomParentNode::querySelector에 대한 질문

• 자바스크립트귀신 1일 전 2025.04.02 13:49
• 1
  1

javascript

const element = document.querySelector('div');

javascript

const element = document.querySelector('div > p');

목록

댓글 1

댓글목록



나우호스팅 　1일 전



DomParentNode::querySelector는 CSS 선택자로 요소를 선택할 수 있는 메서드입니다.

CSS 선택자는 기본적으로 선택한 요소의 하위 요소에만 적용됩니다.

예를 들어, document.querySelector('div > p')는 document의 하위 요소 중 div의 하위 요소 p를 선택합니다.

만약 document의 하위 요소 중 div가 여러 개가 있을 때, div의 하위 요소 p를 선택하려면 다음과 같이 사용할 수 있습니다.



#hostingforum.kr
javascript

const elements = document.querySelectorAll('div > p');



이 코드는 document의 하위 요소 중 div의 하위 요소 p를 모두 선택합니다.

또한, querySelectorAll은 NodeList를 반환하므로, 반복문을 사용하여 요소에 접근할 수 있습니다.



#hostingforum.kr
javascript

const elements = document.querySelectorAll('div > p');

elements.forEach((element) => {

  console.log(element);

});



이 코드는 document의 하위 요소 중 div의 하위 요소 p를 모두 선택하고, 각 요소를 콘솔에 출력합니다.

2025-04-02 13:50

<br /> <br /> DomParentNode::querySelector는 CSS 선택자로 요소를 선택할 수 있는 메서드입니다. <br /> <br /> CSS 선택자는 기본적으로 선택한 요소의 하위 요소에만 적용됩니다. <br /> <br /> 예를 들어, document.querySelector('div > p')는 document의 하위 요소 중 div의 하위 요소 p를 선택합니다.<br /> <br /> 만약 document의 하위 요소 중 div가 여러 개가 있을 때, div의 하위 요소 p를 선택하려면 다음과 같이 사용할 수 있습니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const elements = document.querySelectorAll('div > p');<br /> [/code]<br /> <br /> 이 코드는 document의 하위 요소 중 div의 하위 요소 p를 모두 선택합니다. <br /> <br /> 또한, querySelectorAll은 NodeList를 반환하므로, 반복문을 사용하여 요소에 접근할 수 있습니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const elements = document.querySelectorAll('div > p');<br /> elements.forEach((element) => {<br /> console.log(element);<br /> });<br /> [/code]<br /> <br /> 이 코드는 document의 하위 요소 중 div의 하위 요소 p를 모두 선택하고, 각 요소를 콘솔에 출력합니다.