Dom

DOM 이란?

DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미함.

Tree 구조의 Dom

DOM을 제대로 이해하기 위해서는 tree라는 자료구조를 이해할 필요가 있습니다. DOM이 tree 형식의 자료구조를 가지고 있기 때문입니다.

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

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

Node란?

👉 tree 구조에서 root 노드를 포함한 모든 개개의 개체를 node라고 표현합니다.

head, body, title, script, h1 등의 태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 속합니다.

이중 HTML 태그를 요소노드(Element Node)라고 부르고 요소 노드 안에 있는 글자를 Text 노드(Text Node)라고 부르기도 합니다.

JavaScript로 문서객체를 생성 의미

문서 객체가 생성되는 방식은 두 가지로 나누어 볼 수 있습니다. 우선 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것입니다. 이런 과정을 정적으로 문서 객체를 생성한다고 말합니다. 단순히 적혀져 있는 그대로 문서객체가 생성되는 것을 표현한 것입니다.

반대로 원래 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성할 수 있습니다. 이런 과정을 동적으로 문서객체를 생성한다고 합니다. 따라서 JavaScript로 문서객체를 생성한다는 것은 처음에는 HTML 페이지에 없던 문서객체를 동적으로 생성하는 것이 됩니다.

출처: AIdev 네이버 블로그