querySelectorAll()

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

CSS 선택자 소개
  • HTML 문서나 parentNode 객체(부모 요소 객체) 내에서 CSS 선택자와 일치하는 모든 요소를 NodeList 객체의 목록으로 반환합니다.
  • 이 목록은 유사 배열입니다. 이 목록의 요소는 순회를 통해서 특정 작업을 수행할 수 있습니다.
  • 그리고, 이 목록은 정적이며 DOM의 변경 사항을 실시간(또는 live)으로 반영하지 않습니다.
  • 일치하는 요소가 없으면 비어있는 NodeList 객체를 반환합니다.

기능

querySelectorAll() 함수의 기능에 대해 알아보겠습니다.

HTML 문서 전체에서 요소 찾기

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

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

parentNode 객체(부모 요소 객체) 내에서 요소 찾기

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

HTML 
<div class="container">
    <p>자손 요소입니다.</p>
</div>
JavaScript 
let container = document.querySelector(".container"); // parentNode 객체(부모 요소 객체)입니다.

let matches = container.querySelectorAll("p"); // parentNode 객체(부모 요소 객체) 내에서 요소 찾기
/* let matches = document.querySelectorAll(".container p");와 동일한 반환값입니다. */
querySelector() 함수

이 예시에서는 Document 객체의 ParentNode 객체(부모 요소 객체)에서도 사용할 수 있음을 보여주고 있습니다.

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

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

NodeList는 유사 배열 객체이면서, for...of 문으로 순회 가능한 이터러블(iterable) 객체입니다.
length 속성으로 유사 배열 객체인 NodeList의 길이를 반환할 수 있습니다.

다음은 querySelectorAll() 함수로 HTML 문서 내의 <li> 요소들을 찾아서 순회를 통해 특정 작업을 수행하는 예제입니다.

HTML 
<!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>
Javascript - 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);
});
/*
    김밥
    라면
    떡볶이
*/

querySelectorAll() 함수로 반환하는 NodeList 객체는 유사 배열 형태를 가집니다.
NodeList 객체는 배열과 유사하게 요소에 인덱스를 사용하여 접근할 수 있고, length 속성을 통해 요소의 수를 확인할 수 있습니다. 그러나 NodeList 객체는 진짜 자바스크립트 배열이 아니라 유사 배열(iterable) 객체입니다.

NodeList 객체는 배열과 유사하게 다룰 수 있지만, 진짜 배열처럼 배열 메서드(push(), pop() 등)를 사용할 수는 없습니다.

그러나, 유사 배열임에도 불구하고 배열을 순회할 때 사용하는 forEach() 함수는 사용할 수 있습니다.

구문

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

// 특정 요소 내에서
parentNode.querySelectorAll(selectors)

매개변수

querySelectorAll() 함수의 매개변수
selectors 문자열 형식의 유효한 CSS 선택자입니다.

반환 값

  • HTML 문서나 parentNode 객체(부모 요소 객체) 내에서 CSS 선택자와 일치하는 모든 요소를 NodeList 객체의 목록으로 반환
    (이 목록은 정적이며 DOM의 변경 사항을 실시간(또는 live)으로 반영하지 않음)
  • 일치하는 요소가 없으면 비어있는 NodeList 객체를 반환

상황별 예제

상황별 예제를 다루겠습니다.

특정 클래스 이름의 모든 요소에 스타일 적용하기

JavaScript 
// HTML: <p class="highlight">이 요소들의 스타일을 변경합니다.</p>
const highlightedElements = document.querySelectorAll(".highlight");

for (let i = 0; i < highlightedElements.length; i++) {
    highlightedElements[i].style.backgroundColor = "yellow";
    highlightedElements[i].style.color = "green";
}

이 예제에서는 클래스 이름이 "highlight"인 모든 요소를 선택하고 해당 요소들의 스타일을 변경합니다.

특정 요소 유형에 대한 정보 출력하기

