[JavaScript] 자바스크립트 DOM 트리
반응형
🎯 DOM 트리
- HTML을 지탱하는 것은 태그(tag)이다.
📝 DOM 예제
<!DOCTYPE HTML>
<html>
<head>
<title>사슴에 관하여</title>
</head>
<body>
사슴에 관한 진실.
</body>
</html>
- 트리에 있는 노드는 모두 객체이다.
- 태그는 요소 노드(element node) (혹은 그냥 요소)이고, 트리 구조를 구성합니다.
<html>은 루트 노드가 되고,<head>와<body>는 루트 노드의 자식이 된다. - 새 줄과 공백은 글자나 숫자처럼 항상 유효한 문자로 취급된다.
- 따라서 이 두 특수문자는 텍스트 노드가 되고, DOM의 일부가 된다. 위 HTML 문서를 보면
<head>와<title>사이에 새 줄과 약간의 공백이 있는 것을 볼 수 있는데, 이런 특수문자 역시#text노드가 된다.- 새 줄(newline):
↵(자바스크립트에선\n로 표시) - 공백(space):
␣
- 새 줄(newline):
- 주석도 노드가 된다.
🏷 요약
- HTML/XML 문서는 브라우저 안에서 DOM 트리로 표현된다.
- 태그는 요소 노드가 되고 트리 구조를 형성한다.
- 문자는 텍스트 노드가 된다.
- 이 외에 HTML 내의 모든 것은 DOM을 구성합니다.
📌 참고
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [ JavaScript] 자바스크립트 주요 노드 프로퍼티 (0) | 2021.11.09 |
|---|---|
| [JavaScript] 자바스크립트 DOM 탐색하기 (0) | 2021.11.09 |
| [JavaScript] 자바스크립트 문자열 거꾸로 출력하기 (0) | 2021.11.06 |
| [JavaScript] 자바스크립트 소수 판별하기(feat. 반복문, 에라토스네테스의 체) (0) | 2021.11.06 |
| [JavaScript] 자바스크립트 배열 합 구하는 방법 (0) | 2021.11.05 |