🌳 정의
DOM이란 Document Object Model의 약자로 문서 객체 모델을 의미합니다.
한 마디로 웹 페이지에 나타나는 html 문서 전체를 객체로 표현한 것이라고 할 수 있습니다.
DOM에서의 객체는 '노드(node)'라고 불리며
- html 태그 = 요소(element) 노드
- 태그를 제외한 문자 = 텍스트(text) 노드
- 주석 = 주석(element) 노드
로 구성됩니다.
따라서 DOM을 활용하면 자바스크립트로 html 태그를 객체처럼 다룰 수 있게 됩니다.
🌳 DOM 트리
html은 태그들이 계층을 이루고 있습니다.
그리고 이 계층 구조는 DOM에서도 반영되며 이를 DOM 트리라고 합니다.
DOM 트리는 노드로 구성되어 있으며 노드들은 서로 부모/형제/자식의 관계를 가집니다.
예를 들어, 아래와 같은 코드가 있다면
<!DOCTYPE HTML>
<html>
<head>
<title>DOM</title>
<meta name="Description" content="Hello, I'm Emma:)" />
</head>
<body>
<h1>DOM 트리</h1>
<img />
<p>Document Object Model</p>
</body>
</html>이 코드의 DOM 트리는 다음과 같습니다.
특정 태그와 주변 태그들 간의 관계를 body 태그로 살펴보겠습니다.
body 태그와 연결되어 있는
- html 태그는 부모 노드(parent),
- head 태그는 형제 노드(sibling),
- h1, img, p 태그는 자식 노드(child)
의 관계를 이루고 있습니다.
🌳 노드 이동 프로퍼티
1) 요소(element) 노드 이동 프로퍼티
| 프로퍼티 | 결과 |
| element.children | element의 자식 요소 전체를 HTMLCollection으로 반환 |
| element.firstElementChild | element의 첫 번째 자식 요소 하나 |
| element.lastElementChild | element의 마지막 자식 요소 하나 |
| element.parentElement | element의 부모 요소 하나 |
| element.previousElementSibling | element 이전에 위치한 = 트리 구조에서 element보다 왼쪽에 위치한 형제 요소 하나 |
| element.nextElementSibling | element 이후에 위치한 = 트리 구조에서 element보다 오른쪽에 위치한 형제 요소 하나 |
위의 프로퍼티들은 요소(element), 즉 태그 노드들에만 존재하는 프로퍼티들입니다.
따라서 요소 노드를 제외한 나머지 = 텍스트 노드에 접근하고 싶을 때는 다른 프로퍼티(모든 노드 이동 프로퍼티)를 사용해야 합니다.
2) 모든 노드 이동 프로퍼티
| 프로퍼티 | 결과 |
| node.childNodes | node의 자식 노드 전체를 NodeList로 반환 |
| node.firstChild | node의 첫 번째 자식 노드 하나 |
| node.lastChild | node의 마지막 자식 노드 하나 |
| node.parentNode | node의 부모 노드 하나 |
| node.previousSibling | node 이전에 위치한 = 트리 구조에서 node보다 왼쪽에 위치한 형제 요소 하나 |
| node.nextSibling | node 이후에 위치한 = 트리 구조에서 node보다 오른쪽에 위치한 형제 요소 하나 |
요소 노드 이동 프로퍼티와 비교해보면 프로퍼티 중간에 element라는 단어만 빠진 것을 알 수 있습니다.
위의 프로퍼티들은 요소 노드를 포함한 모든 노드에게 존재합니다.
하지만 모든 노드 이동 프로퍼티는 자주 사용되지 않습니다.
잘 생각해보면 우리가 노드를 선택하여 사용할 때는 일반적으로 요소 노드를 사용합니다.
그러나 DOM 트리는 요소 뿐만 아니라 텍스트와 주석까지 포함하여 구성된다고 하였습니다.
따라서 모든 노드를 이동하게 된다면 텍스트 노드에 포함되는 '요소 간의 줄바꿈 & 들여쓰기로 인한 띄어쓰기' 및
주석 노드에 포함되는 '주석'까지 모두 고려하여 이동해야 합니다.
노드 간 이동이 이런 식으로 이루어진다면 우리는 원하지 않는 노드를 선택하게 될 가능성이 높아집니다.
결론적으로 자바스크립트로 웹 문서를 다룰 때 원하는 대상이 요소 노드라면
모든 노드 이동보다는 요소 노드 이동 프로퍼티를 사용하는 것이 더 안전한 방향입니다.
읽어주셔서 감사합니다:)
