[DOM - 5] querySelectorAll

querySelectorAll는 JavaScript를 사용하여 웹 페이지에서 CSS 선택자에 맞는 모든 HTML 요소를 선택하는 메서드입니다. 이 메서드를 사용하면 여러 개의 요소를 선택하고 NodeList(요소 목록)을 반환합니다.

문법

let elements = document.querySelectorAll("CSS_선택자");

동작

querySelectorAll은 문서에서 CSS 선택자에 맞는 모든 요소를 선택하고 NodeList를 반환합니다.
NodeList는 배열 유사 객체이므로 배열처럼 인덱스를 사용하여 각 요소에 액세스할 수 있습니다.

예시

클래스 이름으로 요소 선택

let buttons = document.querySelectorAll(".button"); // 클래스가 "button"인 모든 요소 선택

태그 이름과 클래스 조합으로 요소 선택

 

let highlightedParagraphs = document.querySelectorAll("p.highlight"); // 클래스가 "highlight"인 모든 <p> 요소 선택

활용

선택한 모든 요소를 순회하며 조작할 수 있습니다.

예를 들어, 각 요소에 이벤트 리스너 추가, 스타일 변경 등이 가능합니다.

// 선택한 모든 버튼에 이벤트 리스너 추가 예제
let buttons = document.querySelectorAll(".button");
buttons.forEach(function(button) {
    button.addEventListener("click", function() {
        // 버튼이 클릭될 때 수행할 동작
    });
});

 

NodeList를 배열로 변환하여 배열 메서드(예: forEach, map)를 사용할 수 있습니다.

// NodeList를 배열로 변환하여 forEach를 사용하는 예제
let paragraphs = Array.from(document.querySelectorAll("p"));
paragraphs.forEach(function(paragraph) {
    // 각 단락 요소에 대한 조작
});

querySelectorAll는 웹 페이지에서 여러 개의 요소를 선택하고 일괄적으로 조작하려는 경우에 

매우 유용한 메서드입니다.

 NodeList를 다룰 때에는 배열과 유사하게 다양한 작업을 수행할 수 있습니다.