[Javascript]DOM(1) node와 node 취득

사부작사부작/Javascript 2022. 5. 1. 20:06

#모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다.

노드

1. HTML 요소와 노드 객체

HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다.

HTML 요소의 콘텐츠 영역에는 텍스뿐만 아니라 다른 HTML 요소가 포함될 수 있다. 이때 이러한 중첩 관계에 의해 계층적 부자관계가 형성된다. HTML 요소 간의 부자 관계를 반영하여 HTML 요소를 객체화한 모든 노드 객체들을 트리자료구조로 구성하고, 이것은 DOM 또는 DOM 트리라고 한다.

(1)트리 자료구조

트리 자료구조는 노드들의 계층 구조로 이뤄진다. 트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조이다. 이때 부모가 없는 최상단 노드를 루트노드, 자식이 없는 노드를 리프 노드라고 한다.

2. 노드 객체의 타입

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <ul>
      <li id="apple">Apple</li>
      <li id="banana">Banana</li>
      <li id="orange">Orange</li>
    </ul>
    <script src="app.js"></script>
  </body>
</html>

위 HTML 문서의 DOM(공백 노드를 제외한)은 아래와 같다.

노드 객체는 종류가 있고 상속 구조를 갖는다. 총 12개 종류의 노드 타입이 있고, 이 중에서 중요한 노드 타입은 4가지이다.

(1)문서노드

문서노드는 DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다. document 객체는 브라우저가 렌더링한 HTML문서 전체를 가리키는 객체로서 전역 객체의 document 프로퍼티에 바인딩되어 있다. 따라서 window.document 혹은 document로 참조할 수 있다.

document 객체는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당한다. 즉 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다.

(2) 요소 노드

요소 노드는 HTML 요소(element)를 가리키는 객체다. 부자 관계를 가지며, 이것을 통해 정보를 구조화 한다. 요소 노드는 문서의 구조를 표현한다고 할 수 있다.

(3) 어트리뷰트 노드

어트리뷰트 노드는 HTML 요소의 어트리뷰트를 가리키는 객체다. 어트리뷰트 노드는 어트리뷰트가 지정된 HTML 요소의 요소 노드와 연결되어 있다. 어트리뷰트 노드는 요소 노드에만 연결되어 있다. 따라서 부모 노드가 없기 때문에 요소 노드의 형제 노드가 아니다. 어트리뷰트에 접근하려면 먼저 노드 요소에 접근해야 한다.

(4) 텍스트 노드

HTML 요소의 텍스트를 가리키는 객체다. 텍스트 노드는 요소 노드의 자식 노드이며, 자식 노드를 가질 수 없는 리프 노드다. 즉, 텍스트 노드는 DOM 트리의 최종단이다. 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 한다.

3. 노드 객체의 상속 구조

DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있다. 이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있으며, 자신의 어트리뷰트와 텍스트를 조작할 수도 있다.

DOM의 노드 객체는 표준 빌트인 객체가 아니라 브라우저 환경에서 추가적으로 제공하는 호스트 객체다. 하지만 노드 객체도 자바스크립트 객체니므로 프로포타입에 의한 상속 구조를 갖는다.

모든 노드 객체는 Object, EvnetTarget, Node 인터페이스를 상속받는다. 또한 각각의 노드마다 각각 다른 인터페이스를 추가 상속 받는다.

예시로 프로토타입 체인 관점에서 input 요소를 파싱하면 아래와 같다.

input 요소 노드 객체는 다양한 특성을 갖는 객체이며, 이러한 특성을 나타내는 기능들을 상속을 통해 제공받는다.

노드 객체에는 노드 객체의 종류, 타입에 상관없이 모든 객체가 공통적으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있다.

모든 노드 객체가 공통적으로 가지는 기능은 다음과 같다.

이벤트와 관련된 기능(EnventTarget.addEventListener, EventTarget.removeEventListener 등) - EventTarget 인터페이스
트리 탐색 기능(Node.parentNode, Node.childNodes, Node.previousSibling, Node.nextSibling 등) - Node 인터페이스
노드 정보 제공 기능(Node.nodeType, Node.nodename 등) - Node 인터페이스

