[JavaScript] DOM트리

HTML을 지탱하는 것은 태그(tag)이다.

문서객체모델(DOM)에 따르면, 모든 HTML태그는 객체이다. 태그 하나가 감싸고 있는 '자식' 태그는 중첩 태그라고 부른다.

이런 모든 객체는 자바스크립트를 통해 접근할 수 있고, 페이지를 조작할 때 이 객체를 사용한다.

<!DOCTYPE HTML>
<html>
<head>
  <title>사슴에 관하여</title>
</head>
<body>
  사슴에 관한 진실.
</body>

트리에 있는 노드는 모두 객체이다.

태그는 요소 노드(element node)이고, 트리 구조를 구성한다.
<html>은 루트 노드가 되고, <head> 와 <body>는 루트 노드의 자식이 된다.

요소 내의 문자는 텍스트(text)노드가 된다. 텍스트 노드는 자식노드를 가질 수 없고, 트리의 끝에서 잎 노드(leaf node)가 된다.

기형적인 HTML을 만나면 브라우저는 DOM생성과정에서 HTML을 자동으로 교정한다.

(( 예를 들어 가장 최상위 태그는 항상 <html>이어야 하는데, 문서에 <html> 태그가 없는 경우, 문서 최상위에 이를 자동으로 넣어준다.

따라서 DOM에는 <html>에 대응하는 노드가 항상 있다.))

만약 HTML 파일에 "안녕하세요."라는 문장 하나만 저장된 상황이라면, 브라우저가 자동으로 이 문장을 <html> 과 <body>로 감싸준다. 그리고 <head>도 더해줘서 아래와 같은 DOM이 만들어지는 것이다.

((DOM 생성과정에서 브라우저는 문서에 있는 에러 등 닫는 태그가 없는 에러 등을 자동으로 처리한다.))

<p>안녕하세요
<li>엄마
<li>그리고
<li>아빠

이렇게 태그 짝이 안맞아도 브라우저는 태그를 읽고, 자동으로 빠진 부분을 채워넣어 준다. 따라서 최종 결과물은 정상적인 DOM이 된다.

요소와 텍스트 노드 외에도 다양한 노드 타입이 있다. 주석도 노드가 된다.

<!DOCTYPE HTML>
<html>
<body>
  사슴에 관한 진실.
  <ol>
    <li>사슴은 똑똑합니다.</li>
    <!-- comment -->
    <li>그리고 잔꾀를 잘 부리죠!</li>
  </ol>
</body>
</html>

#comment로 표현되는 주석 노드는 두 텍스트 노드 사이에 존재한다.

** 주석은 화면 출력물에 영향을 주지 않는데, 왜 DOM에 추가되냐??
--> 주석 노드는 HTML에 뭔가 있다면 반드시 DOM 트리에 추가되어야 한다는 규칙 때문에 DOM에 추가된 것이다.

HTML안의 모든 것은 DOM을 구성한다.

노드 타입은 총 12가지 인데, 실무에선 주로 다음 네 가지 노드를 다룬다.

1. DOM의 '진입점'이 되는 문서(document) 노드

2. HTML 태그에서 만들어지며, DOM 트리를 구성하는 블록인 요소 노드(element node)

3. 텍스트를 포함하는 텍스트 노드 (text node)

4. 화면에 보이지는 않지만, 정보를 기록하고 자바스크립트를 사용해 이 정보를 DOM으로부터 읽을 수 있는 주석(comment)

"Live DOM Viewer" 에 들아가면 실시간으로 DOM구조를 볼 수 있다. 사이트에 들아가 DOM 구조를 보고 싶은 HTML 문서를 입력하면 HTML이 바로 DOM으로 바뀌어 출력된다.

[JavaScript] 주요 노드 프로퍼티 (0)	2022.06.19
[JavaScript] getElement, querySelector (0)	2022.06.19
[JavaScript] 브라우저 환경과 다양한 명세서 (DOM과 BOM) (0)	2022.06.18
[JavaScript] async 이터레이터와 제너레이터 (0)	2022.05.31
[JavaScript] 제너레이터 (0)	2022.05.31

Beautiful Tomorrow