Merge pull request #1236 from SebellKo/sebellko

�39-4장 DOM - 고세종

docs/39_DOM/고세종.md

@@ -154,3 +154,49 @@ HTMLCollection 객체의 부작용을 해결하기 위해 `querySelectorAll` 메
 NodeList는 non-live 객체이기 때문에 이런 부작용을 예방해 주지만 `childNode` 프로퍼티가 반환되는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요하다.
 
 **따라서 이렇게 예상과 다른 동작을 피하고 예방하기 위해선 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다.**
+
+---
+
+## 노드탐색
+
+요소 노드를 취득하면 해당 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드 등을 탐색 해야 할 때가 있다.<br>
+이를 위해서 `Node, Element` 인터페이스는 트리 탐색 프로퍼티를 제공한다.
+
+`parentNode, previousSibling, firstChild, childNodes` 프로퍼티는 `Node.prototype`이 제공하고, `previesElementSibling, nextElementSibling, children`프로퍼티는 `Element.prototype`이 제공한다.
+
+### 공백 텍스트 노드
+
+HTML 요소 사이의 스페이스, 탭, 줄바꿈 등의 공백 문자는 텍스트 노드를 생성한다.<br>
+이를 공백 텍스트 노드라고 한다.
+
+```
+<ul><공백텍스트노드>
+  <li></li><공백텍스트노드>
+  <li></li><공백텍스트노드>
+  <li></li><공백텍스트노드>
+</ul>
+```
+
+위 예제에서 볼 수 있듯이 공백 텍스트 노드도 하나의 노드로서 DOM 트리에 포함되게 된다.<br>
+따라서, 노드를 탐색할 때는 공백 문자가 생성한 공백 텍스트 노드에 주의해야 한다.
+
+### 자식 노드 탐색
+
+자식 노드를 탐색하기 위해서는 다음과 같은 프로퍼티르 사용한다.
+
+1. `Node.prototype.childNodes` : `NodeList`를 반환하며, 텍스트 노드도 포함되어 있을 수 있다.
+2. `Element.prototype.children` : `HTMLCollection`을 반환하며, 텍스트 노드가 포함되지 않는다.
+3. `Node.prototype.firstChilde` : 텍스트 노드이거나 요소 노드이다.
+4. `Node.prototype.lastChild` : 마지막 노드를 반환하며 텍스트 노드이거나 요소 노드이다.
+5. `Element.prototype.firstElementChild` : 요소 노드만 반환한다.
+6. `Element.prototype.lastElementChilde` : 마지막 자식 요소 노드를 반환하며 요소 노드만 반환한다.
+
+### 자식 노드 존재 확인
+
+자식 노드의 존재 확인으로 `Node.prototype.hasChildNodes` 메서드를 사용해도 되지만, 이경우 텍스트 노드까지 포함하여 검사하기 때문에<br> `children.length` 또는 `Element` 인터페이스의 `childElementCount` 프로퍼티를 사용하자.
+
+부모 노드 탐색에는 `Node.prototype.parentNode`프로퍼티를 사용하며 부모 노드는 종단 노드인 리프 노드 이므로 텍스트 노드인 경우는 없다.
+
+### 형제 노드 탐색
+
+형제 노드 탐색에는 `Node.prototype.previousSibling, Node.prototype.nextSibling, Element.prototype.previousElementSibling, Element.prototype.nextElementSibling` 프로퍼티가 사용되며, Node 프로토타입 프로퍼티는 텍스트 노드가 반환될 수 도 있다.