DOM Tree : Document Object Model Tree

 

DOM Tree 란?

Document Object Model Tree 약자로, 웹 페이지의 구조를 트리 형태로 표현한 것이다.

웹 브라우저는 HTML 코드를 파싱하여 DOM Tree를 만들고 이를 통해 웹 페이지를 렌더링하고 사용자와 상호작용을 한다.

 

DOM Tree 구성요소

Node

DOM Tree 기본 단위

모든 DOM 요소의 기본이 되는 인테퍼이스로 요소, 텍스트 , 주석 등 웹 페이지의 모든 구성 요소 포함한다.

모든 요소는 Node 자손이며 , 노드는 자식 노드를 가질 수 있다.

 

Document

DOM Tree 의 최상위 노드

웸 페이지 자체를 대표한다. 문서 전체를 나타나며 DOM 트리의 진입 점 역할을 한다. 

 

Element

html 또는 xml 문서의 모든 요소를 대표한다.

예를 들어 <div> , <p> , <input> 태그가 이에 해당한다.

Element는 Node 를 상속 받으며 요소의 태그 이름, 자식 노드 , 속성등을 다룰 수 있는 메서드와 속성을 제공한다.

 

 

CharacterData

텍스트 데이터를 나타내는 노드

노드 인터페이스를 상속받는다. 

주로 텍스트 노드와 주석 노드가 이에 속한다.

이 인터페이스는 문자 데이터를 조작하는데 사용되는 메서드를 제공한다.

 

 

Attr

요소의 속성을 나타낸다.

예를 들어 <img src = "image.png"> 에서 src = "image.png" 부분이 Attr 노드에 해당한다.

속성의 이름과 값에 접근할 수 있다.

 

 

HTML Element 와 그 하위 요소

모든 html 요소의 기본이 되는 인터페이스로 element 인터페이스를 상속받아 html 요소에 공통적으로 적용되는 메서드와 속성 제공함

 

 

DOM Tree  특징

1. 트리구조 : DOM Tree 는 트리 구조를 가지고 있으며 , 각 노드는 0개 이상의 자식 노드를 가질 수 있다.

2. 부모 - 자식 관계 : 각 노드는 0개 또는 1개의 부모 노드를 가지며 자식 노드는 부모 노드에 종속된다.

3. 계층적 구조 : DOM Tree는 웹 페이지의 계층적 구조를 반영한다. 예를 들어 div 안에 p태그가 있다면 p 태그는 div 태그의 자식노드임

 

 

 

DOM Tree  활용

1. 웹 페이지 렌더링 : 브라우저는 DOM Tree를 사용하여 웹 페이지 렌더링한다. 각 element 노드는 렌더링 엔진에 의해 화면에 표시된다.

2. 자바스크립트 : DOM Tree를 조작하여 웹 페에지를 동적으로 변경할 수 있다 . 예를 들어 요소의 스타일 변경 등

3. 디버깅 : 웹 페이지 구조를 이해하고 디버깅하는데 도움이 된다. 브라우저 개발자 도구를 사용하여 DOM Tree를 시각적으로 확인가능

 

 

 

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

문서 객체 모델(DOM) - Web API | MDN