요소 노드 객체는 HTML 요소가 갖는 공통적인 기능이 있고, 이러한 공통적인 기능은 HTMLElement 인터페이스가 제공한다. 반면, 특정한 요소 노드만이 필요한 기능을 제공하는 인터페이스는 HTML 요소의 종류에 따라 각각 다르다.

(ex, input의 value - HTMLInputElement)

이러한 프로토타입 체인의 상속 관계를 통해 DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다. 이 DOM API를 통해 HTML 구조나 내용 또는 스타일을 동적으로 조작할 수 있다.

요소 노드 취득

HTML 구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다. 즉, 요소 노드의 취득은 HTML 요소를 조작하는 시작점이다.

1. id를 이용한 요소 노드 취득

Document.prototype.getElementById 메서드는 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환한다.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li id="apple">Apple</li>
      <li id="banana">Banana</li>
      <li id="orange">Orange</li>
    </ul>
    <script>
      // id 값이 'banana'인 요소 노드를 탐색하여 반환한다.
      // 두 번째 li 요소가 파싱되어 생성된 요소 노드가 반환된다.
      const $elem = document.getElementById('banana');

      // 취득한 요소 노드의 style.color 프로퍼티 값을 변경한다.
      $elem.style.color = 'red';
    </script>
  </body>
</html>

id 값은 HTML 문서 내에서 유일한 값이어야 하며, class 어트리뷰트와는 달리 공백 문자로 구분하여 여러개의 값을 가질 수 없다. 단, 중복된 id 값을 갖는 요소가 여러개 존재하더라도 어떠한 에러도 발생하지 않고, 따라서 getElementById 메서드는 인수로 전달된 id 값을 갖는 첫 번째 요소 노드만 반환한다.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li id="banana">Apple</li>
      <li id="banana">Banana</li>
      <li id="banana">Orange</li>
    </ul>
    <script>
      // getElementById 메서드는 언제나 단 하나의 요소 노드를 반환한다.
      // 첫 번째 li 요소가 파싱되어 생성된 요소 노드가 반환된다.
      const $elem = document.getElementById('banana');

      // 취득한 요소 노드의 style.color 프로퍼티 값을 변경한다.
      $elem.style.color = 'red';
    </script>
  </body>
</html>

만약 전달된 id 값을 갖는 HTML 요소가 존재하지 않는 경우 null을 반환한다.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li id="apple">Apple</li>
      <li id="banana">Banana</li>
      <li id="orange">Orange</li>
    </ul>
    <script>
      // id 값이 'grape'인 요소 노드를 탐색하여 반환한다. null이 반환된다.
      const $elem = document.getElementById('grape');

      // 취득한 요소 노드의 style.color 프로퍼티 값을 변경한다.
      $elem.style.color = 'red';
      // -> TypeError: Cannot read property 'style' of null
    </script>
  </body>
</html>

2. 태그 이름을 이용한 요소 노드 취득

Document.prototype/Element.prototype.getElementsByTagName 메서드는 인수로 전달된 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다. getElementsByTagName 메서드는 HTMLCollection 객체를 반환한다.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li id="apple">Apple</li>
      <li id="banana">Banana</li>
      <li id="orange">Orange</li>
    </ul>
    <script>
      // 태그 이름이 li인 요소 노드를 모두 탐색하여 반환한다.
      // 탐색된 요소 노드들은 HTMLCollection 객체에 담겨 반환된다.
      // HTMLCollection 객체는 유사 배열 객체이면서 이터러블이다.
      const $elems = document.getElementsByTagName('li');

      // 취득한 모든 요소 노드의 style.color 프로퍼티 값을 변경한다.
      // HTMLCollection 객체를 배열로 변환하여 순회하며 color 프로퍼티 값을 변경한다.
      [...$elems].forEach(elem => { elem.style.color = 'red'; });
    </script>
  </body>
</html>

HTMLCollection 객체는 유사 배열 객체이면서 이터러블이다.

HTML 문서의 모든 요소 노드를 취득하려면 getElementsByTagName 메서드의 인수로 '*'를 인수로 전달한다.

