# DOM Tree

DOM 은 객체 트리로 구조화 되어 있기 때문에 DOM tree 라고 부른다.

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

1
2
3
4
5
6
7
8
9

# Node Type

Node.ELEMENT_NODE
- HTML 태그에서 만들어지며, DOM 트리를 구성하는 블록
- 텍스트 노드를 제외한 태그노드
Node.TEXT_NODE
- 문자열
- 자식노드를 가질 수 없는 Leaf Node
- NewLine ↵, Space ␣
Node.COMMENT_NODE
- 주석노드는 HTML 에 뭔가 있다면 반드시 DOM 트리에 추가되어야 한다는 규칙에 의해 DOM 에 추가된 것임.
Node.DOCUMENT_NODE
- DOM 의 진입점
- Document
Node.DOCUMENT_TYPE_NODE
- DOCTYPE
Node.DOCUMENT_FRAGMENT_NODE

2, 4, 5, 6 은 더이상 쓰이지 않은 숫자. 7 은 거의 안쓴다고 한다.

역사적인 이유로, <head> 이전의 space / newLine 은 무시됨.
HTML 명세서 -> 모든 컨텐츠는 body 안쪽에 있어야 함
- </body> 뒤에 무언가를 넣더라도 그 콘텐츠는 자동으로 body 안쪽으로 이동
- </body> 뒤엔 공백이 있을 수 없다.

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

1
2

DOM 생성과정에서 기형적인 HTML 을 자동 교정

TODO HTML 명세서와, 브라우저 렌더링 종류에 따라서 다른 동작이 나오지 않을까?

html 이 없는 경우, 문서 최상위에 이를 자동으로 넣어줌

<!--test.html-->
"안녕하세요."

1
2

혹은

<!--test.html-->
<html>
"안녕하세요."
</html>

1
2
3
4

은 브라우저에서 이와 같이 렌더링 된다.

<html>
<head></head>
<body>안녕하세요.</body>
</html>

1
2
3
4

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

1
2
3
4

DOM 명세서 -> 테이블에 반드시 <tbody> 가 있어야 한다.

<table id="table"><tr><td>1</td></tr></table>

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

1
2
3
4
5
6
7
8
9
10
11