[Deep Dive] DOM(2)

link717·2021년 9월 12일

Deep Dive

목록 보기

24/28

🌼 39.2.6 HTML Collection과 NodeList

유사 배열 객체이면서 iterable한 성질을 갖고 있어 for...of문으로 순회할 수 있으며 스프레드 문법을 사용하면 간단히 배열로 변환할 수도 있다. 이렇게 배열로 변환된 객체는 배열에서 제공하는 고차 함수(forEach, map, etc.)를 사용할 수 있게 된다.
노드 객체의 상태 변화를 실시간으로 반영한 live 객체이다. HTML Collection은 언제나 live 객체로 동작한다. 이러한 특성으로 객체를 for문으로 순회하여 노드 객체의 상태를 변경해야 할 경우에 주의를 요한다. 이러한 문제를 회피하기 위한 방법은 아래와 같다.
- for 문을 역방향으로 순회
- while문으로 요소가 남아 있지 않을 때까지 무한 반복
- HTMLCollection을 배열로 변환하여 순회 ⭐️


<script>
  const $elem = document.getElementsByClassName("red");
  
  // class가 'red'인 HTMLCollection 객체의 모든 요소의 class 값을 'blue'로 변경해라.
  [...$elem].forEach(elem => elem.className = "blue");
  
  // class가 "red"인 HTMLCollection 객체의 모든 요소의 class 값을 "green"으로 변경해라.
  Array.from($elem).forEach(elem => elem.className = "green");
</script>

NodeList는 대부분 non-live 객체로 동작한다. 다만, childNodes 프로퍼티가 반환하는 NodeList 객체는 live 객체로 동작하므로 주의가 필요하다. 따라서 노드 객체 타입과 상관없이 배열로 변환하여 순회하는 것을 권장한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <ul id="fruits">
      <li>Apple</li>
      <li>Banana</li>
      <li>Grape</li>
    </ul>
    <ul>
      <li>html</li>
    </ul>
    <script>
      const $fruits = document.getElementById("fruits");
      const $listFromFruits = $fruits.getElementsByTagName("li");

      // childNodes 프로퍼티가 반환한 NodeList 객체
      console.log($fruits.childNodes);
      // NodeList(7) [text, li, text, li, text, li, text]
    </script>
  </body>
</html>

🌼 39.3 노드 탐색

노드 탐색 프로퍼티는 모두 접근자 프로퍼티로 setter없이 getter만 존재하는 읽기 전용 프로퍼티이다. 읽기 전용 프로퍼티에 값을 할당할 경우 에러 없이 무시된다.

Q. 브라우저 콘솔창에 Node.prototype, Element.prototype을 입력하여 읽기 전용 프로퍼티를 확인해보자.

Node.prototype.childNodes: 자식 노드를 모두 탐색하여 NodeList에 담아 반환한다. 반환된 리스트에는 텍스트 노드도 포함되어 있을 수 있다.
- 예시) Node.prototype.firstChild: 텍스트 노드 혹은 요소 노드를 반환한다.
Element.prototyle.children: 자식 노드를 탐색하여 요소 노드만 HTMLCollection에 담아 반환한다. 반환된 리스트에는 텍스트 노드도 포함되지 않는다.
- 예시) Element.prototype.firstElementChild: 요소 노드만 반환한다.

🌼 39.5 요소 노드의 텍스트 조작

nodeValue: 텍스트 노드에 Node.prototype.nodeValue를 사용하면 노드 객체의 값, 텍스트를 반환한다. 텍스트 노드가 아닌 경우에 사용할 경우에는 null을 반환한다.
textContent: 요소 노드에 Node.prototype.textContent를 사용할 경우, 요소 노드의 모든 자손 노드의 테스트를 모두 취득하여 반환한다. 이 때, HTML 마크업은 무시된다.
- 요소 노드의 컨텐츠 영역에 자식 요소 노드가 없고 텍스트만 존재한다면 사용법이 복잡한 nodeValue보다 textContent를 사용하는 편이 더 간단하다. 다만, 해당 방법을 통해 마크업이 포함된 텍스트를 재할당할 경우, HTML이 파싱되지 않고 문자열 그대로 인식된다.
innerText: textContent와 유사하게 동작하지만 CSS에 순종적이다. 즉, CSS 스타일로 비표시로 지정 : visibility: hidden;된 요소 노드에 사용할 경우에 노도의 텍스트를 반환하지 못하고 CSS를 고려해야해서 조작이 느리다는 단점이 있어 사용하지 않는 것이 좋다.