// 모든 요소 노드를 탐색하여 반환한다.
const $all = document.getElementsByTagName('*');
// -> HTMLCollection(8) 
// [html, head, body, ul, li#apple, li#banana, li#orange, script, apple: li#apple, banana: li#banana, orange: li#orange]

Document의 getElementsByTagName은 DOM 전체에서 요소 노드를 탐색하여 반환한다. Element의 getElementsByTagName는 특정 요소 노드를 통해 호출하며, 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits">
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
    <ul>
      <li>HTML</li>
    </ul>
    <script>
      // DOM 전체에서 태그 이름이 li인 요소 노드를 모두 탐색하여 반환한다.
      const $lisFromDocument = document.getElementsByTagName('li');
      console.log($lisFromDocument); // HTMLCollection(4) [li, li, li, li]

      // #fruits 요소의 자손 노드 중에서 태그 이름이 li인 요소 노드를 모두
      // 탐색하여 반환한다.
      const $fruits = document.getElementById('fruits');
      const $lisFromFruits = $fruits.getElementsByTagName('li');
      console.log($lisFromFruits); // HTMLCollection(3) [li, li, li]
    </script>
  </body>
</html>

이처럼 Document와 Element의 prototype의 메서드로 같은 이름의 메서드가 있는 경우, Document의 메서드는 DOM 전체에서, Element는 해당 요소의 자식 요소에서 라는 범위의 차이가 있다.

또한 HTMLCollection 객체를 반환하는 메서드들의 경우, 해당 탐색의 값이 존재하지 않는 경우 null을 반환하지 않고 빈 HTMLCollection 객체를 반환한다.

3. class를 이용한 요소 노드 취득

Document.prototype/Element.prototype.getElementsByClassName 메서드는 인수로 전달한 class 어트리뷰트 값을 갖는 모든 요소 노드들을 탐색하여 반환한다. 인수로 전달한 class 값은 공백으로 구분하여 여러 개의 class를 지정할 수 있다. getElementsByClassName 메서드는 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li class="fruit apple">Apple</li>
      <li class="fruit banana">Banana</li>
      <li class="fruit orange">Orange</li>
    </ul>
    <script>
      // class 값이 'fruit'인 요소 노드를 모두 탐색하여 HTMLCollection 객체에 담아 반환한다.
      const $elems = document.getElementsByClassName('fruit');

      // 취득한 모든 요소의 CSS color 프로퍼티 값을 변경한다.
      [...$elems].forEach(elem => { elem.style.color = 'red'; });

      // class 값이 'fruit apple'인 요소 노드를 모두 탐색하여 HTMLCollection 객체에 담아 반환한다.
      const $apples = document.getElementsByClassName('fruit apple');

      // 취득한 모든 요소 노드의 style.color 프로퍼티 값을 변경한다.
      [...$apples].forEach(elem => { elem.style.color = 'blue'; });
    </script>
  </body>
</html>

Document.prototype/Element.prototype.getElementsByClassName는 앞서 말한대로 어떤 객체의 프로토타입의 메서드를 호출하느냐에 따라 다른 탐색 범위를 가지고, 탐색 결과 요소가 존재하지 않는 경우 빈 HTMLCollection을 반환한다.

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits">
      <li class="apple">Apple</li>
      <li class="banana">Banana</li>
      <li class="orange">Orange</li>
    </ul>
    <div class="banana">Banana</div>
    <script>
      // DOM 전체에서 class 값이 'banana'인 요소 노드를 모두 탐색하여 반환한다.
      const $bananasFromDocument = document.getElementsByClassName('banana');
      console.log($bananasFromDocument); // HTMLCollection(2) [li.banana, div.banana]

      // #fruits 요소의 자손 노드 중에서 class 값이 'banana'인 요소 노드를 모두 탐색하여 반환한다.
      const $fruits = document.getElementById('fruits');
      const $bananasFromFruits = $fruits.getElementsByClassName('banana');

      console.log($bananasFromFruits); // HTMLCollection [li.banana]
    </script>
  </body>
</html>

4. CSS 선택자를 이용한 요소 노드 취득

CSS 선택자는 스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용하는 문법이다.

