DOM과 DOM API

[DOM 이란?]

자바스크립트는 DOM을 통해 웹 페이지의 요소에 접근할 수 있다. DOM이란 Document Object Model의 약자로,

문서 객체 모델이다. DOM은 HTML로 작성된 여러 요소들에 자바스크립트가 접근하고 조작할 수 있도록 브라우저가 변환시킨 객체이다.

쉽게 말하면 HTML로 작성된 요소들을 자바스크립트가 이해할 수 있도록 객체로 변환한 것

 

DOM 트리 예시

네모 박스:  HTML로 작성된 태그

태그 요소 하나 하나를 노드(Node)라고 부름. 이 노드는 전부 하나의 객체로 이루어져 있음.

이러한 DOM 트리를 통해 웹 요소를 웹 페이지에 나타낼 수 있고, 자바스크립트는 이 객체들을 사용해 웹 페이지를 조작할 수 있다.

 

노랑색으로 표시된 노드는 document 즉, 문서 노드

파랑색으로 표시된 노드들은 요소 노드(Element node)

분홍색으로 표시된 노드들은 텍스트 노드(Text Node).

그리고 class, id, src와 같이 보라색으로 표시된 속성들은, 각각의 요소 노드에 연결된 속성 노드 (Attribute Node)로 나타낸다.

 

DOM 트리가 왜 중요한가? -> DOM은 자바스크립트가 자신에게 접근해서 조작할 수 있는 방법을 제공, DOM이 제공하는 방법을 활용해 웹 요소를 조작하기 위해서는 DOM 트리의 구조에 대해 잘 알고 있어야 한다.