DOM의 개념
문서 객체 모델(DOM)이란?
문서객체모델이라고 하며 HTML 혹은 XML문서의 구조화된 표현을 제공하는 표준입니다. HTML에서는 자바스크립트가 DOM 구조에 접근할 수 있는 방법이 제공되며 이를 통해 문서 구조, 스타일, 내용등을 변경 할 수 있습니다.
자바스크립트는 DOM을 이용하여 HTML의 태그, 속성, 스타일 등을 추가/삭제 하거나 변경할 수 있습니다.
Document Node
document 객체를 말하며 DOM 트리에 접근하기 위한 최상위 노드로 모든 DOM 트리에 접근하기 위한 시작점이 됩니다.
Element Node
HTML 구성 요소 즉 대표적으로 대그를 의미합니다. 문서내 태그들은 모두 Element Node 들 입니다. 각각의 Element Node 는 다시 Attribute와 Text Node를 가집니다.
Attribute Node
태그들의 속성을 객체화한 노드를 말합니다. 만일 특정 태그의 속성에 접근하려면 Attribute Node를 사용해야 합니다.
Text Node
태그의 텍스트를 객체화한 노드입니다. 자식 노드를 가질 수 없으며 DOM 트리구조의 최종단 노드가 됩니다.
<?xml version="1.0" encoding="UTF-8"?>
<programming_languages>
<language>
<name>HTML</name>
<category>web</category>
<developer>W3C</developer>
<version status="working draft">5.1</version>
<priority rating="1">high</priority>
</language>
</programming_languages>
DOM은 다음 그림과 같이 계층 구조로 표현됩니다.
W3C DOM 표준은 다음과 같이 세 가지 모델로 구분됩니다.
1. Core DOM : 모든 문서 타입을 위한 DOM 모델
2. HTML DOM : HTML 문서를 위한 DOM 모델
3. XML DOM : XML 문서를 위한 DOM 모델
HTML DOM
HTML DOM은 HTML 문서에 접근하여 조작할 수 있는 표준화된 방법을 정의합니다.
모든 HTML 요소는 HTML DOM을 통해 접근할 수 있습니다.
XML DOM
XML DOM은 XML 문서에 접근하여, 해당 문서를 조작할 수 있는 표준화된 방법을 정의합니다.
모든 XML 요소는 XML DOM을 통해 접근할 수 있습니다.
XML DOM은 XML 문서 내의 모든 요소의 객체, 속성 그리고 메소드를 정의합니다.
이러한 XML DOM은 플랫폼이나 프로그래밍 언어에 상관없이 언제나 사용할 수 있습니다.
Reference
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://dinfree.com/lecture/frontend/123_js_3.html
https://kingofbackend.tistory.com/25