[JavaScript] DOM

🥕 DOM

DOM은 Document Object Model의 약자 => 문서 객체 모델?

문서 객체란이나같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 한다.+
Model을 붙였는데 Model이라는 영어 단어에는 모형, 주형이라는 의미도 있고 모듈이라는 의미도 있다. 비슷하게 여기서는 문서 객체를 '인식하는 방식'이라고 해석할 수 있다.

 

🥕 DOM tree

 

tree의 자료구조는 이름에서 알 수 있는 것처럼 하나의 root node에서 시작된다 그런데 나무는 땅에서 솟아서 점점 위로 뻗어나가지만 tree형 자료구조는 흔히 위의 root node에서 아래로 퍼져나가는 형태로 그린다.

tree에서는 위쪽의 node를 부모(parent) 노드 아랫쪽 노드를 자식(child)라고 한다. root node는 가장 위에서 시작되는 node이니까 parent가 없는 node가 된다. 그리고 children(자식)이 없는 node를 leaf node라고 한다. 뿌리(root)에서 시작해서 잎(leaf)에서 끝나는 형태이다.

🥕 JavaScript로 문서객체를 생성한다는 것

 

문서 객체가 생성되는 방식은 두 가지이다.

1. 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것. 이런 과정을 정적으로 문서 객체를 생성한다고 말한다. 단순히 적혀져 있는 그대로 문서객체가 생성되는 것을 표현한 것이다.
2. 반대로 원래 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성할 수 있다. 이런 과정을 동적으로 문서객체를 생성한다고 한다. 따라서 JavaScript로 문서객체를 생성한다는 것은 처음에는 HTML 페이지에 없던 문서객체를 동적으로 생성하는 것이 된다.