DOM(문서객체모델) 탐색

 

자식, 부모 노드 탐색

 

javascript에서는 자식이나 부모 노드를 탐색하는 프로퍼티를 제공한다.

childNodes	- 자식노드를 탐색. NodeList객체를 결과로 반환 - 요소노드, 텍스트노드 둘다 탐색
firstChild	- 첫번째 자식을 탐색 - 요소노드, 텍스트노드 둘다 탐색
lastChild	- 마지막 자식을 탐색 - 요소노드, 텍스트노드 둘다 탐색
children	- 자식노드를 탐색. HTMLCollection객체를 결과로 반환 - 요소노드만 탐색
firstElementChild	- 첫번째 자식 요소노드 반환
lastElementChild	- 마지막 자식 요소노드 반환
parentNode	- 자기 바로 위의 부모 요소노드를 탐색.

 

HTML코드

javascript 확인 코드

 

childNodes 결과 : 0:text, 1:ul, 2:text, 3:div, 4:text

- childNodes는 요소노드 텍스트노드를 둘 다 탐색한다. HTML코딩시 개행이나 요소간 띄어쓰기시 공백텍스트 노드가 생기기 때문에 위의 결과처럼 나온다.

 

firstChild 결과 : #text

- firstChild도 마찬가지로 요소 및 텍스트노드를 탐색하므로 childNodes의 첫번째 결과인 text노드가 반환된다.

 

firstElementChild 결과 :

<ul>목록
                <li>
                    <a href="https://www.yahoo.com">야후</a>
                </li>
                <li>
                    <a href="https://www.google.com">구글</a>
                </li>

</ul>

- firstElementChild는 요소노드만 탐색한다. 그 중 첫번째 요소노드를 반환하므로 위와 같다..

 

children 결과 : 0:ul, 1:div

- children은 지정한 모든 자식중에서 요소노드만을 탐색한다. 그러므로 위와 같으며, 공백텍스트 노드 또한 없다.

 

 

 

자식 노드가 존재하는지 확인 방법

 

hasChildNodes()	- true, false 반환 - 자식노드중 요소노드나 텍스트노드가 있는지 확인
탐색변수.children.length	- 자식노드 중 요소노드가 있는지 (텍스트노드x) 길이 반환

 

a태그 요소노드를 가져오는데 여러개이기 때문에 제일 상단의 '야후'를 텍스트노드로 가지고 있는 앵커요소노드가 반환된다.

hasChildNodes()는 요소,텍스트 둘다 포함 시켜 탐색결과를 반환하므로 if안의 구문이 출력된다.

children.lengh는 요소노드만을 탐색하여 길이를 반환하므로 0이어서 if문의 구문을 수행하지 않는다.