티스토리 뷰

프론트엔드/JavaScript

[브라우저와 자바스크립트] 04.DOM 트리

yyoujg 2022. 11. 10. 02:19 
<DOCTYPE html>
  <head>
  <meta charset='UTF-8'>
  <title>JS with Codeit</title>
  </head>
  <body>
  <h1 id='title'>DOM(Document Object Model</h1>
  <h2 id='sub-title'>문서 객체 모델</h2>
  <script></script>
  </body>
</html>

가장 바깥에 HTML 태그 안에 body 태그와 head 태그 그리고 head 태그 안에는 meta 태그와 title 태그, body 태그 안에는 h1, h2 태그와 script 태그 이렇게 태그 안에 태그 형태의 계층 구조를 이루고 있습니다.

 

그리고 이 계층 간의 관계를 부모 태그와 자식 태그라는 용어로 표현하는데요.

 

지난 시간에 살펴본 DOM도 이 HTML 문서를 객체화 한 것이기 때문에 document 객체를 최상위로 해서 똑같이 계층 구조를 이루고 이것을 나무에 비유해서 DOM 트리라고 표현합니다.

그리고 이 DOM 트리에서는 각 객체를 노드라는 용어로 표현하는데요. 그래서 각 노드 간의 관계를 부모 노드와 자식 노드, 같은 위치의 노드끼리는 형제 노드라고 부릅니다. DOM 트리의 구조를 잘 파악하고 필요한 노드에 좀 더 자유롭게 접근하기 위해서는 이 부모, 자식, 형제라고 부르는 이 관계를 잘 이해하는 것이 중요합니다.

그리고 DOM 트리에 표현되는 노드에는 다양한 타입 다시 말해서 다양한 종류가 있는데요.

대표적으로 태그를 표현하는 노드를 요소 노드라고 부르고 문자열을 표현하는 노드를 텍스트 노드라고 부릅니다.

 

일반적으로 텍스트 노드들은 요소 노드의 자식 노드가 되고 따로 자식 노드를 가질 수 없기 때문에 나무의잎사귀에 비유해서 잎 노드 영어로는 leaf node라고 부르는데요. 사실 잎 노드라는 용어보다는 텍스트 노드는 요소 노드의 자식 노드가 되고 스스로는 자식 노드를 가질 수 없는 구조적인 특징을 잘 기억해두면 좋을 것 같습니다. 

 

아무튼 이 밖에도 HTML 문서에 작성된 코멘트를 표현하는 코멘트 노드, 문서 전체를 표현하는 문서 노드 등 총 12가지의 노드 타입이 있지만 현재는 사용되지 않는 타입도 있고 사실 대부분의 사실 대부분의 DOM 트리는 요소 노드와 텍스트 노드 이 두 노드로 대부분 구성되기 때문에 다른 것들보다 이 두 가지는 꼭 기억해두시면 좋을 것 같습니다.

 

'프론트엔드 > JavaScript' 카테고리의 다른 글

[브라우저와 자바스크립트] 08. 요소 노드 프로퍼티  (0) 2022.11.13
[브라우저와 자바스크립트] 06. DOM 트리 여행하기: 부록  (0) 2022.11.13
[브라우저와 자바스크립트] 03. console.dir?  (1) 2022.11.10
[브라우저와 자바스크립트] 02. DOM  (0) 2022.11.09
[브라우저와 자바스크립트] 01. 브라우저도 객체다?  (0) 2022.11.09
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
글 보관함