[JavaScript] 노드(node)

 

HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있습니다. HTML DOM은 이러한 노드들을 정의하고 그들 사이의 관계를 설명해주는 역할을 합니다. HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장되는데 이러한 노드 트리는 노드들의 집합이며 노드 간의 관계를 보여줍니다.

 

노드 트리는 최상위 레벨인 루트 노트(root node)로부터 시작하여 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려갑니다. 자바스크립트에서 HTML  DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있습니다.

 

W3C HTML DOM 표준에 따르면 HTML 문서의 모든 것은 노드입니다. 다음 표는 HTML 문서를 구성하는 대표적인 노드의 종류를 표현하고 있습니다.

노드	설명
문서 노드(document node)	HTML 문서 전체를 나타내는 노드
요소 노드(element node)	모든 HTML 요소는 요소 노드이고 속성 노드를 가질 수 있는 유일한 노드
속성 노드(attribute node)	모든 HTML 요소의 속성은 속성 노드이고 요소 노드에 관한 정보를 가지고 있는 노드 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않는다.
텍스트 노드(text node)	HTML 문서의 모든 텍스트
주석 노드(comment node)	HTML 문서의 모든 주석

노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있습니다.

노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재하고 루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(parent node)만을 가지고 있습니다. 모든 요소 노드는 자식 노드(child node)를 가질 수 있습니다.

• 형제 노드(sibling node)는 같은 부모 노드를 가지는 모든 노드를 가리킵니다.
• 조상 노드(ancestor node)란 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드를 가리킵니다.
• 자손 노드(descendant node)란 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드를 가리킵니다.

HTML 문서에서 HTML DOM 노드에 접근하는 대표적인 방법은 다음과 같습니다.

1. getElementsByTagName() 메소드를 이용하는 방법
2. 노드 간의 관계를 이용하여 접근하는 방법

getElementsByTagName() 메소드를 이용하는 방법은 id, class, name, CSS selector, object collection의 방법으로 대체될 수 있습니다.  노드 간의 관계를 이용하여 접근하는 방법을 하기 위해서는 HTML DOM에서 노드 간의 관계를 정의하는 프로퍼티를 알고 있어야 합니다.

• parentNode : 부모노드
• childNode : 자식노드
• firstChild : 첫 번째 자식 노드
• lastChild : 마지막 자식 노드
• nextSibling : 다음 형제 노드
• previousSibling : 이전 형제 노드

프로퍼티를 알고 있다면 노드에 손쉽게 접근할 수 있으며 노드에 대한 정보는 다음 프로퍼티를 통해 접근할 수 있습니다.

• nodeName
• nodeValue
• nodeType

위 프로퍼티들은 특별히 다른 인터페이스를 이용하지 않고도 해당 노드의 정보에 직접 접근할 수 있는 방법을 제공하고 있습니다.

 

1. nodeName

nodeName 프로퍼티는 노드 고유의 이름을 저장하므로 수정할 수 없는 읽기 전용 프로퍼티입니다. 요소 노드의 nodeName 프로퍼티는 언제나 해당 HTML 요소의 태그 이름을 대문자로 저장하고 있습니다.

노드	프로퍼티 값
문서 노드(document node)	#document
요소 노드(element node)	태그 이름(영문자로 대문자)
속성 노드(attribute node)	속성 이름
텍스트 노드(text node)	#text

document.getElementById("document").innerHTML = document.childNodes[1].nodeName;

2. nodeValue

nodeValue 프로퍼티는 노드의 값을 저장합니다.

노드	프로퍼티 값
요소 노드(element node)	undefined
속성 노드(attribute node)	해당 속성의 속성값
텍스트 노드(text node)	해당 텍스트 문자열

var headingText = document.getElementById('heading').firstChild.nodeValue;

3. nodeType

nodeType 프로퍼티는 노드 고유의 타입을 저장하므로 수정할 수 없는 읽기 전용 프로퍼티입니다. 대표적인 HTML 노드별 nodeType 프로퍼티 값은 다음과 같습니다.

노드	프로퍼티 값
문서 노드(document node)	9
요소 노드(element node)	1
속성 노드(attribute node)	2
텍스트 노드(text node)	3
주석 노드(comment node)	8

var headingType = document.getElementById('heading').firstChild.nodeType;

4. 예외

현재 대부분의 주요 웹 브라우저는 모두 W3C DOM 모델을 지원하지만 그 처리 방식에 있어 약간씩의 차이가 있습니다. 그 중에서도 가장 큰 차이점은 띄어쓰기와 줄 바꿈을 처리하는 방식입니다.

 

파이어폭스나 기타 브라우저들은 띄어쓰기나 줄 바꿈을 텍스트 노드(text node)로 취급합니다. 하지만 익스플로어는 띄어쓰기나 줄 바꿈을 텍스트 노드로 취급하지 않습니다. 따라서 자식 노드나 형제 노드를 이용하여 원하는 노드에 접근하려고 하면 브라우저 간에 차이가 발생합니다. 이 차이를 해결하는 가장 손쉬운 방법은 nodeType 프로퍼티를 사용하여 선택된 요소의 타입을 검사하는 것입니다.

var lastNode;

function findLastChild(parentNode){
	lastNode = parentNode.lastChild;
    while(lastNode.nodeType != 1) {
    	lastNode = lastNode.previousSibling;
    }
}