[DOM_Document] JS - querySelectorAll() 메서드 ★★★ - 일치요소 모두 선택 (= querySelectorAll메서드 = 쿼리실렉터올메서드) ※ (쿼리선택자_모두 / 일치요소 전부) 선택하는 선택자 (IE9)

1. document.querySelectorAll() 예제 - 일치요소 모두 선택
2. document.querySelectorAll() 정의
3. document.querySelectorAll() 구문
4. document.querySelectorAll() 예제 - 태그명 경우
5. document.querySelectorAll() 예제 - 클래스 경우
6. document.querySelectorAll() 예제 - 일치요소 개수 구하기
7. document.querySelectorAll() 예제 - 일치요소 반복문 실행 (for/forEach)

document.querySelectorAll() 예제 - 일치요소 모두 선택 

 

<h1 class="hz">홈짱닷컴</h1>

<h2 class="hz">Homzzang.com</h2>

<h3 class="hz">홈페이지 제작관리</h3>  

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var x = document.querySelectorAll(".hz");

  x[1].style.backgroundColor = "yellow";

}

</script>

 

결과보기

※ 일치하는 모든 CSS선택자 전부 모두.

document.querySelectorAll() 정의

 

지정된 CSS 선택자와 일치하는 문서의 모든 요소를 정적 NodeList 객체로 반환.

 

---

 

1.

• NodeList 객체는 노드 모음 의미.
• 노드는 인덱스 번호로 접근 가능. (인덱스는 0부터 시작.)
• NodeList 객체의 length 속성 이용해 노드 개수 구한 후, for 반복문 이용해 접근 가능. 또는, forEach() 메서드 이용해 각 요소에 접근 가능.

 

2.

IE9 이상 주요 최신 브라우저 모두 지원.

단, IE8 경우, CSS2 선택자에 한해 지원.

 

3. mdn Document.querySelectorAll() 예제보기 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

 

document.querySelectorAll() 구문

 

document.querySelectorAll(CSS selectors)

 

---

[매개변수]

 

CSS selectors

필수. CSS 선택자. 

• 여러 선택자를 선택하려면, , (콤마) 이용해 나열.

 

---

[반환값]

 

NodeList 객체 반환.

• NodeList는 정적 컬렉션이므로, DOM의 변경 사항이 컬렉션에 영향 안 미침.
• 선택자가 유효하지 않은 경우, SYNTAX_ERR 예외 뜸.

 

document.querySelectorAll() 예제 - 태그명 경우

 

var x = document.querySelectorAll("p"); x[0].style.backgroundColor = "red"; // 첫 번째 일치요소
x[1].style.backgroundColor = "red"; // 두 번째 일치요소

...

 

document.querySelectorAll() 예제 - 클래스 경우 

 

var x = document.querySelectorAll("p.hz"); 

x[0].style.backgroundColor = "red"; // 첫 번째 일치요소
x[1].style.backgroundColor = "red"; // 두 번째 일치요소

...

 

document.querySelectorAll() 예제 - 일치요소 개수 구하기

※ length 속성 이용

 

var x = document.querySelectorAll(".hz").length;

 

document.querySelectorAll() 예제 - 일치요소 반복문 실행 (for/forEach) 

for 반복문

 

var x = document.querySelectorAll(".hz")

for (let i = 0; i < x.length; i++) {

  x[i].style.backgroundColor = "red";

}

 

---

forEach() 반복문

 

var hzs = document.querySelectorAll(".hz");

let i = 0;

hzs.forEach(function(abc) {  

    hzs[i].style.backgroundColor = "red";

    i++;

});