12.2.1 속성으로 노드 선택하기
문서 객체 모델은 그림 12-2처럼 노드와 노드가 연결된 트리 구조입니다. document 객체는 트리를 탐색하면서 원하는 노드를 선택할 수 있는 속성을 제공합니다. 속성은 크게 노드의 타입을 구분하지 않고 모든 노드를 탐색할 수 있는 속성과 요소 노드(그림 12-2에서 분홍색 노드)만 탐색할 수 있는 속성으로 구분할 수 있습니다.
표 12-2 노드 탐색 속성
|
구분 |
속성 |
설명 |
|
모든 노드 탐색 |
parentNode |
부모 노드를 반환합니다. |
|
childNodes |
모든 자식 노드를 반환합니다. |
|
|
firstChild |
첫 번째 자식 노드를 반환합니다. |
|
|
lastChild |
마지막 자식 노드를 반환합니다. |
|
|
previousSibling |
이전 형제 노드를 반환합니다. |
|
|
nextSibling |
다음 형제 노드를 반환합니다. |
|
|
요소 노드 탐색 |
parentElement |
부모 요소 노드를 반환합니다. |
|
children |
자식 요소 노드를 반환합니다. |
|
|
firstElementChild |
첫 번째 자식 요소 노드를 반환합니다. |
|
|
lastElementChild |
마지막 자식 요소 노드를 반환합니다. |
|
|
previousElementSibling |
이전 요소 노드를 반환합니다. |
|
|
nextElementSibling |
다음 요소 노드를 반환합니다. |
예를 들어, 그림 12-2의 문서 객체 모델을 기준으로 document 객체로 접근할 수 있는 html 노드로 이동하고 싶다면 firstChild 속성을 사용하고, 첫 번째 자식 요소 노드로 이동하고 싶다면 firstElementChild 속성을 사용하면 됩니다.
document.firstChild; // <DOCTYPE html>
document.firstElementChild; // html
노드 탐색 속성은 다음과 같이 연속으로 사용할 수 있습니다.
document.childNodes[1].firstElementChild.firstElementChild.nextElementSibling;