DOM

DOM이란?

DOM이란 Document Object Model의 약자로 HTML의 태그들을 조작할 수 있도록 도와주는 HTML와 JavaScript 사이의 인터페이스 역할을 한다.

DOM은 JS 기능의 일부가 아니라 JS로 조작할 대상을 지정할 수 있도록 API를 제공하는 것 뿐이기 때문에 JS가 아닌 다른 언어를 통해서도 사용이 가능하다.

 

예를 들어 파이썬에서도 다음과 같이 DOM을 조작할 수 있다.

# Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");

 

 

DOM의 구조

JS를 사용하면 HTML 요소를 선택하고 요소의 값과 속성을 가져와서 사용할 수도 있고, 값을 바꿀 수도 있다.

이것이 가능한 이유는 DOM이 트리 구조로 HTML 구성 요소를 보관하기 때문으로 텍스트로 이루어진 스크립트에서 각각의 요소와 요소의 속성, 값, 이벤트 등을 가져올 수 있는 것이다.

 

 

위 사진을 보면 최상위 노드인 document에 자식 요소들이 달리고 각각의 요소들은 속성과 text 노드를 가지는 것을 볼 수 있다.

속성, 값 외에도 이벤트를 추가할 때 HTML 요소에 추가하는 것을 볼 수 있는데, 그 이유 또한 DOM에서 이벤트를 관리하기 때문이다.

 

 

Ref.

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN

https://www.codestates.com/blog/content/dom-javascript

문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법 - 코드스테이츠 공식 블로

https://velog.io/@teo/dom

DOM은 다들 어떤식으로 공부하셨나요?