DOM (Document Object Model) 개념에 대한 정리

DOM 이란?

문서 객체 모델 (Document Object Model)의 약자로, 객체 지향 모델로서 구조화된 문서를 표현하는 방식을 의미합니다.

---

DOM의 의의

DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스로 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 돕습니다.

 

JavaScript에서는 이 DOM을 다룰 수 있습니다.

---

HTML DOM

HTML 문서를 조작하고 접근하는 표준화된 방법으로, 모든 HTML의 요소들은 HTML DOM을 이용한 접근이 가능합니다. 

기본적으로 JavaScript는 HTML 문서의 어디에 무엇이 있는지 파악할 수 없기 때문에, HTML 문서를 parsing 하여 DOM 형태로 만들고 이 DOM을 이용해 HTML 문서의 군데군데에 접근할 수 있게 됩니다!!

---

Document 객체 (JavaScript의 전용 개념)

Document 객체는 웹 페이지 자체를 의미하며, 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시!! Document 객체에서부터 시작해야 합니다!!

---

Document method

HTML 요소와 관련된 작업을 돕는 다양한 메서드를 Document 객체에서 제공합니다. 

• HTML 요소의 선택
• HTML 요소의 생성
• HTML event handler 추가
• HTML 객체의 선택

---

HTML 요소의 선택

// 해당 아이디의 요소 선택
document.getElementById()
// 해당 클래스에 속한 요소를 모두 선택
document.getElementByClassName()
// 해당 name 속성값을 갖는 모든 요소
document.getElementByName()
// 해당 선택자(css의 그 선택자임)로 선택되는 모든 요소 선택
document.querySelectorAll()
// 해당 선택자로 선택되는 요소를 1개 선택
document.querySelector()

---

HTML 요소의 생성

// 지정된 HTML 요소를 생성
document.createElement()
// HTML 출력 스트림을 이용해 텍스트를 출력
document.write()

위의 메서드를 이용해 HTML의 요소들을 생성할 때, 당연하게 속성 값 또한 지정이 가능합니다. write method는 지금 작성된 HTML 문서의 바로 다음 부분부터 작성을 돕는 메서드입니다.

---

HTML 이벤트 핸들러 추가

// mouse click event에 대한 이벤트 핸들러를 추가
요소.onclick = function() {}

Event란?

Web browser가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다. 자바스크립트를 이용시 발생한 이벤트에 반응하여 특정 동작을 수행하도록 만들 수 있습니다.

 

위 예시는 요소에 대한 마우스 클릭 이벤트에 상응하는 event handler를 등록하는 과정을 의미합니다.

 

---

DOM의 트리 구조 (HTML 문서 ≫ DOM)

그림 출처: elice javascript 강좌

위 그림과 같이 DOM은 HTML 문서의 요소들에 대한 tree의 구조를 갖고 있습니다.

 

Tree 구조는 node(덩어리)와 node를 연결하는 선으로 구성되어 있고, 위의 Tree 구조를 이용해 각 요소들의 위치를 쉽게 파악할 수 있습니다. 

 

따라서 DOM은 HTML 문서를 쉽게 다룰 수 있도록 web browser가 생성해주는 web interface라고 정리할 수 있습니다.