웹 문서 객체 모델 (DOM) 에서 각 요소는 고유한 타입을 가지며, 이 정보는 주로 nodeType을 통해 확인이 가능합니다. 표준 규격상 여러 가지 상수 (Entity Reference, Processing Instruction 등) 가 정의되어 있지만, 실제 브라우저 환경에서는 가장 빈번하게 사용되는 것은 'Element' 및 'Text' 형식의 노드입니다.

속성 접근과 데이터 저장 방식

개별 노드의 정체성을 나타내는 주요 속성으로는 nodeName과 nodeValue가 있습니다. 이 두 값은 반드시 해당 노드의 종류에 그 의미가 달라집니다. 예를 들어, 요소 (Element) 의 경우 nodeName은 태그 이름 ('p', 'div' 등) 을 문자열로 반환하지만, 텍스트 노드인 경우에는 nodeValue에 실제 내용이 저장되는 특징이 있습니다.

아래의 예시는 안전성을 위해 작업 대상이 실제로 요소 노드인지 먼저 검증한 후, 그 값을 추출하는 로직을 보여줍니다. 변수 명명 방식을 달리하고 조건 분기문을 함수 형태로 재구성했습니다.

<pre><code>function getNodeLabel(target){
  // Node.ELEMENT_NODE 는 일반적으로 1 에 해당합니다.
  if (target && target.nodeType === 1) {
    return `Target Tag: ${target.nodeName}, Value: ${target.nodeValue}`;
  } else if (target && target.nodeType === 3) {
    return `Text Content: ${target.nodeValue}`;
  }
  return "Unknown Node Type";
}

위 논리에서 볼 수 있듯이, 요소 노드의 경우 nodeValue는 항상 null 값을 갖게 되므로, 타입 체크를 거르는 과정이 데이터 무결성 유지에 중요합니다.

DOM 트리 내에서의 관계 설정

문서는 단순한 텍스트 블록의 집합이 아닌, 엄격한 계층 구조를 이루고 있는 것으로 표현됩니다. 이는 가계도 (Family Tree) 와 유사한 관계를 가정할 때, 부모 (parent), 자식 (child), 형제 (sibling) 개념을 적용하여 탐색할 수 있습니다.

특정 부모 노드가 있을 때, 이에 포함된 하위 항목들은 childNodes 속성을 통해 노출되며, 이 반환값의 자료형은 NodeList입니다. NodeList 는 일반적인 배열 (Array) 은 아니지만 유사 배열 (Array-like) 객체로서 인덱싱 연산자 [] 를 통한 직접 접근이 허용됩니다. 또한 length 속성을 통해 현재 관리 중인 자손 노드의 개수를 즉시 확인할 수도 있습니다.

가장 큰 특징은 NodeList 가 '라이브 (Live)' 뷰를 제공한다는 점입니다. 즉, DOM 구조가 동적으로 변경되더라도 이 목록은 자동으로 최신 상태로 동기화되어 있으며, 한 번 캐시된 스냅샷이 아닙니다.

다음 예제는 브래킷 표기법과 item() 메서드를 혼용하여 자식 노드에 접근하는 방법을 재해석한 코드입니다.

// 부모 컨테이너를 지정가정한 시나리오
const parentContainer = document.querySelector('.main-container');
const childrenCollection = parentContainer?.childNodes;

// index 0 기반 접근
const initialChild = childrenCollection[0]; 
// item() 을 이용한 명시적 호출
const lastChild = childrenCollection ? childrenCollection.item(childrenCollection.length - 1) : null;
const totalNodes = childrenCollection ? childrenCollection.length : 0;

실무에서는 최신 문법을 선호하는 개발자의 성향이 높아 중괄호([]) 연산자를 주로 사용하지만, 상호 운용성을 고려하여 Array.from() 등을 병기하여 배열로 복사해 쓰는 경우도 빈번히 발생합니다.