[Javascript] querySelectorAll

 

 

 

---

목차

 

1. querySelectorAll

2. 예제

---

 

 

 

1. querySelectorAll

---

querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드이다.

querySelector()가 한 개의 요소를 반환했다면 querySelectorAll()은 주어진 CSS 선택자와 일치하는 모든 요소를 반환한다.

 

사용방법은 querySelector() 와 동일하며 HTML 요소가 아닌 nodeList 형태로 값을 반환한다. 따라서 인덱스를 통해 조작이 가능하고 반복문을 이용해 작성해야 한다.

 

 

- 구문

document.querySelector(selectors);

 

 

 

2. 예제

---

 

1) 아래 코드는 클래스 값이 abc인 모든 요소를 가져온다.

document.querySelectorAll( '.abc' )

 

 

 

2) querySelectorAll("요소명, 요소명")을 사용하면 서로 다른 이름의 요소를 한꺼번에 가져올 수 있다. 아래 코드는 클래스 값이 abc 또는 def인 모든 요소를 가져온다.

document.querySelectorAll( '.abc, .def' );

 

 

 

3) ID 가 "test" 인 container 안에 위치하고 부모 엘리먼트가 div 엘리먼트이며 클래스가 "highlighted" 인 <p> 엘리먼트의 리스트를 얻을 수 있다.

let container = document.querySelector("#test");
let matches = container.querySelectorAll("div.highlighted > p");