DOM

DOM, Docuemnts Object Model은 문서 객체 모델을 뜻한다. 이는 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현된다.

DOM

자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다.

• 자바스크립트는 새로운 HTML 요소나 속성을 추가

• 자바스크립트는 존재하는 HTML 요소나 속성을 제거

• 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경

• 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경

• 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경

• 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가

• 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응

DOM 요소의 선택

HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 한다.

자바스크립트에서 특정 HTML 요소를 선택하는 방법은 다음과 같다.

1. HTML 태그 이름(tag name)을 이용한 선택

2. 아이디(id)를 이용한 선택

3. 클래스(class)를 이용한 선택

4. name 속성(attribute)을 이용한 선택

5. CSS 선택자(selector)를 이용한 선택

6. HTML 객체 집합(object collection)을 이용한 선택

노드(node)

HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다. HTML 문서의 모든 것은 노드이다.

HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 한다.

img_js_htmldom

HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다. 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여준다.

노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.

자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.