• 회원가입
  • 로그인

[DOM_Document] JS - querySelectorAll() 메서드 ★★★ - Document겍체의 쿼리선택자전부 (= 쿼리선택자_모두) (IE9)

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부터 시작.)

 

2.

NodeList 객체의 length 속성 이용해 노드 개수 구한 후, for 반복문 이용해 접근 가능.

또는, forEach() 메서드 이용해 각 요소에 접근 가능.

 

3.

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

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

 

 

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"; 

 


클래스 선택자

 

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

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

 


개수 구하기

 

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

 


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");

hzs.forEach(function(abc) {  

    ...

});

 

 

 

 

PS.

 

mdn Document.querySelectorAll()

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll (영어)

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll (한국어)

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012