docs: DOM (39.4 ~ 39.6.2)

Next-by-Next · Jan 19, 2024 · 4f389a4 · 4f389a4
1 parent 6612380
commit 4f389a4
Showing 1 changed file with 115 additions and 0 deletions.
diff --git a/docs/39_DOM/문소희.md b/docs/39_DOM/문소희.md
@@ -532,6 +532,121 @@ $elems.forEach((elem) => (elem.className = 'blue'));
 </html>
 ```
 
+## 🔎 4. 노드 정보 취득
+
+| 프로퍼티                | 설명                                                                                                                                    |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| Node.prototype.nodeType | 노드 객체의 종류, 즉 노드 타입을 나타내는 상수를 반환하며 상수는 Node에 저장되어 있다. (ELEMENT_NODE: 1, TEXT_NODE:3, DOCUMENT_NODE: 9) |
+| Node.prototype.nodeName | 노드 이름을 문자열로 반환한다. (요소 노드: UL/UI 등, 텍스트 노드: #text, 문서 노드: #document)                                          |
+
+## 🔎 5. 요소 노드의 텍스트 조작
+
+### 💬 1. nodeValue
+
+> `Node.prototype.nodeValue` 프로퍼티는 참조와 할당이 모두 가능한 접근자 프로퍼티다. 노드 객체의 nodeValue 프로퍼티를 참조하면 노드 객체의 값<sup>텍스트 노드의 텍스트</sup>을 반환한다. 따라서, 텍스트 노드가 아닌 문서 노드나 요소 노드의 nodeValue 프로퍼티를 참조할 경우 null을 반환한다.
+
+텍스트 노드의 nodeValue 프로퍼티에 값을 할당하면 텍스트를 변경할 수 있는데, 다음과 같은 순서의 처리가 필요하다.
+
+1. 텍스트를 변경할 요소 노드를 취득한 다음, 취득한 요소 노드의 텍스트 노드를 탐색한다. 텍스트 노드는 요소 노드의 자식 노드이므로 firstChild 프로퍼티를 사용해 탐색한다.
+2. 탐색한 텍스트 노드의 nodeValue 프로퍼티를 사용해 텍스트 노드의 값을 변경한다.
+
+```html
+<!doctype html>
+<html>
+  <body>
+    <div id="foo">Hello</div>
+  </body>
+  <script>
+    const $textNode = document.getElementById('foo').firstChild; // 1.
+
+    $textNode.nodeValue = 'World'; // 2.
+    console.log($textNode.nodeValue); // World
+  </script>
+</html>
+```
+
+### 💬 2. textContent
+
+> `Node.prototype.textContent` 프로퍼티는 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경하는 접근자 프로퍼티이다. 요소 노드의 textContent 프로퍼티를 참조하면 요소 노드의 콘텐츠 영역 내<sup>시작 태그와 종료 태그 사이</sup>의 텍스트를 모두 반환한다. 이때, HTML 마크업은 무시된다.
+
+만일 요소 노드의 콘텐츠 영역에 자식 요소 노드가 없고 텍스트만 존재한다면 `firstChild.nodeValue`와 `textContent` 프로퍼티는 같은 결과를 반환하므로 `textContent`를 사용하는 편이 코드가 더 간단하다. 👀
+
+요소 노드의 textContent 프로퍼티에 문자열을 할당하면 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열이 텍스트로 추가된다. 이때 할당한 문자열에 HTML 마크업이 포함되어 있더라도 문자열 그대로 인식되어 텍스트 취급을 하므로 _HTML 마크업이 파싱되지 않는다._
+
+```html
+<!doctype html>
+<html>
+  <body>
+    <div id="foo">Hello</div>
+    <div id="bar">Hello <span>world!</span></div>
+  </body>
+  <script>
+    const $foo = document.getElementById('foo');
+
+    console.log($foo.textContent === $foo.firstChild.nodeValue); // true
+    console.log(document.getElementById('bar').textContent); // Hello World!
+  </script>
+</html>
+```
+
+`textContent` 프로퍼티와 유사한 동작을 하는 `innerText` 프로퍼티가 있는데 다음과 같은 이유로 사용하지 않는 것이 좋다.
+
+- innertText 프로퍼티는 CSS에 순종적이다. (e.g. CSS에 의해 비표시로 지정된 요소 노드의 텍스트를 반환하지 않음)
+- innerText 프로퍼티는 CSS를 고려해야 하므로 textContent 프로퍼티보다 느리다.
+
+## 🔎 6. DOM 조작
+
+> DOM 조작<sup>DOM manipulation</sup>은 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것을 말한다.
+
+### 💬 1. innerHTML 메서드
+
+> `Element.prototype.innerHTML` 프로퍼티는 접근자 프로퍼티로서 요소 노드의 콘텐츠 영역<sup>시작 태그와 종료 태그 사이</sup> 내에 포함된 모든 HTML 마크업을 문자열로 반환한다. 취득과 변경 모두 가능하다.
+
+innerHTML 프로퍼티에 할당한 HTML 마크업 문자열은 렌더링 엔진에 의해 파싱되어 요소 노드의 자식으로 DOM에 반영된다. 이때 사용자로부터 입력받은 데이터<sup>untrusted input data</sup>를 그대로 innerHTML 프로퍼티를 할당하는 것은 **크로스 사이트 스크립팅 공격<sup>XSS: Cross-Site Scripting Attacks</sup>에 취약하므로 위험하다.**
+
+또한, 요소 노드의 innerHTML 프로퍼티에 HTML 마크업 문자열을 할당할 경우 요소 노드의 모든 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱해 DOM을 변경한다는 단점이 있다. 즉, _기존의 자식 노드까지 모두 제거한 후 다시 처음부터 새롭게 자식 노드를 생성해 DOM에 반영해 효율적이지 않다._
+
+#### ✨ HTML 새니티제이션<sup>HTML sanitization</sup>
+
+> 사용자로부터 입력받은 데이터에 의해 발생할 수 있는 크로스 사이트 스크립팅 공격을 예방하기 위해 잠재적 위험을 제거하는 기능을 말한다. DOMPurify 라이브러리는 아래와 같이 잠재적 위험을 내포한 HTML 마크업을 살균<sup>sanitization</sup>하여 잠재적 위험을 제거한다.
+
+```javascript
+DOMPurify.sanitize('<img src="x" onerror="alert(document.cookie)">');
+```
+
+### 💬 2. insertAdjacentHTML 메서드
+
+> `Element.prototype.insertAdjacentHTML(position, DOMString)` 메서드는 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입한다. 이때 두 번째 인수로 전달한 HTML 마크업 문자열을 파싱하고 그 결과로 생성된 노드를 첫 번째 인수로 전달한 위치에 삽입해 DOM에 반영한다.
+
+첫 번째 인수로 전달할 수 있는 문자열은 `beforebegin, afterbegin, beforeend, afterend` 4가지다.
+
+![](https://velog.velcdn.com/images/gnsdh8616/post/85d046ee-0b99-4cd8-80c6-4a409005d3f4/image.png)
+
+`insertAdhacentHTML` 메서드는 기존 요소에 영향을 주지 않고 새롭게 삽입될 요소만을 파싱해 자식 요소로 추가하므로 `innerHTML` 프로퍼티보다 효율적이고 빠르다. 단, HTML 마크업 문자열을 파싱하므로 크로스 사이트 스크립팅 공격에 취약하다.
+
+```html
+<!doctype html>
+<html>
+  <body>
+    <!-- beforebegin -->
+    <div id="foo">
+      <!-- afterbegin -->
+      text
+      <!-- beforeend -->
+    </div>
+    <!-- afterend -->
+  </body>
+  <script>
+    const $foo = document.getElementById('foo');
+
+    $foo.insertAdjacentHTML('beforebegin', '<p>beforebegin</p>');
+    $foo.insertAdjacentHTML('afterbegin', '<p>afterbegin</p>');
+    $foo.insertAdjacentHTML('beforeend', '<p>beforeend</p>');
+    $foo.insertAdjacentHTML('afterend', '<p>afterend</p>');
+  </script>
+</html>
+```
+
 ## 👀 REFERENCE
 
 모던 자바스크립트 Deep Dive 39장 DOM