docs: DOM (39.6.3 ~ 39.6.9)

Next-by-Next · Jan 22, 2024 · 366555a · 366555a
1 parent 4f389a4
commit 366555a
Showing 1 changed file with 237 additions and 0 deletions.
diff --git a/docs/39_DOM/문소희.md b/docs/39_DOM/문소희.md
@@ -647,6 +647,243 @@ DOMPurify.sanitize('<img src="x" onerror="alert(document.cookie)">');
 </html>
 ```
 
+### 💬 3. 노드 생성과 추가
+
+#### ✨ 요소 노드 생성
+
+> `Document.prototype.createElement(tagName)` 메서드는 요소 노드를 생성해 반환한다. 이떄 생성된 요소 노드는 아무런 자식 노드를 가지고 있지 않기 때문에 요소 노드의 자식 노드인 텍스트 노드도 없는 상태다.
+
+```javascript
+const $li = document.createElement('li');
+console.log($li.childNodes); // NodeList []
+```
+
+![](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhbrH6%2FbtrAYtFCU9e%2FCmbKmC81nM6ojw8s3IhXVK%2Fimg.png)
+
+#### ✨ 텍스트 노드 생성
+
+> `Document.prototype.createTextNode(text)` 메서드는 텍스트 노드를 생성해 반환한다. 텍스트 노드를 생성할 뿐 요소 노드에 추가하지는 않기 때문에 이후에 요소 노드에 텍스트 노드를 추가하는 별도 처리가 필요하다.
+
+```javascript
+const textNode = document.createTextNode('Banana');
+```
+
+![](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcgtlKq%2FbtrAVsOGiDz%2FTom3PpiPkPksdt2rUTzwa1%2Fimg.png)
+
+#### ✨ 텍스트 노드를 요소 노드의 자식 노드로 추가
+
+> `Node.prototype.appendChild(childNode)` 메서드는 매개변수 `childNode`에게 인수로 전달한 노드를 `appendChild` 메서드를 호출한 노드의 마지막 자식 노드로 추가한다. 이때 기존 DOM에는 추가되지 않는다.
+
+요소 노드에 자식 노드가 하나도 없는 경우에는 `textContext` 프로퍼티를 사용하는 것이 더 간편하다. 단, 요소 노드에 자식 노드가 있는 경우 요소 노드의 `textContent` 프로퍼티에 문자열을 할당하면 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열이 텍스트로 추가되므로 주의해야 한다. 🚨
+
+```javascript
+$li.appendChild(document.createTextNode('Banana'));
+
+// 위 코드와 동일하게 동작
+$li.textContent = 'Banana';
+```
+
+![](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fee7Vxs%2FbtrASCch6fG%2FpwOuWO0289sDzigfOtxVaK%2Fimg.png)
+
+#### ✨ 요소 노드를 DOM에 추가
+
+> `Node.prototype.appendChild` 메서드를 사용해 텍스트 노드와 부자 관계로 연결한 요소 노드를 #fruits 요소 노드의 마지막 자식 요소로 추가한다. 이 과정에서 새롭게 생성한 요소 노드가 DOM에 추가된다.
+
+기존의 DOM에 요소 노드를 추가하는 처리는 이 과정뿐이며 위 예제는 단 하나의 요소 노드를 생성해 DOM에 한 번 추가하므로 DOM은 한 번 변경된다. 이때 리플로우와 리페인트가 실행된다.
+
+```javascript
+$fruits.appendChild($li);
+```
+
+![](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbUsuIa%2FbtrARFHlsRe%2FrxAS601yGvQqk9pVZkotxk%2Fimg.png)
+
+### 💬 4. 복수의 노드 생성과 추가
+
+> `DocumentFragment` 노드는 노드 객체의 일종으로, 부모 노드가 없어 기존 DOM과는 별도로 존재한다는 특징이 있다. 자식 노드들의 부모 노드로서 별도의 서브 DOM을 구성하여 기존 DOM에 추가하기 위한 용도로 사용한다.
+
+`DocumentFragment` 노드는 기존 DOM과는 별도로 존재하므로 자식 노드를 추가해도 기존 DOM에는 어떠한 변경도 발생하지 않으며, DOM에 추가하면 자신은 제거되고 자신의 자식 노드만 DOM에 추가된다. 리플로우와 리페인트 또한 한 번만 실행된다.
+
+![](https://blog.kakaocdn.net/dn/cduCw4/btrABLuYwLy/rFA4dBOA0DWAVJmj2DXceK/img.png)
+
+```html
+<!doctype html>
+<html>
+  <body>
+    <ul id="fruits"></ul>
+    <script>
+      const $fruits = document.getElementById('fruits');
+      const $fragment = document.createDocumentFragment();
+
+      ['Apple', 'Banana', 'Orange'].forEach((text) => {
+        const $li = document.createElement('li'); // 1. 요소 노드 생성
+        const textNode = document.createTextNode(text); // 2. 텍스트 노드 생성
+
+        $li.appendChild(textNode); // 3. 텍스트 노드를 $li 요소의 자식 노드로 추가
+        $fragment.appendChild($li); // 4. $li 요소 노드를 DocumentFragment 노드의 마지막 자식 노드로 추가
+      });
+
+      // 5. DocumentFragment 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
+      $fruits.appendChild($fragment);
+    </script>
+  </body>
+</html>
+```
+
+### 💬 5. 노드 삽입
+
+#### ✨ 마지막 노드로 추가
+
+> `Node.prototype.appendChild` 메서드는 인수로 전달받은 노드를 자신을 호출한 노드의 마지막 자식 노드로 DOM에 추가한다. 노드를 추가할 위치는 정할 수 없고 언제나 마지막 자식 노드로 추가한다.
+
+```html
+<!doctype html>
+<html>
+  <body>
+    <ul id="fruits">
+      <li>Apple</li>
+      <li>Banana</li>
+    </ul>
+    <script>
+      const $li = document.createElement('li');
+
+      $li.appendChild(document.createTextNode('Orange'));
+      document.getElementById('fruits').appendChild($li);
+    </script>
+  </body>
+</html>
+```
+
+#### ✨ 지정한 위치에 노드 삽입
+
+> `Node.prototype.insertBefore(newNode, childNode)` 메서드는 첫 번째 인수로 전달받은 노드를 두 번째 인수로 전달받은 노드 앞에 삽입한다.
+
+이때 두 번째 인수로 전달받은 노드는 반드시 `insertBefore` 메서드를 호출한 노드의 자식 노드여야 하며, 아닌 경우 `DOMException` 에러가 발생한다. 전달받은 두 번째 인수가 null인 경우에는 `appendChild` 메서드처럼 동작한다.
+
+```html
+<!doctype html>
+<html>
+  <body>
+    <ul id="fruits">
+      <li>Apple</li>
+      <li>Banana</li>
+    </ul>
+    <script>
+      const $fruits = document.getElementById('fruits');
+      const $li = document.createElement('li');
+
+      $li.appendChild(document.createTextNode('Orange'));
+      $fruits.insertBefore($li, $fruits.lastElementChild); // Apple - Orange - Banana
+
+      // 두 번째 인수로 전달받은 노드는 반드시 #fruits 요소 노드의 자식 노드여야 함
+      $fruits.insertBefore($li, document.querySelector('div')); // DOMException
+
+      // $fruits.insertBefore($li, null);
+      // Apple - Banana - Orange
+    </script>
+  </body>
+</html>
+```
+
+### 💬 6. 노드 이동
+
+> DOM에 이미 존재하는 노드를 `appendChild` 또는 `insertBefore` 메서드를 사용해 DOM에 다시 추가하면 현재 위치에서 노드를 제거하고 새로운 위치에 노드를 추가하며 이동한다.
+
+```html
+<!doctype html>
+<html>
+  <body>
+    <ul id="fruits">
+      <li>Apple</li>
+      <li>Banana</li>
+      <li>Orange</li>
+    </ul>
+    <script>
+      const $fruits = document.getElementById('fruits');
+      const [$apple, $banana] = $fruits.children; // 이미 존재하는 요소 취득
+
+      // 이미 존재하는 $apple 요소 노드 #fruits 요소 노드의 마지막 노드로 이동
+      $fruits.appendChild($apple); // Banana - Orange - Apple
+      // 이미 존재하는 $banana 요소 노드 #fruits 요소의 마지막 자식 노드 앞으로 이동
+      $fruits.insertBefore($banana, $fruits.lastElementChild); // Orange - Banana - Apple
+    </script>
+  </body>
+</html>
+```
+
+### 💬 7. 노드 복사
+
+> `Node.prototype.cloneNode([deep: true | false])` 메서드는 노드의 사본을 생성해 반환한다. false를 인수로 전달하거나 생략하면 노드를 얕은 복사<sup>shallow copy</sup>하여 노드 자신만의 사본을 생성한다. 얕은 복사로 생성된 요소 노드는 자손 노드를 복사하지 않으므로 텍스트 노드도 없다.
+
+```html
+<!doctype html>
+<html>
+  <body>
+    <ul id="fruits">
+      <li>Apple</li>
+    </ul>
+    <script>
+      const $fruits = document.getElementById('fruits');
+      const $apple = $fruits.firstElementChild;
+
+      const $shallowClone = $apple.cloneNode();
+      $shallowClone.textContent = 'Banana'; // 텍스트가 없는 사본 노드에 텍스트 추가
+      $fruits.appendChild($shallowClone);
+
+      // #fruits 요소를 깊은 복사해 모든 자손 노드가 포함된 사본 생성
+      const $deepClone = $fruits.cloneNode(true);
+      $fruits.appendChild($deepClone);
+    </script>
+  </body>
+</html>
+```
+
+### 💬 8. 노드 교체
+
+> `Node.prototype.replaceChild(newChild, oldChild)` 메서드는 자신을 호출한 노드의 자식 노드를 다른 노드로 교체한다. 즉, 자신을 호출한 노드의 자식 노드인 `oldChild` 노드를 `newChild` 노드로 교체한다. 이때 `oldChild` 노드는 DOM에서 제거된다.
+
+```html
+<!doctype html>
+<html>
+  <body>
+    <ul id="fruits">
+      <li>Apple</li>
+    </ul>
+    <script>
+      const $fruits = document.getElementById('fruits');
+
+      // 기존 노드와 교체할 요소 노드 생성
+      const $newChild = document.createElement('li');
+      $newChild.textContent = 'Banana';
+
+      // $fruits 요소 노드의 첫 번째 자식 요소 노드 $newChild 요소 노드로 교체
+      $fruits.replaceChild($newChild, $fruits.firstElementChild);
+    </script>
+  </body>
+</html>
+```
+
+### 💬 9. 노드 삭제
+
+> `Node.prototype.removeChild(child)` 메서드는 child 매개변수에 인수로 전달한 노드를 DOM에서 삭제한다.
+
+```html
+<!doctype html>
+<html>
+  <body>
+    <ul id="fruits">
+      <li>Apple</li>
+      <li>Banana</li>
+    </ul>
+    <script>
+      const $fruits = document.getElementById('fruits');
+
+      // #fruits 요소 노드의 마지막 요소 DOM에서 삭제
+      $fruits.removeChild($fruits.lastElementChild);
+    </script>
+  </body>
+</html>
+```
+
 ## 👀 REFERENCE
 
 모던 자바스크립트 Deep Dive 39장 DOM