자바스크립트 노드 목록
HTML DOM은 HTML 문서의 인터페이스인 Document Object Model의 약자입니다. 모든 웹 페이지 또는 문서를 노드 모음으로 구성된 트리 구조로 취급합니다.
간단히 말해서 노드는 웹 문서의 개체입니다. 이러한 노드는 DOM 문서에 계층적으로 배치됩니다.
또한 상위 노드와 하위 노드가 있을 수 있습니다.
HTML DOM 노드 소개
다음과 같이 HTML 페이지가 있다고 가정해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<!-- This is the page head -->
<title>DOM Node Example</title>
</head>
<body>
<!-- This is the page body -->
<h2>DOM Node Demo</h2>
<p id="body-content">This article is about DOM NodeList.</p>
</body>
</html>
위의 HTML 페이지는 브라우저에서 트리 구조로 해석됩니다. 따라서 다음과 같이 보일 수 있습니다.
|-doctype: html
|-HTML
-|HEAD
-|TITLE
-|text: DOM Node Example
-|BODY
-|comment: This is the page body
-|H2
-|text: DOM Node Demo
-|P id="body-content"
-|text: This article is about DOM NodeList.
각 HTML 태그는 DOM 노드이지만 노드는 HTML 태그로 제한되지 않습니다. HTML 텍스트와 주석도 DOM 노드로 간주됩니다.
따라서 HTML 노드와 요소는 HTML 요소가 DOM 노드의 하위 유형인 서로 다른 두 가지입니다.
JavaScript NodeList 개체
이름에서 알 수 있듯이 NodeList 개체는 DOM 노드 모음입니다. 약간의 차이점을 제외하면 HTMLCollection 개체와 매우 유사합니다. HTMLCollection 개체와 같이 이름과 ID로 액세스할 수 있지만 NodeList 개체는 인덱스 기반 액세스만 지원합니다.
또한 HTMLCollection에는 Node.ELEMENT_NODE 유형 노드만 포함됩니다. NodeList 객체는 속성 노드, 텍스트 노드 및 요소 노드를 포함한 주석 노드와 같은 다양한 유형의 노드를 보유할 수 있습니다.
NodeList 개체에는 라이브 및 정적의 두 가지 유형이 있으며 다음 섹션에서 설명합니다.
정적 대 라이브 NodeList 개체
document 개체의 childNodes 속성은 우리가 라이브 NodeList라고 부르는 NodeList 개체를 반환합니다. 이 개체는 DOM 수정에 의해 자동으로 영향을 받기 때문입니다.
다음과 같이 JavaScript를 사용하여 위에서 언급한 HTML에 액세스하기 위해 브라우저 콘솔을 사용합시다.
const bodyContent = document.getElementById('body-content');
var nodeListForBody = bodyContent.childNodes;
console.log(nodeListForBody);
출력:
예상대로 NodeList 개체는 childNodes 속성에 의해 반환되었습니다. nodeListForBody 객체의 길이를 확인해 봅시다.
console.log(nodeListForBody.length);
출력:
다음과 같이 단락 요소에 새 자식 요소를 추가해 보겠습니다.
bodyContent.appendChild(document.createElement('div'));
그런 다음 다음과 같이 NodeList nodeListForBody의 길이를 확인합니다.
console.log(nodeListForBody.length);
출력:
DOM 수정으로 nodeListForBody의 길이가 변경되었으므로 라이브 NodeList 개체입니다.
라이브 NodeList 개체와 달리 정적 NodeList는 DOM 수정의 영향을 받지 않습니다. 일반적으로 document.querySelectorAll() 메서드는 정적 NodeList 개체를 반환합니다.
NodeList 개체에 대한 작업
NodeList는 배열이 아닙니다. JavaScript 배열과 유사한 색인으로 NodeList를 반복할 수 있지만 pop(), push() 및 join()과 같은 배열 작업을 지원하지 않습니다.
위 NodeList의 첫 번째 노드인 nodeListForBody에 인덱스 0으로 액세스해 보겠습니다.
console.log(nodeListForBody[0]);
출력:
 메서드 를 사용하여 일반적인 JavaScript 배열로 쉽게 변환할 수 있습니다.
const nodeListAsArray = Array.from(nodeListForBody)
console.log(nodeListAsArray);
출력:
예상대로 위의 NodeList nodeListForBody는 배열 nodeListAsArray로 변환되었습니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.