🌼 39.6 DOM 조작

innerHTML: 요소 노드에 innerHTML 프로퍼티를 사용하면 해당 요소 노드 사이에 있는 모든 HTML 마크업을 문자열로 반환한다. 해당 프로퍼티를 통해서 HTML 마크업이 포함된 내용을 재할당할 경우, HTML은 파싱되어 내용이 적용된다.
- 사용자로부터 받은 정보를 innerHTML을 이용해서 변경할 경우, 크로스 사이트 스크립팅 공격(XSS)에 취약하여 위험하다. 따라서 변경사항을 바로 적용하는 것이 아니라 HTML sanization(살균) 과정을 거치고 안정성이 보장된 내용을 적용하는 것을 권장한다. (참조: DOM Purify)
- 기존의 요소를 변경하지 않으면서 새로운 노드를 추가하려고 할 경우, DOM 조작시 변경할 위치를 특정할 수 없어 요소 노드 사이에 있는 모든 노드를 제거하고 기존 노드 + 새로운 노드를 추가해야 한다는 단점이 있다.
isertAdjacentHTML(position, DOMString): innerHTML과 다르게 새롭게 삽입할 요소(DOMString)의 삽입 위치(position)를 지정할 수 있어 빠르다는 장점이 있다. 다만 XSS 공격에는 여전히 취약하다.
- position: beforebegin, afterbegin, beforeend, afterend가 있다.

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

🌼 39.6.3 노드의 생성과 추가

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <ul id="fruits">
      <li>Apple</li>
    </ul>
    <script>
      const $fruits = document.getElementById("fruits");
      
      // 요소 노드 생성 : 홀로 존재하는 상태
      const $li = document.createElement("li");
      
      // 텍스트 노드 생성: 홀로 존재하는 상태
      const $textNode = document.createTextNode("Banana");
      
      // 요소 노드에 텍스트 노드를 마지막 자식으로 추가
      // 요소 노드에 자식 노드가 없는 경우, 텍스트 노드를 생성하는 과정 없이
      // $li.textContent = "Banana";로 대체 가능하다.
      $li.appendChild($textNode);
      
      // $fruits 위치에 새로 생성한 $li를 마지막 자식 노드로 추가
      $fruits.appendChild($li);
    </script>
  </body>
</html>

노드의 생성과 추가 과정에서 복수개의 노드를 생성하여 추가해야 할 경우, 노드가 추가될 때마다 리플로우와 리페인트가 일어나 성능적으로 좋지 못하고 비효율적이다. 이러한 문제를 회피하기 위한 방법은 다음과 같다.

컨테이너 요소를 별도로 생성해서 요소의 자식으로 추가될 노드를 먼저 추가하고 반복 작업이 끝나면 실제 삽입할 위치에 노드를 추가하는 방법이 있다. 하지만 불필요한 컨테이너 요소가 DOM에 추가되는 부작용이 있다.
이러한 문제를 DocumentFragment 노드가 해결할 수 있다. DOM에 추가할 복수개의 자식노드를 생성한 뒤 fragment 노드에 자식 노드로 추가하고 fragment 노드를 DOM에 추가하면 자신은 제거되고 생성된 자식노드만 DOM에 추가된다.

🌼 39.6.5 노드 삽입

insertBefore(newNode, childNode): 첫 번째 인수로 전달받은 노드를 두 번째 인수로 전달받은 노드 앞에 삽입한다. appendChild와 다르게 삽입 위치를 지정할 수 있다.

두 번째 인수가 자식 노드가 아닌 경우: DOM Exception error 발생
두 번째 인수가 null인 경우: appendChild와 동일하게 동작

🌼 39.6.6 노드 이동

돔에 이미 존재하는 요소 노드를 취득한 뒤 appendChild 혹은 insertBefore를 사용하면 기존 노드를 제거하고 새로운 위치에 노드를 추가한다. 즉 노드 이동이 발생한다.

🌼 39.6.7 노드 복사

Node.prototype.cloneNode([deep: true | false])를 사용하면 노드의 사본을 생성하여 반환한다. deep에 true를 전달하면 자식 노드까지 포함한 깊은 복사를 false를 전달하면 자기 자신만을 얕게 복사한다. 얕은 복사를 통해 이뤄진 복사는 자손 노드를 복사하지 않기 때문에 텍스트 노드조차 없다.