DevStory

JavaScript/DOM

[JavaScript]HTMLCollection과 NodeList 차이점

DevStory 2022. 11. 10.

HTMLCollection과 NodeList

HTMLCollection과 NodeList의 주요 차이점은 HTMLCollection은 동적이고 NodeList는 정적이라는 것입니다. 즉, DOM에 새로운 요소(Element)가 추가되면 HTMLCollection은 새로운 요소를 가져오지만, NodeList는 가져오지 못합니다.

HTMLCollection

다음 두 메서드는 HTMLCollection 객체를 반환합니다.

- getElementByTagName()

- getElementByClassName()

NodeList

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

- getElementByName()

- querySelectorAll()

차이점 1. 텍스트 노트 포함 여부

다음은 간단한 HTML 마크업입니다.

 

<body> ~ </body> 내부에는 top이라는 id를 가진 div 요소가 존재합니다.

 

그리고 top이라는 id를 가진 <div> ~ </div> 내부에는 "Text Node"라는 텍스트 노드와 두 개의 div 요소 노드가 존재합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="top">
      Text Node
      <div>div Element node 1</div>
      <div>div Element node 2</div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

이제 top이라는 id를 가진 div 요소 노드를 접근합니다.

 

document 객체의 getElementById() 메서드에 "top"을 전달하면 id가 top인 요소 노드를 반환합니다.

 

id가 top인 요소 노드의 자식 노드를 HTMLCollection 형식으로 가져오려면 children 프로퍼티를 호출하고 NodeList 형식으로 가져오려면 childNodes 프로퍼티를 호출합니다.

const top = document.getElementById("top");

// id가 "top"인 요소
console.log(top);

// id가 "top"인 요소의 자식 노드(HTMLCollection 형식)
console.log(top.children);

// id가 "top"인 요소의 자식 노드(NodeList 형식)
console.log(top.childNodes);

[실행 결과]

실행 결과에서 확인할 수 있듯이 HTMLCollection 객체는 텍스트 노드인 "Text Node"를 포함하지 않습니다.

 

HTMLCollection와 NodeList의 첫 번째 차이점은 HTMLCollection 객체는 <div>, <span>, <p> 등과 같은 요소 노드만 포함하고 NodeList 객체는 요소 노드, 속성 노드, 텍스트 노드 등을 포함한다는 것입니다.

차이점 2. 자식 요소 노드 접근 방법

두 번째 차이점은 자식 요소 노드를 접근하는 방법이 다르다는 것입니다.

<div id="parent">
  <div id="id-div1">div Element node 1</div>
  <div name="nm-div1">div Element node 2</div>
  <div>div Element node 3</div>
</div>

 

HTMLCollection는 id, name 또는 인덱스로 자식 요소 노드를 접근할 수 있습니다.

const parentDiv = document.getElementById("parent").children;

// 인덱스로 접근
console.log(parentDiv[2]);

// id로 접근
console.log(parentDiv.namedItem("id-div1"));

// name으로 접근
console.log(parentDiv.namedItem("nm-div1"));

[실행 결과]

 

NodeList는 namedItem() 메서드를 가지고 있지 않으므로 id, name으로 자식 요소 노드를 접근할 수 없습니다. 자식 요소 노드를 접근하려면 인덱스를 사용합니다.

const parentDiv = document.getElementById("parent").childNodes;

// 인덱스로 접근
console.log(parentDiv[2]);

[실행 결과]

차이점 3. 동적 및 정적

HTMLCollection과 NodeList의 가장 큰 차이점은 HTMLCollection은 DOM에 추가된 새로운 요소를 가져오지만, NodeList는 가져오지 못한다는 것입니다.

 

id가 parent인 div 요소 내부에 자식 div 요소를 추가합니다.

<div id="parent">
  <div>div Element node 1</div>
  <div>div Element node 2</div>
  <div>div Element node 3</div>
</div>

getElementsByClassName() 메서드를 사용하여 클래스 이름이 add인 모든 div 요소를 HTMLCollection 형식으로 가져옵니다. NodeList는 querySelectorAll() 메서드를 사용하여 클래스 이름이 add인 모든 div 요소를 가져옵니다.

 

그다음 새로운 div 요소를 추가하고 HTMLCollection 객체의 길이와 NodeList 객체의 길이를 확인합니다.

// HTMLCollection
const newHtmlCollection = document.getElementsByClassName('add');
// NodeList
const newNodeList = document.querySelectorAll('.add');

console.log('추가 전 HTMLCollection의 길이: ' + newHtmlCollection.length);
console.log('추가 전 NodeList 길이: ' + newNodeList.length);

const parentDiv = document.getElementById("parent");

// 새로운 요소 추가
const div = document.createElement("div");
div.setAttribute("class", "add");
div.innerHTML = "div Element node 4";
parentDiv.appendChild(div);

console.log('추가 후 HTMLCollection의 길이: ' + newHtmlCollection.length);
console.log('추가 후 NodeList 길이: ' + newNodeList.length);

[실행 결과]

추가 전 HTMLCollection의 길이: 0 
추가 전 NodeList 길이: 0 
추가 후 HTMLCollection의 길이: 1 
추가 후 NodeList 길이: 0

차이점 4. 반복문

마지막 차이점은 반복문을 사용하여 각 요소 노드를 접근하는 방법이 다르다는 점입니다.

<div id="parent">
  <div id="id-div1">div Element node 1</div>
  <div name="nm-div1">div Element node 2</div>
  <div>div Element node 3</div>
</div>

HTMLCollection은 배열이 아니라 배열과 유사한 유사 배열 객체(Array-like Objects)입니다.

 

따라서, 각 요소를 접근하려면 for...of 문을 사용합니다.

const parentDiv = document.getElementById("parent").children;

for(childItem of parentDiv) {
  console.log(childItem);
}

[실행 결과]

 

NodeList는 forEach() 메서드가 존재합니다.

const parentDiv = document.getElementById("parent").childNodes;

parentDiv.forEach(item => {
  console.log(item);
});

[실행 결과]

정리

  • HTMLCollection은 요소 노드만 포함하고 NodeList는 요소 노드, 속성 노드, 텍스트 노드 등을 포함합니다.
  • HTMLCollection은 자식 요소 노드를 id, name 속성 또는 인덱스로 접근할 수 있으며 NodeList는 인덱스로만 접근할 수 있습니다.
  • HTMLCollection은 DOM에 추가된 새로운 요소를 가져오지만, NodeList는 가져오지 못합니다.
  • HTMLCollection은 for...of 문으로 각 요소를 순회하며, NodeList는 forEach() 메서드로 순회합니다.
반응형
저작자표시 비영리 변경금지

'JavaScript > DOM' 카테고리의 다른 글

[JavaScript]HTML 요소 가져오는 방법  (1) 2022.11.13
[JavaScript]HTML 요소의 넓이와 높이 가져오는 방법  (0) 2022.11.13
[JavaScript]JavaScript에서 배경색 변경하는 방법  (0) 2022.11.11
[JavaScript]OnClick 이벤트에서 DOM 요소 제거하는 방법  (0) 2022.11.11
[JavaScript]태그의 이름으로 요소(Element) 가져오는 방법  (0) 2022.11.10

댓글

티스토리툴바