[JavaScript강의노트] DOM 사용하기 (3)

문서 객체 모델 (DOM)

노드 트리와 관련된 프로퍼티

이전 강의노트에서 DOM은 (X)HTML 문서의 각 엘리먼트 노드들을 트리 구조로 보고 접근한다고 했었습니다. HTML DOM API에는 이 트리를 탐색할 수 있도록 다양한 프로퍼티들을 제공합니다.

firstChild와 lastChild 프로퍼티

firstChild 프로퍼티는 부모 노드의 자식 노드 중 첫 번째 노드를 가리킵니다. 마찬가지로 마지막 자식 노드를 가리키는 프로퍼티는 lastChild 입니다.

var element = document.getElementById("headline");
alert(element.firstChild);

childNodes 프로퍼티

childNodes 프로퍼티는 부모 노드의 모든 자식 노드들을 배열로 저장하고 있습니다.

<p id="para">
<span>Java</span><span>Servlet</span><span>JSP</span>
</p>
<script type="text/javascript">
var element = document.getElementById("para");
var texts = element.childNodes;
for (var i = 0; i < texts.length; i++) {
	if (texts[i].nodeType == Node.ELEMENT_NODE) { /* 파폭에서만 필요합니다. */
		document.writeln(texts[i].firstChild.nodeValue + "<br />");
	}
}
</script>

위의 소스에서 if 문은 파이어폭스3.5(FF)에서는 제대로 동작을 하지만 IE8.0에서는 필요없습니다. 이유는 바로 '\n' 때문인데 IE8.0은 노드 트리를 만들 때 '\n'을 무시하지만 FF는 '\n'를 트리에 추가합니다. 그래서 FF에서 p 엘리먼트의 자식 엘리먼트는 '\n', span, span, span, '\n'이 됩니다. 위의 소스를 IE8.0에서 실행시키면 화면에 아무것도 표시하지 않는데 'document.ELEMENT_NODE'의 값이 정수 '1'인데 IE에는 심볼 선언이 되어 있지 않기 때문입니다. 결국 IE와 FF 모두에서 정상 동작을 시키려면 nodeType == 1 로 체크를 해야합니다. 참고로 1은 엘리먼트 타입을 의미합니다.

nodeType 프로퍼티

앞서 소스 코드에 본 것처럼 노드의 타입 값을 담고 있는 프로퍼티입니다. 엘리먼트 노드는 1, 어트리뷰트 노드는 2, 텍스트 노드는 3으로 지정되어 있습니다. FF는 ELEMENT_NODE, ATTRIBUTE_NODE, TEXT_NODE 등으로 미리 선언되어 있습니다. IE는 이러한 심볼이 존재하지 않으므로 다음처럼 선언하여 사용하는 것도 한가지 요령이 되겠습니다.

if (!window.Node) {
	var Node = {
		ELEMENT_NODE: 1,
		ATTRIBUTE_NODE: 2,
		TEXT_NODE: 3,
		COMMENT_NODE: 8,
		DOCUMENT_NODE: 9,
		DOCUMENT_FRAGMENT_NODE: 11
	};
}

이렇게 하면 IE의 경우 window 객체에 Node 객체가 존재하지 않으므로 if 조건에 의해 Node 객체에 심볼들을 추가하게 됩니다. 정수 리터럴을 그대로 사용하고 별도로 /* Node.ELEMENT_NODE */ 와 같은 주석을 다는 것보다 좀 더 직관적인 코딩 습관을 길러줍니다.

nodeValue 프로퍼티

텍스트 노드의 문자열을 읽거나 변경하기 위해 사용합니다.

document.getElementsByTagName("h1")[0].firstChild.nodeValue = "제목을 바꿉니다.";

위와 같이 하면 표현식이 실행된 순간 제목의 내용이 거짓말처럼 바뀌게 됩니다. 이제 태그의 내용을 여러분이 원하는 시점에서 변경할 수 있는 멋진 아이디어가 떠오를 겁니다.