트리구조를 활용해 자식 노드에 접근하는 방법

HTML 문서는 트리구조로 이루어져 있다. 트리구로를 활용해 자식 노드에 접근할 수 있는데 방법은 아래와 같다.

 

 

■ HTML 문서 구성

<ul onclick="test(this);">
    <li>
        <a>
            텍스트
        </a>
    </li>
</ul>

 

 

■ 위 HTML 문서의 구조상 자식에 접근하는 방법

 

ul을 기준으로 첫번째 자식에 접근하기 위해서는 ul노드에서 childNodes를 사용해 자식노드에 접근하며, 단계적으로 접근할 수 있다

 

 

 

■ HTML DOM를 사용하여 자식 노드에 접근한 예제

function test(obj) {

 var txt = "";

 txt += "객체: " + obj + "\n\n";
 
 txt += "객체의 자식들을 배열로 얻는 속성 : " + obj.childNodes + "\n";
 txt += "객체의 자식들의 수는 : " + obj.childNodes.length + "\n\n";
 
 txt += "자식의 이름 : " + obj.childNodes[0].nodeName + "\n";
 txt += "자식의 자식수  : " + obj.childNodes[0].childNodes.length + "\n\n";
 
 txt += "자식의 자식 이름 : " + obj.childNodes[0].childNodes[0].nodeName + "\n";
 txt += "자식의 자식의 자식수  : " + obj.childNodes[0].childNodes[0].childNodes.length + "\n\n";

 

 /* 이 때 자식수가 0이면 텍스트 노드도 없고 자신이 마지막 노드가 된다.
 txt += "자식의 자식의 자식 이름 : " + obj.childNodes[0].childNodes[0].childNodes[0].nodeName + "\n";
 txt += "자식의 자식의 자식의 자식수 : " + obj.childNodes[0].childNodes[0].childNodes[0].childNodes.length + "\n\n";
 */

 

 alert(txt);
}

 

 

■ 결과

 

노드안에 텍스트가 있다면 맨 마지막 자식 노드는 텍스트 노드가 된다. 텍스트 노드를 제외하고 싶다면 노드 타입을 확인하여 텍스트 노드를 제외할 수 있는데, 노드타입(nodeType)이 반환하는 값이 나타내는 엘레멘트 타입은 다음과 같다.

 

엘레멘트 타입(Element Type)	노드타입(nodeType)
Element(엘레멘트)	1
Attribute(속성)	2
Text(텍스트)	3
Comment(주석)	8
Document(문서)	9