chapter.04 DOM

 

1. DOM (Document Object Model)

 

Document Object Model(이하 DOM)즉, DOM은 html 문서를 프로그래밍 언어에서 다룰 수 있게 객체로 표현한 것이다.

JavaScript는 프로그래밍 언어인데, DOM은 마크업 언어인 html을 객체(Object)로 변환한 구조다.

 

html의 각 요소(태그, 속성)등이 객체로 변환된다. 

html 은 부모 - 자식 관계로 트리 형태로 구성되어있다. > 그래서 자바스크립트가 문서 내의 특정 요소를 쉽게 찾고 조작할 수 있다.

 

또한 DOM을 이용해서 html을 추가하거나 삭제하고, 스타일을 변경하거나 이벤트를 처리할 수 있다.

 

 

---

 

 

2. HTML과 DOM에서의 요소 명칭  

 

html이 DOM으로 표현될 때, 각 요소를 가리키는 명칭이 변하기도 한다. 

명칭들은 DOM의 계층 구조와 유형에 따라 달라진다.

 

HTML 요소	DOM에서의 명칭	Node Type	설명
문서 전체	document	-	DOM 트리의 최상위 객체
태그	Element	1	HTML 태그를 나타냄
텍스트	Text	3	태그 안의 텍스트 내용
속성	Attr	-	태그의 속성 (예: id, class)
주석	Comment	8	HTML 주석
기타 모든 노드	Node	다양	DOM의 모든 구성 요소를 총칭

 

어쨌든 html의 모든 요소는 노드로 변경되는데, 그 노드의 종류가 다양하다.

 

1 ) Document

• HTML 전체를 객체화한 최상위 루트 객체.
• DOM 트리에서 가장 위에 있으며, HTML 문서 전체를 나타냄
• 자바스크립트에서는 document로 접근 가능

루트 객체란?

프로그래밍에서 모든 객체가 시작되는 가장 최상위 객체.

전역(global)에서 접근할 수 있는 객체로, 정의하지 않아도 기본적으로 제공되는 객체이다.

모든 다른 객체들은 룰트 객체의 속성이나 하위 객체로 존재한다.

자바스크립트에서 루트 객체는 환경(브라우저, Node.js 등)에 따라 조금씩 다르게 불리기도 한다.

자세한 내용은 따로 포스팅 하도록 하겠다.

 

2 ) Element

• HTML의 각 태그에 해당하는 DOM 객체
• <div>, <p>, <h1> 등
• 모든 HTML태그는 DOM에서 Element 노드로 변환된다

 

3 ) Node

• DOM 트리의 모든 구성 요소를 총칭하는 용어
• Element, 텍스트, 주석, 속성 등 모든 것이 Node의 일종
• Node는 다양한 유형이 있고, nodetype 속성으로 구분 가능

 

4 ) text 

• HTML 태그 안에 들어 있는 텍스트를 나타내는 노드
• <p>안녕하세요</p>에서 안녕하세요가 Text 노드로 변환됨
• Text 노드도 Node의 하위 유형

 

5 ) Atrribute

• HTML 태그에 정의된 속성(예: id, class)을 나타내는 객체
• 속성도 Node의 한 유형이지만, 최신 DOM에서는 Attr 객체로 별도로 관리됨
• 속성은 getAttribute나 setAttribute 메서드로 접근 가능.

 

 

6 ) Comment

• HTML에 있는 주석( <!-- 주석--> ) 을 나타내는 노드.
• 주석도 Node의 일종이며, nodeType이 8임