DOM이란?
Document Object Model의 약자로 HTML 및 XML 문서를위한 프로그래밍 인터페이스이다. 즉, HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model을 의미한다.
DOM을 활용하여 HTML을 조작할 수 있다.
HTML을 구조적으로 접근하는 DOM은 HTML을 단순한 문서 이상인 웹 앱으로 만들어주는 열쇠 역할을 한다.
브라우저 환경에서 DOM은 자바스크립트를 이용해 조작할 수 있으며, 기존 엘리먼트에 대한 접근 혹은 새로운 엘리먼트 생성 및 삭제를 가능하게 한다.
자바스크립트는 이 구조를 잘 활용하여 HTML로 구성된 웹 페이지를 작동하게 만들 수 있다.
DOM의 구조
DOM은 트리 구조를 갖는다. document 객체를 통해 HTML(root document)에 접근할 수 있다.
참고하기!
BOM(Browser Object Model)이 window 객체를 통해 브라우져에 접근한다. window 객체가 document 객체 보다 상위 개념에 속한다.
DOM에 대해 더 자세히 알고 싶다면 MDN을 참조하자.
노드(Node)와 요소(Element)
모든 DOM 노드는 공통 조상으로부터 만들어지기 때문에 공통 프로퍼티와 메서드가 있다.
계층 구조의 꼭대기엔 EventTarget이 있고 Node는 EventTarget을, 다른 DOM 노드들은 Node를 상속받는 계층 구조이다.
- Node
Node는 Element의 상위 개념 DOM 관련 객체는 대부분 Node에서 파생되었다 볼 수 있다. Node의 기능을 적용(implements)한 객체는 여러 타입이 있는데, 그 중 가장 많이 사용되는 타입이 요소(Element)이다.
문서 내에있는 모든 객체는 일종의 노드이고, 요소 노드도 있지만 텍스트 노드, 속성 노드도 있다.
- Element
DOM 요소를 위한 베이스 클래스이다. Element 노드를 통해 요소를 탐색하거나 검색할 수 있는 기능들을 제공한다.
