주어진 요소에 접근하여 부모와 자식 요소 찾기

문제

특정 document 요소에 접근하여 그 요소의 부모와 자식 요소를 찾고 싶다.

해결

주어진 요소에 아이디를 부여하고 document.getElementById 메서드를 사용한다.

<div id="demodiv">
...

var demodiv = document.getElementById("demodiv");

부모는 parentNode 속성을 통해 접근한다.

var parent = demodiv.parentNode;

자식은 childeNodes 속성을 통해 접근한다.

var children = demodiv.childNodes;

설명

요소가 포함하고 있는 자식 요소를 찾고 싶을 때는 childNodes 속성을 통해 자식 노드 컬렉션을 탐색할 수 있다.

if (demodiv.hasChildNodes()){
    var children = demodive.childNodes;
    for(var i=0; i<children.length; i++){
        outputString += "자식노드: " + children[i].nodeName + "<br />";
    }
}

각 노드의 요소 종류는 nodeName 속성을 통해 확인할 수 있다.

var type = parent.nodeName;     //BODY

그런데 간혹 예상하지 못한 것도 자식노드로 나타난다. 예를 들어 요소 앞뒤에 있는 공백도 '#text'라는 nodeName을 가진 자식 노드이다.

<div id="demodiv" class="demo">
    <p>텍스트</p>
    <p>다시 텍스트</p>
</div>

위 코드에서 demodiv 요소에는 두개가 아닌 다섯 개의 자식 노드가 있다.

자식 노드 : #text
자식 노드 : P
자식 노드 : #text
자식 노드 : P
자식 노드 : #text

그러나 IE8에서는 두 개의 문단 요소만 자식 요소로 나타난다. 그래서 어떤 노드에 정확하게 접근하려면 nodeName을 통해 확인하는 과정이 필요하다.