DOM 이란?
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
HTML DOM Tree
DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이기도 하다. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 한다.
트리 자료구조는 노드들의 계층 구조로 이루어져 있다. 계층 구조로 이루어져 있기 때문에 부모-자식 관계, 형제관계를 표현하는 비선형 자료구조를 나타낸다.
document node (문서 노드)
- DOM Tree에서 최상위 루트 노드를 나타내며, document 객체를 가리킨다. HTML 문서 전체를 나타내는 노드이기도 하다.
element node (요소 노드)
- 모든 HTML 요소 (body, h2, div 등)는 이 요소 노드이다. 속성 노드를 가질 수 있는 유일한 노드로서, 부모-자식 관계를 가지게 되기 때문에 계층적 구조를 이룰 수 있게 된다.
attribute node (속성 노드)
- 모든 HTML 요소의 속성은 이 속성 노드이다. 요소 노드에 대한 정보를 가지고 있다. 그렇기 때문에 부모 노드가 아닌 해당 노드와 연결(바인딩)이 되어 있다.
text node (텍스트 노드)
- HTML 문서의 모든 텍스트는 이 텍스트 노드이다. 텍스트 노드는 정보를 표현하며, 가장 마지막에 위치하는 자식 노드이기 때문에 잎사귀를 닮았다 해 리프 노드라고 불리기도 한다.
DOM 과 Javascript
자바스크립트는 DOM을 조작할 수 있는 프로그래밍 언어 중 하나이다. DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.
초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전해왔다. 페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다.
API (web or XML page) = DOM + JS (scripting language)
JavaScript 로 DOM에 접근하는 방법
자바스크립트로 DOM에 접근하는 방법은, DOM의 인터페이스를 통하여 접근할 수 있다. 기본적으로 브라우저 내부에 내장된 프로그래밍 언어(Javascript)가 DOM의 API 중 자주 쓰는 메소드와 프로퍼티를 이용해 동적으로 노드를 생성하거나 삭제, 혹은 변경한다.
- document.querySelector
- document.querySelectorAll
- document.getElementById
- document.getElementByTagName
- document.createElement
- node.append
- node.appendChild
- node.remove
- node.removeChild
- element.innerHTML
- node.textContent
- element.setAttribute
- element.getAttribute
- element.addEventListener
