목차
- document.querySelectorAll() 예제 - 일치요소 모두 선택
- document.querySelectorAll() 정의
- document.querySelectorAll() 구문
- document.querySelectorAll() 예제 - 태그명 경우
- document.querySelectorAll() 예제 - 클래스 경우
- document.querySelectorAll() 예제 - 일치요소 개수 구하기
- 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++;
});