본문 바로가기
Web

DOM(Document Object Model)

by Vintz 2020. 10. 24.
반응형

DOM이란?

문서 객체  모델(DOM)은 HTML 문서의 요소(element)를 제어하기 위해 웹 브라우저에서 처음 지원되었고 HTML, XML 문서의 프로그래밍 인터페이스입니다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있게 함으로써 동적으로 문서 구조, 스타일,  내용 등을 변경할 수 있게 돕습니다. DOM은 웹 페이지의 객체지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다. 즉, 자바스크립트에서 Object 형태로 변환되어 접근, 제어를 할수 있게 만든 모델을 DOM이라 합니다.

브라우저마다 그들만의 방법으로 DOM을 구현하여서 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성하게 되었습니다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 저자가 작성한 문서들이 각기 다른 DOM이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 합니다.


HTML Node

개인 웹 페이지를 만들었다고 가정했을 때, 웹 브라우저는 HTML 파일을 읽게 되고 <body> 태그, <div> 태그 등 각각의 태그들을 분석해서 이것을 Node로 변환합니다.  Node는 EventTarget Object를 상속하기 때문에 모든 Node는 Event가 발생할 수 있다고 볼 수 있습니다.

모든 Node는 Event가 발생할 수 있다.

HTMLElement 클래스 상속도

각각의 HTML 태그가 DOM Element로 변환될 때 태그에 맞는 DOM 클래스로 변환되는 상속도는 다음과 같습니다.

HTMLElement 클래스 상속도

웹 페이지에 <div> 태그가 있다면 HTMLDivElement라는 클래스를 이용해 Object가 만들어집니다. 이 HTMLDivElement 클래스는 HTMLElement를 상속하고, HTMLElement는 Element를 상속하고..결국 Node, EventTarget을 상속합니다.

HTML DOM tree

DOM tree는 브라우저가 HTML 문서를 불러온 후 파싱하여 생성하는 모델을 의미합니다. 브라우저가 HTML 페이지를 이해하고, 변경, 업데이트가 가능한 Object 형식으로 변환된 구조입니다. Object의 트리로 구조화되어 있기 때문에 DOM tree라고 불립니다.

위 코드의 DOM tree

DOM tree의 진입점은 document 객체이며 최종점은 요소의 텍스트를 나타내는 객체입니다.
자바스크립트는 DOM tree를 통해 모든 노드에 접근할 수 있습니다.


참고

문서 객체 모델 - poiemaweb
노드 - TCP School
DOM - feel5ny
브라우저101 - 드림코딩 온라인 아카데미
Document - MDN
Manipulating documents - MDN
The HTML DOM API - MDN
DOM 소개 - MDN

 

반응형

'Web' 카테고리의 다른 글

CSSOM(CSS Object Model)  (0) 2020.10.30
HTTP란?  (0) 2020.10.28
Window 객체(DOM, BOM, JavaScript)  (0) 2020.10.27
Web APIs 이해하기  (2) 2020.10.23
크로스 브라우징(Cross Browsing)  (0) 2020.10.22