Node로의 접근 완벽 정리! (parentNode,nextSibling...nodeType)

Node로의 접근

HTML 문서에서 HTML DOM 노드에 접근하는 방법 2가지

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

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

• nodeName (노드 고유의 이름을 저장하므로, 수정할 수 없는 읽기 전용 프로퍼티)

// HTML 문서의 모든 자식 노드 중에서 두 번째 노드의 이름을 선택함.
document.getElementById("document").innerHTML = document.childNodes[1].nodeName;           // HTML
 
// html 노드의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택함.
document.getElementById("html").innerHTML = document.childNodes[1].childNodes[0].nodeName; // HEAD

• nodeValue

// "#heading"인 요소의 첫 번째 자식 노드의 노드값을 선택함.
var headingText = document.getElementById("heading").firstChild.nodeValue;

document.getElementById("text1").innerHTML = headingText;
document.getElementById("text1").firstChild.nodeValue = headingText;

• nodeType (노드 고유의 이름을 저장하므로, 수정할 수 없는 읽기 전용 프로퍼티)

// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 타입을 선택함.

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

document.getElementById("head").innerHTML = headingType;           // 3
document.getElementById("document").innerHTML = document.nodeType; // 9

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

빈 텍스트 노드의 처리

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

파이어폭스나 기타 브라우저들은 띄어쓰기나 줄 바꿈을 텍스트 노드(text node)로 취급한다.

하지만 익스플로러는 띄어쓰기나 줄 바꿈을 텍스트 노드로 취급하지 않는다.

따라서 자식 노드나 형제 노드를 이용하여 원하는 노드에 접근하려고 하면 브라우저 간에 차이가 발생하게 된다.
이 차이를 없애는 가장 손쉬운 방법은 nodeType 프로퍼티를 사용하여 선택된 요소의 타입을 검사하는 것이다.

var lastNode;

function findLastChild(parentNode) {

    lastNode = parentNode.lastChild;

    while (lastNode.nodeType != 1) {
        lastNode = lastNode.previousSibling;
    }

}

function printLastChild() {
    var parentNode = document.getElementById("parentNode");

    findLastChild(parentNode);
    document.getElementById("nodename").innerHTML = lastNode.nodeName;
}

위의 예제에서 마지막 자식 노드를 찾은 후에, 찾은 노드의 타입이 요소 노드가 아니면 그 앞의 노드를 다시 검사한다.
이 방식을 사용하면 모든 브라우저에서 마지막 자식 노드로 같은 요소 노드를 선택할 수 있게 된다.