자바스크립트 querySelectorAll

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다.

 

querySelectorAll() 함수는 HTML 문서나 특정한 요소 내에서 지정한 CSS 선택자와 일치하는 모든 요소를 반환합니다.

 

특징

• HTML 문서나 특정한 요소 내에서 CSS 선택자와 일치하는 모든 요소를 NodeList 객체의 목록으로 반환합니다.
• 이 목록은 유사 배열입니다. 이 목록의 요소는 순회를 통해서 특정 작업을 수행할 수 있습니다.
• 일치하는 요소가 없으면 비어있는 NodeList 객체를 반환합니다.

Basic Example

<ul>
    <li>김밥</li>
    <li>라면</li>
    <li>떡볶이</li>
</ul>

<script>
    const liElements = document.querySelectorAll("li");  // li 선택자를 모두 선택
    console.log(liElements); // NodeList(3) [li, li, li]

    // 유사 배열로 length 속성 사용 가능
    let liElementsLength = liElements.length;

    // 순회를 통해 요소에 접근
    for (let i = 0; i < liElementsLength; i++) {
        console.log(liElements[i].textContent);
    }
    // 출력: "김밥" "라면" "떡볶이"
</script>

 

Syntax

// HTML 문서 전체에서
document.querySelectorAll(selectors)

// 특정한 요소 객체 내에서
element.querySelectorAll(selectors)

 

HTML 문서 전체에서 요소 찾기

HTML 문서(document 객체) 전체에서 모든 <p> 요소를 찾으려면 다음의 예시와 같이 작성할 수 있습니다.

let matches = document.querySelectorAll("p"); // HTML 문서에서 요소 찾기

 

특정한 요소 객체 내에서 요소 찾기

 

HTML 특정한 요소 내의 모든 <p> 요소를 찾으려면 다음의 예시와 같이 작성할 수 있습니다.

<div class="container">
    <p>자손 요소입니다.</p>
</div>

<script>
	let container = document.querySelector(".container"); // 특정한 요소 객체입니다.

    let matches = container.querySelectorAll("p"); // 특정한 요소 객체 내에서 요소 찾기
    /* let matches = document.querySelectorAll(".container p");와 동일한 반환값입니다. */
</script>

 

순회를 통해서 찾은 요소 다루기

CSS 선택자와 일치하는 모든 요소를 NodeList 객체의 목록으로 반환합니다.
이 목록은 유사 배열입니다.
이 목록의 요소는 순회를 통해서 다룰 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>querySelectorAll() 함수</title>     
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="queryselectorall.js"></script>
    </body>
</html>

 

/* queryselectorall.js */

const liElements = document.querySelectorAll("li");  // li 선택자를 모두 선택
console.log(liElements); // NodeList(3) [li, li, li]

/*
 * 이 목록은 유사 배열입니다.
 * 이 목록의 요소는 순회를 통해서 특정 작업을 수행할 수 있습니다.
*/

/* 방법 1 - for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
// 출력: "김밥" "라면" "떡볶이"

/* 방법 2 - for 문 적용 */
for (let i = 0; i < liElements.length; i++) { // length 속성 사용 가능
    console.log(liElements[i].textContent);
}
// 출력: "김밥" "라면" "떡볶이"

/* 방법 3 - forEach() 함수 적용 */
liElements.forEach(li => { // 유사 배열이지만 forEach() 함수 적용이 가능
    console.log(li.textContent);
});
// 출력: "김밥" "라면" "떡볶이"

 

참고문헌

JavaScript querySelectorAll()関数の使い方

JavaScript querySelectorAll()関数の使い方 - codingEverybody

 

JavaScript querySelectorAll() Function – A Complete Guide

JavaScript querySelectorAll() Function – A Complete Guide - codingCourses