DOM의 개념에 관해 정리한 글입니다.
DOM이란?
Document Object Model의 약자.
스크립트 언어(JavaScript)로 HTML 요소를 제어할 수 있도록 웹문서를 객체화 한것.
HTML 문서에 접근하기 위한 인터페이스(API)
JavaScript의 탄생배경
- 웹 문서를 다루기 위해 탄생
- 어떻게 JavaScript는 웹 문서를 인식하는 걸까?
브라우저 안에는 웹 문서를 해석할수 있는 렌더링 엔진이 있다.
렌더링 엔진은 웹 문서를 해석하고 객체화 하여 JavaScript가 접근할 수 있도록 한다.
JavaScript는 HTML문서를 문자열로 인식한다.
HTML을 javaScript가 제어할 수 있도록 객체의 형태로 변경이 필요하다.(DOMParser)
문서의 객체화 Document Object Model(DOM)
DOM의 구조
Tree
HTML요소는 계층관계로 이루어져 있다.
1
2
3
4
5
6
<html>
<head></head>
<body>
<div></div>
</body>
</html>
이러한 구조를 DOM Tree라고 한다.
DOM 트리
node
DOM Tree의 각각의 요소. (document, html, body…)
각각의 node에 접근해서 HTML을 제어 가능.
document는 DOM Tree의 최상위 노드
추가 정보
- DOM은 HTML과 완전히 동일하지 않다.
- 텍스트, 공백도 노드에 포함
참고자료 (reference)
DOM 트리
(번역) DOM은 정확히 무엇일까?
DOM은 무엇인가? DOM Node와 Element의 차이
틀린점, 오타에 대한 것은 언제든지 알려주세요!