<자바스크립트 Javascript> DOM (1)

- DOM(Document Object Model)이란?
직역하면 문서 객체 모델을 뜻한다. 텍스트 파일로 이루어진 웹 문서를 브라우저에 렌더링 하려면 브라우저가 이해할 수 있는 구조로 메모리에 저장하는 일이 필요하다. 즉, DOM이란 이 때 텍스트를 객체로 만들고, 이들을 다시 트리 구조로 만든 것으로 이 DOM이 렌더링에 쓰인다.

DOM은 일반적으로 자바스크립트를 통해 동적 변경이 가능하다. 따라서 DOM은 자바스크립트 객체로 제공되는데, 이를 DOM API(Application Programming Interface)라 한다. 즉, DOM API는 웹 문서의 동적 변경을 위한 자바스크립트 프로퍼티와 메소드의 집합이다.


- DOM tree란?
브라우저가 HTML 문서를 로드하고 파싱하여 생성하는 모델이다. DOM tree는 모든 요소를 객체로 치환하여 트리로 구조화한 것이다. DOM tree에 접근하기 위해서는 진입점으로서 document 객체를 사용한다.


- DOM tree 노드 구성
DOM tree의 노드는 네 가지로 구성된다.
1) 문서 노드(Document Node) : 트리의 최상위에 존재. DOM tree에 접근하기 위한 시작점.
2) 요소 노드(Element Node) : HTML 요소를 표현. HTML 요소에는 중첩에 의한 부자 관계가 존재하며 요소 노드가 이를 표현하므로 요소 노드는 문서 구조를 나타낸다고 할 수 있음.
3) 어트리뷰트 노드(Attribute Node) : HTML 요소의 어트리뷰트를 표현. 해당 어트리뷰트가 지정된 요소의 일부로 표현됨.
4) 텍스트 노드(Text Node) : HTML 요소의 텍스트를 표현. 요소 노드의 자식임. 또한 DOM tree의 최종단.


- DOM의 조작
브라우저의 개발자 도구에서 Elements를 선택하고 properties를 선택하면 DOM tree 확인이 가능하다. 자바스크립트는 API를 통해 DOM을 통한 웹 페이지 조작에 필요한 수단을 제공한다.





참고 : poiemaweb 웹사이트