[JS/HTML] DOM이란? (DOM 트리)

 DOM (Document Object Model)  

HTML내 원하는 위치에 접근하기 위한 하나의 방식, W3C의 표준

문서 객체 모델(DOM)은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

 

돔트리:브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체(Object) 모델

 

노드 node 란?

tree구조에서 root노드(가장 위에서 시작되는 node)를 포함한 모든 개개의 객체

ex)head, body, title, script, h1 등의 태그 뿐만 아니라 태그 안의 텍스트나 속성도 해당

 

 

노드의 종류

 

노드간의 관계

노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다.

 

- 노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재함

- 루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(parent node)만을 가짐

- 모든 요소 노드는 자식 노드(child node)를 가질 수 있음

- 형제 노드(sibling node): 같은 부모 노드를 가지는 모든 노드

- 조상 노드(ancestor node): 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드

- 자손 노드(descendant node): 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드

 

 

HTML과 JavaScript를 연결해주는 DOM

 

▶ DOM은 HTML웹페이지와 스크립팅언어인  JavaScript를 서로 잇는 역할을 한다.

▶ JavaScript는 document라는 전역객체를 통해 HTML에 접근할 수 있다.

(자바스크립트의 document객체는 DOM구조를 접근하는 관문이며, document객체는 HTML문서를 뜻한다.)

 

 

 

 

 

 

 

 

 

reference: http://www.tcpschool.com/javascript/js_dom_node