docs : Day 13

- 39장 DOM - 39.3
Next-by-Next · Jan 18, 2024 · 8914a8b · 8914a8b
1 parent 7f8bcc0
commit 8914a8b
Showing 1 changed file with 109 additions and 1 deletion.
diff --git a/docs/39_DOM/이나린.md b/docs/39_DOM/이나린.md
@@ -1,7 +1,8 @@
 # 🎯 39 DOM
 
 [39.1 노드](#1-노드)  
-[39.2 요소 노드 취득](#2-요소-노드-취득)
+[39.2 요소 노드 취득](#2-요소-노드-취득)  
+[39.3 노드 탐색](#3-노드-탐색)
 
 ## 0. DOM
 
@@ -289,3 +290,110 @@ HTMLCollection 객체의 부작용을 해결하기 위해 querySelectorAll 메
 **주의**
 
 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다.
+
+## 3. 노드 탐색
+
+요소 노드를 취득한 후, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드 등을 탐색해야 할 때가 있다.
+
+DOM 트리 상의 노드를 탐색할 수 있도록 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다.
+
+![](https://velog.velcdn.com/images/slowsung/post/7dca9a9e-93c8-4b5d-b843-8e61fc7fd2cc/image.png)
+
+parentNode, previousSibling, firstChild, childNodes 프로퍼티는 Node.prototype이 제공하고, 프로퍼티 키에 Element가 포함된 previousElementSibling, nextElementSibling과 children 프로퍼티는 Element.prototype이 제공한다.
+
+노드 탐색 프로퍼티는 모두 접근자 프로퍼티다. 단, setter 없이 getter만 존재하여 참조만 가능한 읽기 전용 접근자 프로퍼티다. 읽기 전용 접근자 프로퍼티에 값을 할당하면 아무런 에러 없이 무시된다.
+
+### 3.1 공백 텍스트 노드
+
+공백 텍스트 노드란, HTML 요소 사이의 스페이스, 탭, 줄바꿈(개행) 등의 공백 문자가 생성하는 텍스트 노드이다.
+
+텍스트 에디터에서 HTML 문서에 스페이스 키, 탭 키, 엔터 키 등을 입력하면 공백 문자가 추가된다. 문서의 공백 문자는 공백 텍스트 노드를 생성한다. 따라서 노드를 탐색할 때는 공백 문자가 생성한 공백 텍스트 노드에 주의해야 한다. 인위적으로 HTML 문서의 공백 문자를 제거하면 공백 텍스트 노드를 생성하지 않지만, 가독성이 좋지 않으므로 권장하지 않는다.
+
+```
+<ul id="fruits"><li
+class="apple">Apple</li><li
+class="banana">Banana</li><li
+class="Orange">Orange</li></ul>
+```
+
+### 3.2 자식 노드 탐색
+
+자식 노드를 탐색하기 위해서는 다음과 같은 노드 탐색 프로퍼티를 사용한다.
+
+- Node.prototype.childNodes  
+  자식 노드를 모두 탐색하여 DOM 컬렉션 객체인 NodeList에 담아 반환한다. childNodes 프로퍼티가 반환한 NodeList에는 요소 노드뿐만 아니라 텍스트 노드도 포함되어 있을 수 있다.
+
+- Element.prototype.children  
+  자식 노드 중에서 요소 노드만 모두 탐색하여 DOM 컬렉션 객체인 HTMLCollection에 담아 반환한다. children 프로퍼티가 반환한 HTMLCollection에는 텍스트 노드가 포함되지 않는다.
+
+- Node.prototype.firstChild  
+  첫 번째 자식 노드를 반환한다. (텍스트 노드 또는 요소 노드)
+
+- Node.prototype.lastChild  
+  마지막 자식 노드를 반환한다. (텍스트 노드 또는 요소 노드)
+
+- Element.prototype.firstElementChild  
+  첫 번째 자식 요소 노드를 반환한다. (요소 노드만 반환)
+
+- Element.prototype.lastElementChild  
+  마지막 자식 요소 노드를 반환한다. (요소 노드만 반환)
+
+### 3.3 자식 노드 존재 확인
+
+Node.prototype.hasChildNodes 메서드를 사용한다. hasChildNodes 메서드는 자식 노드가 존재하면 true, 자식 노드가 존재하지 않으면 false를 반환한다. 단, hasChildNodes 메서드는 childNodes 프로퍼티와 마찬가지로 텍스트 노드를 포함해 자식 노드의 존재를 확인한다.
+
+자식 노드 중에 텍스트 노드가 아닌 요소 노드가 존재하는지 확인하려면 children.length 또는 Element 인터페이스의 childElementCount 프로퍼티를 사용한다.
+
+### 3.4 요소 노드의 텍스트 노드 탐색
+
+요소 노드의 텍스트 노드는 firstChild 프로퍼티로 접근한다.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="foo">Hello</div>
+    <script>
+      console.log(document.getElementById('foo').firstChild);
+    </script>
+  </body>
+</html>
+```
+
+### 3.5 부모 노드 탐색
+
+부모 노드를 탐색하려면 Node.prototype.parentNode 프로퍼티를 사용한다. 텍스트 노드는 DOM 트리의 최종단 노드인 리프 노드이므로 텍스트 노드인 경우는 없다.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <ul id="fruits">
+      <li class="apple">Apple</li>
+      <li class="banana">Banana</li>
+      <li class="orange">Orange</li>
+    </ul>
+  </body>
+  <script>
+    const $banana = document.querySelector('.banana');
+
+    console.log($banana.parentNode); // ul#fruits
+  </script>
+</html>
+```
+
+### 3.6 형제 노드 탐색
+
+형제 노드를 탐색하려면 다음과 같은 노드 탐색 프로퍼티를 사용한다.  
+아래 프로퍼티는 텍스트 노드 또는 요소 노드만 반환한다.
+
+- Node.prototype.previousSibling  
+  부모 노드가 같은 형제 노드 중에서 자신의 이전 형제 노드를 탐색하여 반환한다. (요소노드 또는 텍스트 노드)
+
+- Node.prototype.nextSibling  
+  부모 노드가 같은 형제 노드 중에서 자신의 다음 형제 노드를 탐색하여 반환한다. (요소노드 또는 텍스트 노드)
+
+- Element.prototype.previousElementSibling  
+  부모 노드가 같은 형제 요소 노드 중에서 자신의 이전 형제 요소 노드를 탐색하여 반환한다. (요소 노드만 반환)
+- Element.prototype.nextElementSibling  
+  부모 노드가 같은 형제 요소 노드 중에서 자신의 다음 형제 요소 노드를 탐색하여 반환한다. (요소 노드만 반환)