/* 전체 선택자: 모든 요소를 선택 */
* { ... }
/* 태그 선택자: 모든 p 태그 요소를 모두 선택 */
p { ... }
/* id 선택자: id 값이 'foo'인 요소를 모두 선택 */
#foo { ... }
/* class 선택자: class 값이 'foo'인 요소를 모두 선택 */
.foo { ... }
/* 어트리뷰트 선택자: input 요소 중에 type 어트리뷰트 값이 'text'인 요소를 모두 선택 */
input[type=text] { ... }
/* 후손 선택자: div 요소의 후손 요소 중 p 요소를 모두 선택 */
div p { ... }
/* 자식 선택자: div 요소의 자식 요소 중 p 요소를 모두 선택 */
div > p { ... }
/* 인접 형제 선택자: p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택 */
p + ul { ... }
/* 일반 형제 선택자: p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택 */
p ~ ul { ... }
/* 가상 클래스 선택자: hover 상태인 a 요소를 모두 선택 */
a:hover { ... }
/* 가상 요소 선택자: p 요소의 콘텐츠의 앞에 위치하는 공간을 선택
   일반적으로 content 프로퍼티와 함께 사용된다. */
p::before { ... }

Document.prototype/Element.prototype.querySelector 메서드는 인수로 전달한 CSS 선택자를 만족하는 하나의 요소 노드를 탐색하여 반환하며, 반환 결과는 다음과 같다.

인수로 전달한 CSS 선택자를 만족하는 요소 노드가 여러 개인 경우 첫 번째 요소 노드만 반환한다.
인수로 전달한 CSS 선택자를 만족하는 요소 노드가 없는 경우 null을 반환한다.
인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 DOMException 에러가 발생한다.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li class="apple">Apple</li>
      <li class="banana">Banana</li>
      <li class="orange">Orange</li>
    </ul>
    <script>
      // class 어트리뷰트 값이 'banana'인 첫 번째 요소 노드를 탐색하여 반환한다.
      const $elem = document.querySelector('.banana');

      // 취득한 요소 노드의 style.color 프로퍼티 값을 변경한다.
      $elem.style.color = 'red';
    </script>
  </body>
</html>

Document.prototype/Element.prototype.querySelectorAll 메서드는 인수로 전달한 CSS 선택자를 만족시키는 모든 요소 노드를 탐색하여 반환한다. querySelectorAll 메서드는 여러 개의 요소 노드 객체를 갖는 NodeList 객체를 반환한다. NodeList 객체는 유사 배열 객체이면서 이터러블이다.

인수로 전달한 CSS 선택자를 만족시키는 요소가 있을 경우 NodeList 객체에 담아 반환한다.
인수로 전달한 CSS 선택자를 만족시키는 요소가 없을 경우 빈 NodeList 객체를 반환한다.
인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 DOMException 에러가 발생한다.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li class="apple">Apple</li>
      <li class="banana">Banana</li>
      <li class="orange">Orange</li>
    </ul>
    <script>
      // ul 요소의 자식 요소인 li 요소를 모두 탐색하여 반환한다.
      const $elems = document.querySelectorAll('ul > li');
      // 취득한 요소 노드들은 NodeList 객체에 담겨 반환된다.
      console.log($elems); // NodeList(3) [li.apple, li.banana, li.orange]

      // 취득한 모든 요소 노드의 style.color 프로퍼티 값을 변경한다.
      // NodeList는 forEach 메서드를 제공한다.
      $elems.forEach(elem => { elem.style.color = 'red'; });
    </script>
  </body>
</html>

querySelector, querySelectorAll 메서드는 getElementById, getElementsBy*** 메서드보다 다소 느리긴 하나, 구체적인 조건으로 요소 노드를 취득할 수 있고, 일관된 방식으로 요소 노드를 취득할수 있다는 장점이 있다.

따라서 id 어트리뷰트가 있는 요소 노드를 취득하는 경우를 제외하고는 querySelector, querySelectorAll 메서드를 사용하는 것을 권장한다.

5. 특정 요소 노드를 취득할 수 있는지 확인

