DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있습니다. 하지만 무언가를 하기 전엔, 당연히 조작하고자 하는 DOM 객체에 접근하는 것이 선행되어야 합니다. Show DOM에 수행하는 모든 연산은 아래 그림은 DOM 노드 탐색이 어떤 관계를 통해 이루어지는지를 보여줍니다. 화살표로 나타낸 관계에 대하여 좀 더 자세히 알아봅시다. 트리 상단의 documentElement와 bodyDOM 트리 상단의 노드들은
<html> = document.documentElement document 를 제외하고 DOM 트리 꼭대기에 있는 문서 노드는 <html> 태그에 해당하는 document.documentElement 입니다.<body> = document.body document.body 는 <body> 요소에 해당하는 DOM 노드로, 자주 쓰이는 노드 중 하나입니다.<head> = document.head <head> 태그는 document.head 로 접근할 수 있습니다.
스크립트를 읽는 도중에 존재하지 않는 요소는 스크립트에서 접근할 수 없습니다. 브라우저가 아직 따라서 아래 예시에서 첫 번째
DOM의 나라에서 DOM에서 childNodes, firstChild, lastChild로 자식 노드 탐색하기앞으로 사용할 두 가지 용어를 먼저 정의하고 설명을 이어나가도록 하겠습니다.
아래 예시에서
아래 예시를 실행하면
예시를 실행하면 흥미로운 점이 하나 발견됩니다. 마지막에
이 프로퍼티들은 단축키 같은 역할을 합니다. 자식 노드가 존재하면 아래 비교문은 항상 참이 됩니다.
참고로 자식 노드의 존재 여부를 검사할 땐 함수 DOM 컬렉션위에서 살펴본
이터러블이기 때문에
첫 번째 특징은 장점으로 작용합니다. 두 번째 특징은 썩 좋지는 않지만
DOM 컬렉션은 읽는 것만 가능합니다. DOM 컬렉션을 비롯해 이번 챕터에서 설명하는 모든 탐색용 프로퍼티는 읽기 전용입니다.
DOM을 변경하려면 다른 메서드가 필요합니다. 다음 챕터에서 이 메서드에 대해 살펴보겠습니다. DOM 컬렉션은 살아있습니다. 몇몇 예외사항을 제외하고 거의 모든 DOM 컬렉션은 살아있습니다. DOM의 현재 상태를 반영한다는 말이죠.
컬렉션에 컬렉션은
형제와 부모 노드같은 부모를 가진 노드는 형제(sibling) 노드 라고 부릅니다.
다음 형제 노드에 대한 정보는 부모 노드에 대한 정보는 예시:
요소 간 이동지금까지 언급한 탐색 관련 프로퍼티는 모든 종류의 노드를 참조합니다. 하지만 실무에서 텍스트 노드나 주석 노드는 잘 다루지 않습니다. 웹 페이지를 구성하는 태그의 분신인 요소 노드를 조작하는 작업이 대다수이죠. 이런 실제 상황을 토대로 DOM 요소 노드 탐색이 어떻게 이루어지는지 알아봅시다. 위 그림 속 관계는 챕터 앞쪽에서 다뤘던 관계와 유사해 보입니다.
부모가 요소가 아니라면
그런데
반환 값이 다른 이유는 이런 사소한 차이는 임의의 요소 노드
앞서 보았던 예시에서
테이블 탐색하기지금까지 DOM 탐색 기본 프로퍼티를 알아보았습니다. 그런데 일부 DOM 요소 노드는 편의를 위해 기본 프로퍼티 외에 추가적인 프로퍼티를 지원합니다. 테이블이 가장 대표적입니다. 좀 더 자세히 알아봅시다.
용례:
표에 관련한 공식 명세서는 tabular data에서 찾아볼 수 있습니다. 테이블과 마찬가지로, HTML 폼(form)에만 쓸 수 있는 탐색 프로퍼티도 있습니다. 폼을 배우면서 이 프로퍼티에 대해서도 살펴보도록 하겠습니다. 요약탐색 프로퍼티를 사용하면 이웃 노드로 바로 이동할 수 있습니다. 탐색 프로퍼티는 크게 두 개의 집합으로 나뉩니다.
테이블과 같은 몇몇 DOM 요소는 추가 프로퍼티와 콘텐츠에 접속할 수 있게 해주는 컬렉션을 제공합니다. |