wiki:javascript:javascript_note:queryselectorall
문서의 이전 판입니다!
목차
Javascript HTML DOM Document querySelectorAll() Method
- description : Javascript HTML DOM Document querySelectorAll() Method
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-05-26
The source of the article
Example
문서에서 class="example"를 가진 모든 요소를 가져옵니다.
<body> <h2 class="example">A heading with class="example"</h2> <!-- red 배경색 적용됨 --> <p class="example">A paragraph with class="example"</p> <!-- red 배경색 적용됨 --> <p> Click the button to add a background color to all elements with class="example". </p> <button onclick="myFunction()">Try it</button> <p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p> <script> function myFunction() { var x, i; x = document.querySelectorAll(".example"); for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; } } </script> </body>
Definition and Usage
querySelectorAll() 메서드는 지정된 CSS 선택자와 일치하는 문서의 모든 요소를
정적(static) NodeList 객체로 반환합니다.
NodeList 객체는 노드 컬렉션을 나타냅니다.
노드는 인덱스 번호로 액세스 할 수 있습니다. 인덱스는 0에서 시작합니다.
Tip: NodeList 객체의 길이 속성을 사용하여 지정된 선택자와 일치하는 요소의 수를
확인한 다음 모든 요소를 반복하고 원하는 정보를 추출할 수 있습니다.
CSS 선택자에 대한 자세한 내용은, CSS Selectors Tutorial 및
CSS Selectors Reference를 참조하십시오.
Browser Support
Note: Internet Explorer 8은 CSS2 선택자를 지원합니다. IE9 및 이후 버전은 CSS3도 지원합니다.
Syntax
document.querySelectorAll(CSS selectors)
Parameter Values
| Parameter | Type | Description |
|---|---|---|
| CSS selectors | String | 필수입니다. 요소와 일치시킬 하나 이상의 CSS 선택자를 지정합니다. 이들은 ID, 클래스, 유형, 속성, 속성 값 등을 기반으로 HTML 요소를 선택하는 데 사용됩니다. 선택자가 여러 개인 경우, 각 선택자를 쉼표로 구분합니다. Tip: 모든 CSS 선택자 목록은 CSS Selectors Reference를 참조하십시오. |
Technical Details
| DOM Version | Selectors Level 1 Document Object |
|---|---|
| Return Value | 지정된 CSS 선택자와 일치하는 문서의 모든 요소를 나타내는 NodeList 객체입니다. NodeList는 정적(static) 컬렉션이므로 DOM의 변경 사항이 컬렉션에 영향을 미치지 않습니다. 선택자가 유효하지 않은 경우 SYNTAX_ERR 예외가 발생합니다. |
More Examples
Example
문서의 모든 <p> 요소를 가져오고, 첫 번째 <p> 요소(index 0)의 배경색을 설정합니다.
<body> <p>This is a p element.</p> <!-- red 배경색 적용됨 --> <p>This is also a p element.</p> <p> Click the button to add a background color to the first p element (index 0) in the document. </p> <button onclick="myFunction()">Try it</button> <p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet 8 and eralier versions.</p> <script> function myFunction() { var x = document.querySelectorAll("p"); // Get all <p> elements in the document. x[0].style.backgroundColor = "red"; // Set the background color of the first <p> element } </script> </body>
Example
문서에서 class="example"인 모든 <p> 요소를 가져오고, 첫 번째 <p> 요소의 배경을 설정합니다.
<body> <h2 class="example">A heading with class="example"</h2> <p class="example">A paragraph with class="example"</p> <p class="example">Another paragraph with class="example".</p> <!-- yellow 배경색 적용됨 --> <p> Click the button to add a background color to the first p element (index 0) in the document with class="example". </p> <button onclick="myFunction()">Try it</button> <p><strong>Note:</strong> The querySelctorAll() method is not supported in Internet Explorer 8 and earlier versions.</p> <script> function myFunction() { var x = document.querySelectorAll("p.example"); // Get all <p> elements in the document with class="example" x[1].style.backgroundColor = "yellow"; // Set the background color of the second <p> element with class="example" (index 1) } </script> </body>
Example
문서에 class="example"를 가진 요소의 개수를 확인합니다(NodeList 객체의 length 속성 사용).
/volume1/web/dokuwiki/data/attic/wiki/javascript/javascript_note/queryselectorall.1621997440.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
