HTML을 지탱하는 것은 태그이다.

DOM에 따르면, 모든 HTML 태그는 객체다. 태그 하나가 감싸고 있는 자식 태그는 중첩 태그라고 부른다. 태그 내의 문자 역시 객체다.

모든 객체는 자바스크립트를 통해 접근할 수 있고, 페이지를 조작할 때 이 객체를 사용한다.

( document.body 는 <body> 태그를 객체로 나타낸 것이다. )

HTML/XML 문서는 브라우저 안에서 DOM 트리로 표현된다.

태그는 요소 노드가 되고, 트리 구조를 형성한다.

DOM 노드 타입은 총 12가지인데, 실무에서는 주로 다음 네 가지 노드를 다룬다.

  1. DOM의 진입점이 되는 문서 노드 document node
  2. HTML 태그에서 만들어지며, DOM 트리를 구성하는 블록인 요소 노드 element node
  3. 텍스트를 포함하는 텍스트 노드 text node
  4. 화면에 보이지는 않지만, 정보를 기록하고 자바스크립트를 사용해 이 정보를 DOM으로부터 읽을 수 있는 주석 노드 comment node

DOM 탐색하기

DOM을 이용하면 요소와 요소의 컨텐츠에 무엇이든 할 수 있다. 그 이전에, DOM 객체에 접근하는 것이 선행되어야 한다.

DOM에 수행하는 모든 연산은 document 객체에서 시작한다. document 객체는 DOM에 접근하기 위한 진입점이다. 이를 통과하면 어떤 노드에도 접근할 수 있다.

자식 노드 탐색하기