HTML DOM이란?

먼저 DOM은 Document Object Model의 약자로 Document는 문서이고 Object는 객체를 의미합니다. 그리고 Model은 그냥 모델로 많이 쓰입니다. 자바스크립트에서 웹 페이지를 제어하기 위해서는 DOM이 필수입니다. DOM은 자바스크립트가 웹 페이지를 제어할 수 있도록 제공하는 프로그래밍 인터페이스를 의미합니다. 그리고 DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있습니다. HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 합니다.

HTML 문서의 정보는 노드 트리라고 불리는 계층적 구조에 저장됩니다. 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여줍니다. 노드 트리의 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노트까지 뻗어 내려갑니다. 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노트에 접근할 수 있습니다.

노드는 tree 구조에서 root 노드를 포함한 모든 각각 객체를 node라고 표현합니다. head, body, title, script, h1 등의 태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 노드에 속합니다. 이 중 HTML 태그를 요소 노드라고 부르고 요소 노드 안에 있는 글자를 텍스트 노드라고 부르기도 합니다.

1. Dcument 객체란?

Document 객체는 웹 페이지 그 자체를 의미합니다.

웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 합니다.
Document 메소드 Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공합니다.

• HTML 요소의 선택
• HTML 요소의 생성
• HTML 이벤트 핸들러 추가
• HTML 객체의 선택

2. 노드의 종류

W3C HTML DOM 표준에 다르면, HTML 문서의 모든 것은 노드입니다. HTML 문서를 구성하는 대표적인 노드의 종류는 다음과 같습니다.

1. 문서 노드: HTML 문서 전체를 나타내는 노드입니다.

2. 요소 노드: 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드입니다.

3. 속성 노드: 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있습니다. 해당 요소 노드의 자식 노드에는 포함되지 않습니다.

4. 텍스트 노드: HTML 문서의 모든 텍스트는 텍스트 노드입니다.

5. 주석 노드: HTML 문서의 모든 주석은 주석 노드입니다.

참조 사이트: https://wit.nts-corp.com/2019/02/14/5522, http://www.tcpschool.com/javascript/js_dom_document