querySelectorAll()

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

  • HTML 문서나 특정한 요소 내에서 CSS 선택자와 일치하는 모든 요소를 NodeList 객체의 목록으로 반환합니다.
  • 이 목록은 유사 배열입니다. 이 목록의 요소는 순회를 통해서 특정 작업을 수행할 수 있습니다.
  • 일치하는 요소가 없으면 비어있는 NodeList 객체를 반환합니다.
HTML 
<ul>
    <li>김밥</li>
    <li>라면</li>
    <li>떡볶이</li>
</ul>
JavaScript 
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);
}
/*
    김밥
    라면
    떡볶이
*/

코드 부연설명
length 속성은 문자열, 배열, 유사 배열의 길이를 반환합니다.

코드 부연설명
for 반복문은 특정 횟수나 범위만큼 반복하는 문입니다. 배열, 유사 배열에도 적용할 수 있습니다.

코드 부연설명
textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

기능

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

HTML 문서 전체에서 요소 찾기

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

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

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

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

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

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

코드 부연설명
querySelector() 함수는 HTML 문서나 특정한 요소 내에서 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

이 예시에서는 특정한 부모 요소 객체 내에서도 사용할 수 있음을 보여주고 있습니다.

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

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)

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

매개변수

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

반환 값

  • HTML 문서나 특정한 요소 객체 내에서 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;
});

코드 부연설명
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다.

브라우저에서 실제 표시된 모습 버튼을 클릭해 보세요!

새로운 요소를 추가하면 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에서 더 자세한 정보를 확인해 보세요.

참고문헌

같이 보기