[자바스크립트] querySelector(), querySelectorAll() 사용법

JavaScript의 querySelector() 메서드는 HTML 문서 내에서 특정 요소를 선택하기 위해 사용되는 메서드입니다. 이 메서드는 CSS 선택자를 사용하여 원하는 요소를 선택할 수 있습니다.

 

1. querySelector() 설명

querySelector() 메서드는 문서 내에서 첫 번째로 일치하는 요소만 반환합니다. 따라서, 만약 여러 요소를 선택하려면 querySelectorAll() 메서드를 사용해야 합니다.

아래는 querySelector() 메서드를 사용하여 요소를 선택하는 예시입니다.

 

// id가 "myDiv"인 요소를 선택합니다.
const myDiv = document.querySelector('#myDiv');

// class가 "myClass"인 첫 번째 <p> 요소를 선택합니다.
const myParagraph = document.querySelector('p.myClass');

// <ul> 요소 안에 있는 첫 번째 <li> 요소를 선택합니다.
const firstListItem = document.querySelector('ul li');

querySelector() 메서드는 document 객체 뿐만 아니라, 다른 요소에서도 호출할 수 있습니다. 예를 들어, 특정 <div> 요소에서 자식 요소를 선택하려면 다음과 같이 작성할 수 있습니다.

 

// id가 "myDiv"인 요소의 자식 요소 중 class가 "myClass"인 첫 번째 <p> 요소를 선택합니다.
const myParagraph = document.querySelector('#myDiv p.myClass');

querySelector() 메서드는 지정된 선택자와 일치하는 요소가 없으면 null을 반환합니다. 따라서 반환값이 null인지 항상 확인해야 합니다.

2. querySelectorAll() 설명

JavaScript의 querySelectorAll() 메서드는 HTML 문서 내에서 특정 요소들을 선택하기 위해 사용되는 메서드입니다. 이 메서드는 CSS 선택자를 사용하여 원하는 요소들을 선택할 수 있습니다.

querySelectorAll() 메서드는 일치하는 모든 요소를 NodeList 객체로 반환합니다. 따라서, NodeList의 메서드를 사용하여 선택한 모든 요소에 대한 작업을 수행할 수 있습니다.

아래는 querySelectorAll() 메서드를 사용하여 요소들을 선택하는 예시입니다.

 

// class가 "myClass"인 모든 <p> 요소를 선택합니다.
const myParagraphs = document.querySelectorAll('p.myClass');

// <ul> 요소 안에 있는 모든 <li> 요소를 선택합니다.
const listItems = document.querySelectorAll('ul li');

// class가 "myClass"인 모든 요소를 선택합니다.
const myElements = document.querySelectorAll('.myClass');

querySelectorAll() 메서드는 document 객체 뿐만 아니라, 다른 요소에서도 호출할 수 있습니다. 예를 들어, 특정 <div> 요소에서 자식 요소를 선택하려면 다음과 같이 작성할 수 있습니다.

 

// id가 "myDiv"인 요소의 자식 요소 중 class가 "myClass"인 모든 <p> 요소를 선택합니다.
const myParagraphs = document.querySelectorAll('#myDiv p.myClass');

querySelectorAll() 메서드는 지정된 선택자와 일치하는 요소가 없으면 빈 NodeList를 반환합니다. 따라서 NodeList의 length 속성을 사용하여 일치하는 요소의 수를 확인할 수 있습니다.