JavaScript 
/*
    HTML:
    <ul id="myList">
        <li>항목 1</li>
        <li>항목 2</li>
        <li>항목 3</li>
    </ul>
*/
const listItems = document.querySelectorAll("#myList li");

for (let i = 0; i < listItems.length; i++) {
    console.log("항목 " + (i + 1) + ": " + listItems[i].textContent);
}

이 예제에서는 id가 "myList"인 목록 요소의 모든 <li> 요소를 선택하고 각 요소의 텍스트 내용을 콘솔에 출력합니다.

링크 목록에 이벤트 리스너 추가하기

JavaScript 
/*
    HTML:
    <ul id="myLinks">
        <li><a href="#">링크 1</a></li>
        <li><a href="#">링크 2</a></li>
    </ul>
*/
const linkList = document.querySelectorAll("#myLinks a");

for (let i = 0; i < linkList.length; i++) {
    linkList[i].addEventListener("click", function(event) {
        event.preventDefault();
        alert("링크가 클릭되었습니다!");
    });
}

이 예제에서는 id가 "myLinks"인 목록의 모든 링크(<a>) 요소를 선택하고 각 링크에 클릭 이벤트 리스너를 추가합니다. 링크를 클릭하면 경고 메시지가 표시됩니다.

일치하는 요소가 없을 때 빈 NodeList 객체를 반환

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>querySelectorAll() 예제</title>
    </head>
    <body>
        <div id="myElement">이 요소를 선택할 수 있습니다.</div>
        <script>
            const nonExistentElement = document.querySelectorAll("#nonExistentElement");
            
            if (nonExistentElement.length === 0) { // length 속성을 사용해서 nodeList 객체의 길이에 접근 가능
                console.log("일치하는 요소가 없습니다.");
            } else {
                console.log("일치하는 요소를 찾았습니다.");
            }
        </script>
    </body>
</html>

이 예제에서는 id가 "nonExistentElement"로 설정된 요소는 없으므로 querySelectorAll()로 선택한 #nonExistentElement 선택자는 일치하는 요소가 없어 빈 nodeList를 반환합니다. 그런 다음 자바스크립트에서 if...else 문을 사용하여 결과를 확인하고 콘솔에 메시지를 출력합니다. 결과는 "일치하는 요소가 없습니다."가 될 것입니다.

DOM의 변경 사항을 실시간(또는 live)으로 반영하지 않음

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>NodeList</title>     
    </head>
    <body>
        <ul id="list">
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <p><li> 요소의 개수: <strong id="li-length-val">3</strong></p>
        <button type="button" id="addButton">새로운 메뉴 추가</button>
        <script src="none-live.js"></script>
    </body>
</html>
JavaScript - none-live.js 
// <li> 요소 가져오기
const liElements = document.querySelectorAll("li");

// 버튼 클릭 시 새로운 <li> 요소 추가
document.getElementById('addButton').addEventListener("click", () => {
    const newLi = document.createElement("li");
    newLi.textContent = '새로운 메뉴';

    // 새로운 <li> 요소를 <ul>에 추가
    document.getElementById("list").appendChild(newLi);

    // <li> 요소의 개수 실시간 확인
    const liElementsLength = liElements.length; // 이미 선언했던 liElements의 length가 실시간 반영됨
    document.getElementById("li-length-val").textContent = liElementsLength;
});
브라우저에서 실제 표시된 모습 버튼을 클릭해 보세요!

새로운 요소를 추가하면 querySelectorAll() 함수는 실시간(또는 live)으로 반영하지 않아서, <li> 요소의 개수가 바뀌지 않는 것을 확인할 수 있습니다.

명세서

querySelectorAll() 함수의 명세서 사양
명세서 사양
querySelectorAll() DOM Standard
#ref-for-dom-parentnode-queryselectorall①

브라우저 호환성

querySelectorAll() 함수의 브라우저 호환성
함수
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
querySelectorAll() 1 12 3.5 3.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌

같이 보기