본격적으로 DOM에 대해 알아보기 전에 앞 장에서 나온 노드에 관해 더 자세히 이해하고 DOM의 구조를 탐험하는 시간을 가져보겠습니다.
앞 장에서 자바스크립트 리모콘으로 웹사이트라는 로봇을 다루려면 DOM 모델의 구성 요소를 제어해야 한다고 했습니다. 이 구성 요소를 노드(Node)라고 칭합니다.
노드는 추상적인 개념이라 정확한 상을 가지고 이해하기는 어려울 수 있습니다. 그러므로 먼저 노드 개체를 통해 직관적인 접근을 해보겠습니다.
아래에 앞으로 여러분이 많이 보게 될 두 분류의 사진을 준비했습니다. 여기에서 노드가 무엇인지 가리킬 수 있나요?
우선 왼쪽 사진을 살펴보겠습니다. head 태그, title 태그, 그 안에 텍스트 뿐만 아니라 태그 사이 공백(개행)도 문서의 일부로 볼 수 있어야 합니다. 웹 페이지에 그려지지 않는 주석도 마찬가지입니다.
오른쪽 사진은 옆의 마크업에서 찾아낸 노드를 DOM 트리 구조로 시각화한 것입니다. 이처럼 브라우저는 HTML 문서의 모든 컨텐츠를 각개의 노드 개체로 표현하고 있습니다.
HTML 문서는 콘텐츠 > 콘텐츠 > 콘텐츠 와 같은 형태로 캡슐화 되어 있고 브라우저는 이 계층을 해석해서 트리 구조로 표현합니다. 이것이 바로 DOM tree이며 노드(Node, 나무의 마디)는 트리를 구성하는 하나하나의 개체입니다. 정리하자면 DOM은 노드 개체를 계층적으로 구조화한 트리입니다.
각각의 노드는 나무에 빗대어 루트/브랜치/리프 노드로 표현하기도 하고, 계층 관계에 따라 부모/자식/형제 노드로 표현하기도 합니다[1].
노드의 관계에 따라 달라지는 여러가지 명칭
노드에는 여러 유형이 존재합니다. 각 노드 유형의 프로퍼티와 메서드가 다르므로 정확한 조작을 위해서는 유형별 특성을 알고 구분할 줄 알아야 합니다.
다음은 모든 노드 유형을 불러오는 JavaScript 코드입니다.