From 300dc82cddd0ebb9a068262fe0f620f1712c3e0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Thu, 18 Jan 2024 17:59:53 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=EC=8A=A4=ED=84=B0=EB=94=94=2039.3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\352\263\240\354\204\270\354\242\205.md" | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git "a/docs/39_DOM/\352\263\240\354\204\270\354\242\205.md" "b/docs/39_DOM/\352\263\240\354\204\270\354\242\205.md" index 80637c86..cdc7915c 100644 --- "a/docs/39_DOM/\352\263\240\354\204\270\354\242\205.md" +++ "b/docs/39_DOM/\352\263\240\354\204\270\354\242\205.md" @@ -154,3 +154,49 @@ HTMLCollection 객체의 부작용을 해결하기 위해 `querySelectorAll` 메 NodeList는 non-live 객체이기 때문에 이런 부작용을 예방해 주지만 `childNode` 프로퍼티가 반환되는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요하다. **따라서 이렇게 예상과 다른 동작을 피하고 예방하기 위해선 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다.** + +--- + +## 노드탐색 + +요소 노드를 취득하면 해당 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드 등을 탐색 해야 할 때가 있다.
+이를 위해서 `Node, Element` 인터페이스는 트리 탐색 프로퍼티를 제공한다. + +`parentNode, previousSibling, firstChild, childNodes` 프로퍼티는 `Node.prototype`이 제공하고, `previesElementSibling, nextElementSibling, children`프로퍼티는 `Element.prototype`이 제공한다. + +### 공백 텍스트 노드 + +HTML 요소 사이의 스페이스, 탭, 줄바꿈 등의 공백 문자는 텍스트 노드를 생성한다.
+이를 공백 텍스트 노드라고 한다. + +``` + +``` + +위 예제에서 볼 수 있듯이 공백 텍스트 노드도 하나의 노드로서 DOM 트리에 포함되게 된다.
+따라서, 노드를 탐색할 때는 공백 문자가 생성한 공백 텍스트 노드에 주의해야 한다. + +### 자식 노드 탐색 + +자식 노드를 탐색하기 위해서는 다음과 같은 프로퍼티르 사용한다. + +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` 메서드를 사용해도 되지만, 이경우 텍스트 노드까지 포함하여 검사하기 때문에
`children.length` 또는 `Element` 인터페이스의 `childElementCount` 프로퍼티를 사용하자. + +부모 노드 탐색에는 `Node.prototype.parentNode`프로퍼티를 사용하며 부모 노드는 종단 노드인 리프 노드 이므로 텍스트 노드인 경우는 없다. + +### 형제 노드 탐색 + +형제 노드 탐색에는 `Node.prototype.previousSibling, Node.prototype.nextSibling, Element.prototype.previousElementSibling, Element.prototype.nextElementSibling` 프로퍼티가 사용되며, Node 프로토타입 프로퍼티는 텍스트 노드가 반환될 수 도 있다.