Element.prototype.matches 메서드는 인스로 전달한 CSS 선택자를 통해 특정 요소 노드를 취득헐 수 있는지 확인한다.

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits">
      <li class="apple">Apple</li>
      <li class="banana">Banana</li>
      <li class="orange">Orange</li>
    </ul>
  </body>
  <script>
    const $apple = document.querySelector('.apple');

    // $apple 노드는 '#fruits > li.apple'로 취득할 수 있다.
    console.log($apple.matches('#fruits > li.apple'));  // true

    // $apple 노드는 '#fruits > li.banana'로 취득할 수 없다.
    console.log($apple.matches('#fruits > li.banana')); // false
  </script>
</html>

6. HTMLCollection과 NodeList

DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다. HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블이다. 따라서 for of 문과 스프레드 문법을 사용할 수 있다.

HTMLCollection과 NodeList의 중요한 특성은 노드 객체의 상태 변화를 실시간으로 반영하는 살아 있는 객체라는 것이다. HTMLCollection은 언제나 살아있는 객체로 동작하며 choldNodes 프로퍼티를 반환하는 NodeList는 live 객체로 동작하고 나머지는 non-live 객체로 동작한다.

(1)HTMLCollection

HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하여 요소를 제거하기 때문에 for문을 사용하여 상태 변경시 주의해야 한다.

다음 예제에서 쉽게 이해할 수 있다.

<!DOCTYPE html>
<head>
  <style>
    .red { color: red; }
    .blue { color: blue; }
  </style>
</head>
<html>
  <body>
    <ul id="fruits">
      <li class="red">Apple</li>
      <li class="red">Banana</li>
      <li class="red">Orange</li>
    </ul>
    <script>
      // class 값이 'red'인 요소 노드를 모두 탐색하여 HTMLCollection 객체에 담아 반환한다.
      const $elems = document.getElementsByClassName('red');
      // 이 시점에 HTMLCollection 객체에는 3개의 요소 노드가 담겨 있다.
      console.log($elems); // HTMLCollection(3) [li.red, li.red, li.red]

      // HTMLCollection 객체의 모든 요소의 class 값을 'blue'로 변경한다.
      for (let i = 0; i < $elems.length; i++) {
        $elems[i].className = 'blue';
      }

      // HTMLCollection 객체의 요소가 3개에서 1개로 변경되었다.
      console.log($elems); // HTMLCollection(1) [li.red]
    </script>
  </body>
</html>

위 예제에서 자바스크립트 부분이 모두 실행되고 나면 모든 li 요소의 class 값이 blue로 변경될 것 같지만 예상대로 동작하지 않는다. 실행 결과 HTML의 모습은 아래와 같다.

<그림 39-9>

위 자바스크립트 코드의 반복문 안의 코드는 3번 실행 될 것이다. 자세히 들여다 보자.

첫번째 반복(i === 0)
첫번째 반복 때 첫번째 li 요소의 클래스는 blue로 잘 바뀐다. 다만, 이제 blue로 변경되었으므로 getElementsByClassName에 전달한 red 인수와 더 이상 일치하지 않기 때문에 HTMLCollection에서 바로 삭제된다.
두번째 반복(i === 1)
첫 번째 요소의 결과로 HTMLCollection에는 2개의 li요소만 남게 되었다. 따라서 i === 1인 HTMLCollection의 두번째 li요소(최초에는 3번째 요소)의 class 이름이 blue로 변경되고 1번의 이유로 HTMLCollection에서 삭제된다.
세번째 반복(i === 2)
남은 HTMLCollection에는 i===2인 요소는 존재하지 않으므로 아무런 일도 일어나지 않는다.

이런 문제를 피하기 위해 다양한 방법을 사용할 수 있다.

for 문을 역방향으로 순회한다.

// for 문을 역방향으로 순회
for (let i = $elems.length - 1; i >= 0; i--) {
  $elems[i].className = 'blue';
}

while문 사용

// while 문으로 HTMLCollection에 요소가 남아 있지 않을 때까지 무한 반복
let i = 0;
while ($elems.length > i) {
  $elems[i].className = 'blue';
}

HTMLCollection을 배열로 변환해서 사용하기(고차 함수도 사용할 수 있음)

// 유사 배열 객체이면서 이터러블인 HTMLCollection을 배열로 변환하여 순회
[...$elems].forEach(elem => elem.className = 'blue');

(2)NodeList

