HTML DOM Document querySelectorAll() 메서드
- 이전 페이지
- 다음 페이지
- 上一层으로 돌아가기 HTML DOM 문서
정의와 사용법
querySelectorAll() 메서드는 CSS 선택자와 일치하는 모든 요소를 반환합니다。
querySelectorAll() 메서드는 NodeList를 반환합니다。
선택자가 유효하지 않으면 querySelectorAll() 메서드는 SYNTAX_ERR 예외.
인스턴스
예제 1
class="example"를 가진 모든 요소를 선택합니다：
document.querySelectorAll(".example");
예제 2
첫 번째 <p> 요소에 배경색을 추가합니다：
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
예제 3
첫 번째 class="example"의 <p> 요소에 배경색을 추가합니다：
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
예제 4
class="example" 요소의 개수：
let numb = document.querySelectorAll(".example").length;
예제 5
모든 class="example" 요소의 배경색을 설정합니다：
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
예제 6
모든 <p> 요소의 배경색을 설정합니다：
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
예제 7
모든 "target" 속성을 사용하는 <a> 요소의 경계를 설정합니다：
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
예제 8
부모 요소가 <div> 요소인 각 <p> 요소의 배경색을 설정합니다：
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
예제 9
모든 <h3>、<div> 및 <span> 요소의 배경색을 설정합니다：
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
문법
document.querySelectorAll(CSSselectors)
파라미터
| 파라미터 | 설명 |
|---|---|
| CSSselectors |
필수. 하나 이상의 CSS 선택자. CSS 선택자는 id, 클래스, 타입, 속성, 속성 값 등에 따라 HTML 요소를 선택합니다. 전체 목록을 확인하려면我们的 CSS 선택자 참조 매뉴얼. 여러 선택자가 있을 경우 각 선택자를 쉼표로 구분합니다.(위의 예시 참조). |
반환 값
| 타입 | 설명 |
|---|---|
| 객체 |
CSS 선택자와 일치하는 요소를 포함한 NodeList 객체입니다. 일치하는 항목이 없으면 빈 NodeList 객체를 반환합니다. |
HTMLCollection과 NodeList의 차이점
NodeList 와 HTMLcollection 매우 유사합니다.
둘 다 문서에서 추출된 노드(요소)의 유사 배열(리스트) 집합(리스트)입니다. 인덱스 번호(인덱스)로 노드에 접근할 수 있습니다. 인덱스는 0에서 시작합니다.
둘 다 있습니다. length 리스트(셋)에서 요소의 개수를 반환하는 속성입니다.
HTMLCollection는문서 요소입니다집합.
NodeList는문서 노드（요소 노드, 속성 노드 및 텍스트 노드）의 집합입니다.
HTMLCollection 항목은 이름, id 또는 인덱스 번호를 통해 접근할 수 있습니다.
NodeList 항목은 그들의 인덱스 번호를 통해만 접근할 수 있습니다.
HTMLCollection은 항상실시간집합.
예를 들어: <li> 요소가 DOM에 있는 목록에 추가되면 HTMLCollection의 목록도 변경됩니다.
NodeList는 일반적으로정적집합.
예를 들어: <li> 요소가 DOM에 있는 목록에 추가되면 NodeList의 목록은 변경되지 않습니다.
getElementsByClassName() 와 getElementsByTagName() 메서드는 모두 실시간 HTMLCollection을 반환합니다.
querySelectorAll() 메서드는 정적 NodeList를 반환합니다.
childNodes 속성은 실시간 NodeList를 반환합니다.
브라우저 지원
document.querySelectorAll() DOM Level 3 (2004) 기능입니다.
모든 브라우저에서 지원됩니다:
| 크롬 | IE | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|---|
| 크롬 | IE | 에지 | 파이어폭스 | 사파리 | 오페라 |
| 지원 | 9-11 | 지원 | 지원 | 지원 | 지원 |
관련 페이지
교육:
QuerySelector 메서드:
Element querySelectorAll() 메서드
Document querySelectorAll() 메서드
GetElement 메서드:
- 이전 페이지
- 다음 페이지
- 上一层으로 돌아가기 HTML DOM 문서
