querySelectorAll 로 골라온 객체의 타입

Q.

querySelectorAll 메소드로 골라온 객체는 어떤 타입의 객체야?

 

A.

querySelectorAll 메소드로 골라온 객체는 NodeList 타입의 객체입니다.

 

NodeList란?

 

NodeList는 노드(Node)들의 목록을 나타내는 객체입니다.
Node는 HTML 요소(Element), 텍스트 노드, 주석 등 DOM 트리의 구성 요소를 의미합니다.
querySelectorAll은 주어진 CSS 선택자와 일치하는 모든 요소들을 NodeList 객체에 담아 반환합니다.

 

NodeList의 특징

 

유사 배열 객체: NodeList는 배열과 유사한 구조를 가지고 있어 length 속성을 통해 항목 개수를 확인하고, 인덱스를 사용하여 각 항목에 접근할 수 있습니다.
live collection: NodeList는 DOM의 변경 사항을 실시간으로 반영하는 "live collection"입니다. 즉, DOM 구조가 변경되면 NodeList의 내용도 자동으로 업데이트됩니다.
배열 메서드 사용 제한: NodeList는 배열이 아니므로 forEach, map, filter 등의 배열 메서드를 직접 사용할 수 없습니다. 하지만 Array.from()이나 for...of 루프를 사용하여 배열로 변환하거나 순회할 수 있습니다.

 

JavaScript

const paragraphs = document.querySelectorAll('p'); // 모든요소를 선택

console.log(paragraphs); // NodeList 객체 출력
console.log(paragraphs.length); // NodeList의 길이 (항목 개수) 출력
console.log(paragraphs[0]); // 첫 번째 요소 출력

 

// NodeList 순회 (forEach 사용)
Array.from(paragraphs).forEach(paragraph => {
console.log(paragraph.textContent);
});

 

// NodeList 순회 (for...of 루프 사용)
for (const paragraph of paragraphs) {
console.log(paragraph.textContent);
}

 

주의 사항:

querySelectorAll이 아무 요소도 찾지 못하면 빈 NodeList를 반환합니다.
NodeList는 DOM의 변경 사항을 실시간으로 반영하므로,

NodeList를 순회하는 동안 DOM 구조가 변경되면 예기치 않은 결과가 발생할 수 있습니다.

 

핵심:

querySelectorAll 메서드는 NodeList 객체를 반환합니다.

NodeList는 유사 배열 객체이지만 배열 메서드를 직접 사용할 수 없으므로,

Array.from()이나 for...of 루프를 사용하여 순회해야 합니다.

NodeList는 live collection이므로 DOM 변경 사항에 주의해야 합니다.

 

 

 

querySelector 와의 차이점

 

• querySelector 메소드는 CSS 선택자와 일치하는 첫 번째 요소를 찾아 Element 객체를 반환합니다.
• 요소를 찾지 못하면 null을 반환합니다.( querySelector 의 경우에)
• querySelectorAll과 달리 NodeList가 아닌 단일 Element 객체를 반환하므로, 배열 메서드를 사용할 필요 없이 바로 해당 요소에 접근하고 조작할 수 있습니다.