NodeList 객체는 실시간으로 노드 객체의 상태 변경을 반영하지 않는다. 따라서 HTMLCollection의 문제점을 해결하기 위해 querySelectorAll를 사용하는 것도 하나의 방법이다.

// querySelectorAll은 DOM 컬렉션 객체인 NodeList를 반환한다.
const $elems = document.querySelectorAll('.red');

// NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용할 수 있다.
$elems.forEach(elem => elem.className = 'blue');

querySelectorAll이 반환하는 NodeList 객체는 NodeList.prototype.forEach 메서드를 상속 받아 사용할 수 있고, Array의 forEach와 사용 방식은 동일하다. 또한 NodeList.prototype은 item, entries,keys,values 메서드를 제공한다.

앞서 말한 바와 같이 NodeList는 non-live 객체로 동작하지만, childNodes 프로퍼티가 반환하는 NodeList는 live로 동작하므로 주의가 필요하다

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits">
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </body>
  <script>
    const $fruits = document.getElementById('fruits');

    // childNodes 프로퍼티는 NodeList 객체(live)를 반환한다.
    const { childNodes } = $fruits;
    console.log(childNodes instanceof NodeList); // true

    // $fruits 요소의 자식 노드는 공백 텍스트 노드(39.3.1절 "공백 텍스트 노드" 참고)를 포함해 모두 5개다.
    console.log(childNodes); // NodeList(5) [text, li, text, li, text]

    for (let i = 0; i < childNodes.length; i++) {
      // removeChild 메서드는 $fruits 요소의 자식 노드를 DOM에서 삭제한다.
      // (39.6.9절 "노드 삭제" 참고)
      // removeChild 메서드가 호출될 때마다 NodeList 객체인 childNodes가 실시간으로 변경된다.
      // 따라서 첫 번째, 세 번째 다섯 번째 요소만 삭제된다.
      $fruits.removeChild(childNodes[i]);
    }

    // 예상과 다르게 $fruits 요소의 모든 자식 노드가 삭제되지 않는다.
    console.log(childNodes); // NodeList(2) [li, li]
  </script>
</html>

따라서 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이든 NodeList든 배열로 변환하여 사용할 것을 권장한다.

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits">
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </body>
  <script>
    const $fruits = document.getElementById('fruits');

    // childNodes 프로퍼티는 NodeList 객체(live)를 반환한다.
    const { childNodes } = $fruits;

    // 스프레드 문법을 사용하여 NodeList 객체를 배열로 변환한다.
    [...childNodes].forEach(childNode => {
      $fruits.removeChild(childNode);
    });

    // $fruits 요소의 모든 자식 노드가 모두 삭제되었다.
    console.log(childNodes); // NodeList []
  </script>
</html>

저작자표시

'사부작사부작 > Javascript' 카테고리의 다른 글

[Javascript]DOM (3) Attribute (0)	2022.05.02
[Javascript]DOM(2) node 탐색과 조작 (0)	2022.05.01
[Javascript]브라우저 렌더링 (0)	2022.04.29
[Javascript]Set과 Map (0)	2022.04.28
[Javascript]구조 분해 할당(디스트럭처링 할당) (0)	2022.04.26

ABOUT ME

Way in Wayne

노드

1. HTML 요소와 노드 객체

2. 노드 객체의 타입

3. 노드 객체의 상속 구조

요소 노드 취득

1. id를 이용한 요소 노드 취득

2. 태그 이름을 이용한 요소 노드 취득

3. class를 이용한 요소 노드 취득

4. CSS 선택자를 이용한 요소 노드 취득

5. 특정 요소 노드를 취득할 수 있는지 확인

6. HTMLCollection과 NodeList

'사부작사부작 > Javascript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

노드

1. HTML 요소와 노드 객체

2. 노드 객체의 타입

3. 노드 객체의 상속 구조

요소 노드 취득

1. id를 이용한 요소 노드 취득

2. 태그 이름을 이용한 요소 노드 취득

3. class를 이용한 요소 노드 취득

4. CSS 선택자를 이용한 요소 노드 취득

5. 특정 요소 노드를 취득할 수 있는지 확인

6. HTMLCollection과 NodeList

'사부작사부작 > Javascript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바