본문 바로가기
JS

모던 자바스크립트 Deep Dive - DOM 1

by 학식러 2024. 2. 9.

 

39장 DOM

  • DOM : HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조.

노드

1 ) HTML 요소와 노드 객체

  • HTML 요소 : HTML 문서를 구성하는 개별적인 요소.

 

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

 

  • HTML 문서는 HTML 요소들의 집합으로 이루어지고, 중첩 관계를 가짐.
  • 이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부자 관계가 형성됨.
  • 이러한 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성함.

2 ) 노드 객체의 타입

예를 들어, 다음 HTML 문서를 렌더링 엔진이 파싱한다고 생각해보자.

<!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가지.
  • 문서 노드(document)
    • DOM 트리 최상위 존재하는 루트 노드로, document 객체를 가리킴.
    • document 객체는 HTML 문서 전체를 가리키는 객체로, 전역 객체 window의 document 프로퍼티에 바인딩되어 있음.
    • 따라서 문서 노드는 window.document 또는 document로 참조 가능.
    • 브라우저 환경의 모든 JS 코드는 script 태그에 의해 분리되어 있어도 하나의 전역 객체 window를 공유함. 따라서 모든 JS 코드는 전역 객체 window의 document 프로퍼티에 바인딩 되어 있는 하나의 document 객체를 바라봄. 즉, HTML 문서당 document 객체는 유일함.
    • 문서 노드, 즉 document 객체는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당함. 즉, 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야함.
  • 요소 노드(element)
    • 요소 노드는 HTML 요소를 가리키는 객체.
    • HTML 요소 간의 중첩에 의해 부자 관계를 가지고 이 부자 관계를 통해 정보를 구조화함.
    • 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있음.
  • 어트리뷰트 노드(atrribute)
    • HTML 요소의 어트리뷰를 가리키는 객체.
    • 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고 요소 노드에만 연결되어 있음.
    • 부모 노드가 없으므로 요소 노드의 형제 노드는 아님.
    • 따라서 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야함.
  • 텍스트 노드(text)
    • HTML 요소의 텍스트를 가리키는 객체.
    • 요소 노드가 문서의 구조를 표현한다면 텍스트 노드는 문서의 정보를 표현함.
    • 요소 노드의 자식 노드. 자식 노드를 가질 수 없는 리프 노드.
    • DOM 트리의 최종단.
    • 따라서 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야함.

3 ) 노드 객체의 상속 구조

  • DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있음.
  • 이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있고, 자신의 어트리뷰트와 텍스트를 조작할 수 있음.
  • 노드 객체는 브라우저 환경에서 추가적으로 제공하는 호스트 객체다.
  • 하지만 노드 객체도 JS 객체이므로 프로토타입에 의한 상속 구조를 갖는다.

 

  • 위 그림과 같이 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받음.
  • 문서 노드는 Document, HTMLDocument 인터페이스를 상속받음.
  • 어트리뷰트 노드는 Attr, 텍스트 노드는 CharacterData 인터페이스를 상속받음.
  • 요소 노드는 Element 인터페이스를 상속받고, 추가적으로 HTMLElement와 태그의 종류별로 세분화된 HTMLHtmlElement, … 등의 인터페이스를 상속받음.
  • 이를 프로토타입 체인 관점에서 살펴보면 예를 들어, input 요소를 파싱하여 객체화한 input 요소 노드 객체는 HTMLInputElement, HTMLElement, … 의 prototype에 바인딩되어 있는 프로토타입 객체를 상속받음.
  • 즉, input 요소 노드 객체는 프로토타입 체인에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용할 수 있음.

 

39-02

<!DOCTYPE html>
<html>
<body>
  <input type="text">
  <script>
    // input 요소 노드 객체를 선택
    const $input = document.querySelector('input');

    // input 요소 노드 객체의 프로토타입 체인
    console.log(
      Object.getPrototypeOf($input) === HTMLInputElement.prototype,
      Object.getPrototypeOf(HTMLInputElement.prototype) === HTMLElement.prototype,
      Object.getPrototypeOf(HTMLElement.prototype) === Element.prototype,
      Object.getPrototypeOf(Element.prototype) === Node.prototype,
      Object.getPrototypeOf(Node.prototype) === EventTarget.prototype,
      Object.getPrototypeOf(EventTarget.prototype) === Object.prototype
    ); // 모두 true
  </script>
</body>
</html>
  • 배열이 객체인 동시에 배열인 것처럼 input 요소 노드 객체도 다음과 같이 다양한 특성을 갖는 객체.
  • 그리고 이러한 특성을 나타내는 기능들을 상속을 통해 제공받음.

 

input 요소 노드 객체의 특성 프로토타입을 제공하는 객체
객체 Object
이벤트를 발생시키는 객체 EventTarget
트리 자료구조의 노드 객체 Node
브라우저가 렌더링할 수 있는 웹 문서의 요소(HTML, XML, SVG)를 표현하는 객체 Element
웹 문서의 요소 중에서 HTML 요소를 표현하는 객체 HTMLElement
HTML 요소 중에서 input 요소를 표현하는 객체 HTMLInputElement
  • 노드 객체의 상속 구조는 개발자 도구의 Elements 패널 우측의 Properties 패널에서 확인 가능.
  • 노드 객체에는 노드 타입에 상관없이 공통으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있음.
  • ex) 모든 노드 객체는 공통적으로 이벤트를 발생시킬 수 있음.이 같은 노드 관련 기능은 Node 인터페이스가 제공함.
  • 이벤트에 관련된 기능(EventTarget.addEventListener, …)은 탐색 기능(Node.parentNode, Node.childNodes, Node.previousSibling, …)이나 노드 정보 제공 기능(Node.nodeType, …)이 필요.
  • HTML 요소가 객체화된 요소 노드 객체는 HTML 요소가 갖는 공통적인 기능이 있음.이처럼 HTML 요소가 갖는 공통적인 기능은 HTMLElement 인터페이스가 제공함.
  • ex) input 요소 노드 객체와 div 요소 노드 객체는 모두 HTML 요소의 스타일을 나타내는 style 프로퍼티가 있음.
  • 하지만 요소 노드 객체는 HTML 요소의 종류에 따라 고유한 기능도 있음div 요소 노드 객체는 value 프로퍼티가 필요하지 않음.
  • ex) input 요소 노드 객체는 value 프로퍼티가 필요,
  • 따라서 필요한 기능을 제공하는 인터페이스(HTMLInputElement, HTMLDivElement 등)가 HTML 요소의 종류에 따라 각각 다름.
  • 이처럼 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 하위에 프로토타입 체인을 구축하여 노드 객체에 필요한 기능, 즉 프로퍼티와 메서드를 제공하는 상속구조를 갖는다.
  • DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론,
  • 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집한인 DOM API로 제공함.
  • 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있음.
  • 노드 객체의 상속 구조를 자세히 알 필요는 없음.
  • 중요한 것은 DOM API, 즉 DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근하고 HTML의 구조나 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것임.

요소 노드 취득

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

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

39-03

<!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 요소가 존재하지 않는 경우 null을 반환함.

39-05

<!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>
  • HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수효과가 있음.

39-06

<!DOCTYPE html>
<html>
  <body>
    <div id="foo"></div>
    <script>
      // id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당된다.
      console.log(foo === document.getElementById('foo')); // true

      // 암묵적 전역으로 생성된 전역 프로퍼티는 삭제되지만 전역 변수는 삭제되지 않는다.
      delete foo;
      console.log(foo); // <div id="foo"></div>
    </script>
  </body>
</html>
  • 단, id 값과 동일한 이름의 전역변수가 이미 선언되어 있으면 전역 변수에 노드 객체가 재할당되지 않음.

39-07

<!DOCTYPE html>
<html>
  <body>
    <div id="foo"></div>
    <script>
      let foo = 1;

      // id 값과 동일한 이름의 전역 변수가 이미 선언되어 있으면 노드 객체가 재할당되지 않는다.
      console.log(foo); // 1
    </script>
  </body>
</html>

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

  • Document.prototype/Element.rptotype.getElementsByTagName
  • 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환함.

39-08

<!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>
  • DOM 컬렉션 객체인 HTMLCollection 객체는 유사 배열 객체이면서 이터러블임.
  • HTML 문서의 모든 요소 노드를 취득하려면 getElementsByTagName 메서드의 인수로 ‘*’을 전달.

39-09

// 모든 요소 노드를 탐색하여 반환한다.
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]
  • 만약 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우 getElementsByTagName 메서드는 빈 HTMLCollection 객체를 반환함.

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

  • Document.prototype/Element.prototype.getElementByClassName

39-11

<!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>

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

39-13

/* 전체 선택자: 모든 요소를 선택 */
* { ... }
/* 태그 선택자: 모든 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

39-14

<!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
  • 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체를 반환함.
  • NodeList 객체는 유사 배열 객체이면서 이터러블임.

39-15

<!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>

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

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

39-17

<!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>
  • matches는 이벤트 위임을 사용할 때 유용함. 40.7절에서 자세히

6 ) HTMLCollection과 NodeList

  • DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다.
  • 둘 다 유사 배열 객체이면서 이터러블. 따라서 for … of 문으로 순회 가능, 스프레드 문법 사용 가능.
  • 중요 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 객체라는 것.
  • HTMLCollection은 언제나 live 객체로 동작함.
  • 단 NodeList는 대부분의 경우 노드 객체의 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있음.

6-1 ) HTMLCollection

  • getElementsByTagName, getElementByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션 객체.

39-18

<!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>
  • 예상 : 모든 요소의 class 값을 ‘red’ 에서 ‘blue’로 변경 → 모든 li 요소의 class 값이 blue로 변경되어 파란색으로 렌더링
  • 현실 : 두번째 li 요소만 class 값이 그대로 red
  • 예상대로 동작하지 않은 이유

1 ) 첫번째 반복(i === 0)

$elems[0] 요소는 className에 의해 ‘red’에서 ‘blue’로 바뀜.

이때 class 값이 바뀌어서 getElementsByClassName 메서드 인자로 전달한 ‘red’와 더는 일치하지 않기 떄문에 $elems에서 실시간으로 제거됨.

이처럼 HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하는 살아있는 DOM 컬렉션 객체임.

2 ) 두번째 반복(i === 1)

첫번째 반복에서 첫번째 li 요소는 $elems에서 제거됨.

따라서 $elems[1]은 세번째 li 요소임.

이 세번째 요소의 class값도 blue로 변경되고 $elems에서 실시간으로 제거됨.

3 ) 세번째 반복(i === 2)

첫번째 두번째 반복에서 첫번째 세번째 li 요소가 $elems에서 제거됨.

따라서 $elems에는 두번째 li요소 노드만 남음.

이때 $elems.length는 1이므로 for 문의 조건식 i<$elems.length가 false로 평가되어 반복 종료됨.

따라서 $elems에 남아있는 두번째 li 요소의 class값은 변경되지 않음.

  • 해결법

1 ) for문을 역방향으로 순회

39-19

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

2 ) while문 사용하여 HTMLCollection 객체에 노드 객체가 남아 있지 않을 때까지 무한 반복

39-20

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

3 ) 부작용을 반생시키는 원인인 HTMLCollection 객체를 사용하지 않는 것.

대신 배열로 변환하고 배열의 고차함수(forEach, map, filter, reduce 등)을 사용.

39-21

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

6-2 ) NodeList

  • HTMLCollection 객체의 부작용을 해결
  • getElementByTagName, getElementByClassName 메서드 대신 querySelectorAll 메서드 사용
  • querySelectorAll 메서드는 DOM 컬렉션 객체인 NodeList 객체를 반환함.
  • 실시간으로 노드 객체의 상태 변경을 반영하지 않는 객체임.

39-22

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

// NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용할 수 있다.
$elems.forEach(elem => elem.className = 'blue');
  • forEach, item, entries, keys, values 사용 가능.
  • non-live 객체로 동작하지만 childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요.

39-23

<!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>
  • HTMLCollection이나 NodeList 객체는 예상과 다르게 동작할 떄가 있다.
  • 따라서 노드 객체의 상태 변경과 관계 없이 안전하게 DOM 컬렉션을 사용하려면 배열로 변환하여 사용하는 것을 권장.
  • HTMLCollection이나 NodeList 객체는 스프레드 문법, Array.from 메서드를 활용하여 배열로 변환 가능하다.

39-24

<!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>

39장 DOM

  • DOM : HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조.

노드

1 ) HTML 요소와 노드 객체

  • HTML 요소 : HTML 문서를 구성하는 개별적인 요소.
  • HTML 요소는 렌더링 엔진에 의해 파싱됨. → DOM을 구성하는 요소 노드 객체로 변환됨.
  • 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환됨.
  • HTML 문서는 HTML 요소들의 집합으로 이루어지고, 중첩 관계를 가짐.
  • 이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부자 관계가 형성됨.
  • 이러한 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성함.

2 ) 노드 객체의 타입

예를 들어, 다음 HTML 문서를 렌더링 엔진이 파싱한다고 생각해보자.

<!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가지.
  • 문서 노드(document)
    • DOM 트리 최상위 존재하는 루트 노드로, document 객체를 가리킴.
    • document 객체는 HTML 문서 전체를 가리키는 객체로, 전역 객체 window의 document 프로퍼티에 바인딩되어 있음.
    • 따라서 문서 노드는 window.document 또는 document로 참조 가능.
    • 브라우저 환경의 모든 JS 코드는 script 태그에 의해 분리되어 있어도 하나의 전역 객체 window를 공유함. 따라서 모든 JS 코드는 전역 객체 window의 document 프로퍼티에 바인딩 되어 있는 하나의 document 객체를 바라봄. 즉, HTML 문서당 document 객체는 유일함.
    • 문서 노드, 즉 document 객체는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당함. 즉, 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야함.
  • 요소 노드(element)
    • 요소 노드는 HTML 요소를 가리키는 객체.
    • HTML 요소 간의 중첩에 의해 부자 관계를 가지고 이 부자 관계를 통해 정보를 구조화함.
    • 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있음.
  • 어트리뷰트 노드(atrribute)
    • HTML 요소의 어트리뷰를 가리키는 객체.
    • 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고 요소 노드에만 연결되어 있음.
    • 부모 노드가 없으므로 요소 노드의 형제 노드는 아님.
    • 따라서 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야함.
  • 텍스트 노드(text)
    • HTML 요소의 텍스트를 가리키는 객체.
    • 요소 노드가 문서의 구조를 표현한다면 텍스트 노드는 문서의 정보를 표현함.
    • 요소 노드의 자식 노드. 자식 노드를 가질 수 없는 리프 노드.
    • DOM 트리의 최종단.
    • 따라서 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야함.

3 ) 노드 객체의 상속 구조

  • DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있음.
  • 이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있고, 자신의 어트리뷰트와 텍스트를 조작할 수 있음.
  • 노드 객체는 브라우저 환경에서 추가적으로 제공하는 호스트 객체다.
  • 하지만 노드 객체도 JS 객체이므로 프로토타입에 의한 상속 구조를 갖는다.
  • 위 그림과 같이 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받음.
  • 문서 노드는 Document, HTMLDocument 인터페이스를 상속받음.
  • 어트리뷰트 노드는 Attr, 텍스트 노드는 CharacterData 인터페이스를 상속받음.
  • 요소 노드는 Element 인터페이스를 상속받고, 추가적으로 HTMLElement와 태그의 종류별로 세분화된 HTMLHtmlElement, … 등의 인터페이스를 상속받음.
  • 이를 프로토타입 체인 관점에서 살펴보면 예를 들어, input 요소를 파싱하여 객체화한 input 요소 노드 객체는 HTMLInputElement, HTMLElement, … 의 prototype에 바인딩되어 있는 프로토타입 객체를 상속받음.
  • 즉, input 요소 노드 객체는 프로토타입 체인에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용할 수 있음.

39-02

<!DOCTYPE html>
<html>
<body>
  <input type="text">
  <script>
    // input 요소 노드 객체를 선택
    const $input = document.querySelector('input');

    // input 요소 노드 객체의 프로토타입 체인
    console.log(
      Object.getPrototypeOf($input) === HTMLInputElement.prototype,
      Object.getPrototypeOf(HTMLInputElement.prototype) === HTMLElement.prototype,
      Object.getPrototypeOf(HTMLElement.prototype) === Element.prototype,
      Object.getPrototypeOf(Element.prototype) === Node.prototype,
      Object.getPrototypeOf(Node.prototype) === EventTarget.prototype,
      Object.getPrototypeOf(EventTarget.prototype) === Object.prototype
    ); // 모두 true
  </script>
</body>
</html>
  • 배열이 객체인 동시에 배열인 것처럼 input 요소 노드 객체도 다음과 같이 다양한 특성을 갖는 객체.
  • 그리고 이러한 특성을 나타내는 기능들을 상속을 통해 제공받음.

input 요소 노드 객체의 특성 프로토타입을 제공하는 객체

객체 Object
이벤트를 발생시키는 객체 EventTarget
트리 자료구조의 노드 객체 Node
브라우저가 렌더링할 수 있는 웹 문서의 요소(HTML, XML, SVG)를 표현하는 객체 Element
웹 문서의 요소 중에서 HTML 요소를 표현하는 객체 HTMLElement
HTML 요소 중에서 input 요소를 표현하는 객체 HTMLInputElement
  • 노드 객체의 상속 구조는 개발자 도구의 Elements 패널 우측의 Properties 패널에서 확인 가능.
  • 노드 객체에는 노드 타입에 상관없이 공통으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있음.
  • ex) 모든 노드 객체는 공통적으로 이벤트를 발생시킬 수 있음.이 같은 노드 관련 기능은 Node 인터페이스가 제공함.
  • 이벤트에 관련된 기능(EventTarget.addEventListener, …)은 탐색 기능(Node.parentNode, Node.childNodes, Node.previousSibling, …)이나 노드 정보 제공 기능(Node.nodeType, …)이 필요.
  • HTML 요소가 객체화된 요소 노드 객체는 HTML 요소가 갖는 공통적인 기능이 있음.이처럼 HTML 요소가 갖는 공통적인 기능은 HTMLElement 인터페이스가 제공함.
  • ex) input 요소 노드 객체와 div 요소 노드 객체는 모두 HTML 요소의 스타일을 나타내는 style 프로퍼티가 있음.
  • 하지만 요소 노드 객체는 HTML 요소의 종류에 따라 고유한 기능도 있음div 요소 노드 객체는 value 프로퍼티가 필요하지 않음.
  • ex) input 요소 노드 객체는 value 프로퍼티가 필요,
  • 따라서 필요한 기능을 제공하는 인터페이스(HTMLInputElement, HTMLDivElement 등)가 HTML 요소의 종류에 따라 각각 다름.
  • 이처럼 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 하위에 프로토타입 체인을 구축하여 노드 객체에 필요한 기능, 즉 프로퍼티와 메서드를 제공하는 상속구조를 갖는다.
  • DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론,
  • 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집한인 DOM API로 제공함.
  • 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있음.
  • 노드 객체의 상속 구조를 자세히 알 필요는 없음.
  • 중요한 것은 DOM API, 즉 DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근하고 HTML의 구조나 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것임.

요소 노드 취득

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

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

39-03

<!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 요소가 존재하지 않는 경우 null을 반환함.

39-05

<!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>
  • HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수효과가 있음.

39-06

<!DOCTYPE html>
<html>
  <body>
    <div id="foo"></div>
    <script>
      // id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당된다.
      console.log(foo === document.getElementById('foo')); // true

      // 암묵적 전역으로 생성된 전역 프로퍼티는 삭제되지만 전역 변수는 삭제되지 않는다.
      delete foo;
      console.log(foo); // <div id="foo"></div>
    </script>
  </body>
</html>
  • 단, id 값과 동일한 이름의 전역변수가 이미 선언되어 있으면 전역 변수에 노드 객체가 재할당되지 않음.

39-07

<!DOCTYPE html>
<html>
  <body>
    <div id="foo"></div>
    <script>
      let foo = 1;

      // id 값과 동일한 이름의 전역 변수가 이미 선언되어 있으면 노드 객체가 재할당되지 않는다.
      console.log(foo); // 1
    </script>
  </body>
</html>

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

  • Document.prototype/Element.rptotype.getElementsByTagName
  • 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환함.

39-08

<!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>
  • DOM 컬렉션 객체인 HTMLCollection 객체는 유사 배열 객체이면서 이터러블임.
  • HTML 문서의 모든 요소 노드를 취득하려면 getElementsByTagName 메서드의 인수로 ‘*’을 전달.

39-09

// 모든 요소 노드를 탐색하여 반환한다.
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]
  • 만약 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우 getElementsByTagName 메서드는 빈 HTMLCollection 객체를 반환함.

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

  • Document.prototype/Element.prototype.getElementByClassName

39-11

<!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>

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

39-13

/* 전체 선택자: 모든 요소를 선택 */
* { ... }
/* 태그 선택자: 모든 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

39-14

<!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
  • 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체를 반환함.
  • NodeList 객체는 유사 배열 객체이면서 이터러블임.

39-15

<!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>

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

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

39-17

<!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>
  • matches는 이벤트 위임을 사용할 때 유용함. 40.7절에서 자세히

6 ) HTMLCollection과 NodeList

  • DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다.
  • 둘 다 유사 배열 객체이면서 이터러블. 따라서 for … of 문으로 순회 가능, 스프레드 문법 사용 가능.
  • 중요 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 객체라는 것.
  • HTMLCollection은 언제나 live 객체로 동작함.
  • 단 NodeList는 대부분의 경우 노드 객체의 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있음.

6-1 ) HTMLCollection

  • getElementsByTagName, getElementByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션 객체.

39-18

<!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>
  • 예상 : 모든 요소의 class 값을 ‘red’ 에서 ‘blue’로 변경 → 모든 li 요소의 class 값이 blue로 변경되어 파란색으로 렌더링
  • 현실 : 두번째 li 요소만 class 값이 그대로 red
  • 예상대로 동작하지 않은 이유

1 ) 첫번째 반복(i === 0)

$elems[0] 요소는 className에 의해 ‘red’에서 ‘blue’로 바뀜.

이때 class 값이 바뀌어서 getElementsByClassName 메서드 인자로 전달한 ‘red’와 더는 일치하지 않기 떄문에 $elems에서 실시간으로 제거됨.

이처럼 HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하는 살아있는 DOM 컬렉션 객체임.

2 ) 두번째 반복(i === 1)

첫번째 반복에서 첫번째 li 요소는 $elems에서 제거됨.

따라서 $elems[1]은 세번째 li 요소임.

이 세번째 요소의 class값도 blue로 변경되고 $elems에서 실시간으로 제거됨.

3 ) 세번째 반복(i === 2)

첫번째 두번째 반복에서 첫번째 세번째 li 요소가 $elems에서 제거됨.

따라서 $elems에는 두번째 li요소 노드만 남음.

이때 $elems.length는 1이므로 for 문의 조건식 i<$elems.length가 false로 평가되어 반복 종료됨.

따라서 $elems에 남아있는 두번째 li 요소의 class값은 변경되지 않음.

  • 해결법

1 ) for문을 역방향으로 순회

39-19

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

2 ) while문 사용하여 HTMLCollection 객체에 노드 객체가 남아 있지 않을 때까지 무한 반복

39-20

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

3 ) 부작용을 반생시키는 원인인 HTMLCollection 객체를 사용하지 않는 것.

대신 배열로 변환하고 배열의 고차함수(forEach, map, filter, reduce 등)을 사용.

39-21

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

6-2 ) NodeList

  • HTMLCollection 객체의 부작용을 해결
  • getElementByTagName, getElementByClassName 메서드 대신 querySelectorAll 메서드 사용
  • querySelectorAll 메서드는 DOM 컬렉션 객체인 NodeList 객체를 반환함.
  • 실시간으로 노드 객체의 상태 변경을 반영하지 않는 객체임.

39-22

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

// NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용할 수 있다.
$elems.forEach(elem => elem.className = 'blue');
  • forEach, item, entries, keys, values 사용 가능.
  • non-live 객체로 동작하지만 childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요.

39-23

<!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>
  • HTMLCollection이나 NodeList 객체는 예상과 다르게 동작할 떄가 있다.
  • 따라서 노드 객체의 상태 변경과 관계 없이 안전하게 DOM 컬렉션을 사용하려면 배열로 변환하여 사용하는 것을 권장.
  • HTMLCollection이나 NodeList 객체는 스프레드 문법, Array.from 메서드를 활용하여 배열로 변환 가능하다.

39-24

<!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>

39장 DOM

  • DOM : HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조.

노드

1 ) HTML 요소와 노드 객체

  • HTML 요소 : HTML 문서를 구성하는 개별적인 요소.
  • HTML 요소는 렌더링 엔진에 의해 파싱됨. → DOM을 구성하는 요소 노드 객체로 변환됨.
  • 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환됨.
  • HTML 문서는 HTML 요소들의 집합으로 이루어지고, 중첩 관계를 가짐.
  • 이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부자 관계가 형성됨.
  • 이러한 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성함.

2 ) 노드 객체의 타입

예를 들어, 다음 HTML 문서를 렌더링 엔진이 파싱한다고 생각해보자.

<!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가지.
  • 문서 노드(document)
    • DOM 트리 최상위 존재하는 루트 노드로, document 객체를 가리킴.
    • document 객체는 HTML 문서 전체를 가리키는 객체로, 전역 객체 window의 document 프로퍼티에 바인딩되어 있음.
    • 따라서 문서 노드는 window.document 또는 document로 참조 가능.
    • 브라우저 환경의 모든 JS 코드는 script 태그에 의해 분리되어 있어도 하나의 전역 객체 window를 공유함. 따라서 모든 JS 코드는 전역 객체 window의 document 프로퍼티에 바인딩 되어 있는 하나의 document 객체를 바라봄. 즉, HTML 문서당 document 객체는 유일함.
    • 문서 노드, 즉 document 객체는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당함. 즉, 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야함.
  • 요소 노드(element)
    • 요소 노드는 HTML 요소를 가리키는 객체.
    • HTML 요소 간의 중첩에 의해 부자 관계를 가지고 이 부자 관계를 통해 정보를 구조화함.
    • 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있음.
  • 어트리뷰트 노드(atrribute)
    • HTML 요소의 어트리뷰를 가리키는 객체.
    • 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고 요소 노드에만 연결되어 있음.
    • 부모 노드가 없으므로 요소 노드의 형제 노드는 아님.
    • 따라서 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야함.
  • 텍스트 노드(text)
    • HTML 요소의 텍스트를 가리키는 객체.
    • 요소 노드가 문서의 구조를 표현한다면 텍스트 노드는 문서의 정보를 표현함.
    • 요소 노드의 자식 노드. 자식 노드를 가질 수 없는 리프 노드.
    • DOM 트리의 최종단.
    • 따라서 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야함.

3 ) 노드 객체의 상속 구조

  • DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있음.
  • 이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있고, 자신의 어트리뷰트와 텍스트를 조작할 수 있음.
  • 노드 객체는 브라우저 환경에서 추가적으로 제공하는 호스트 객체다.
  • 하지만 노드 객체도 JS 객체이므로 프로토타입에 의한 상속 구조를 갖는다.
  • 위 그림과 같이 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받음.
  • 문서 노드는 Document, HTMLDocument 인터페이스를 상속받음.
  • 어트리뷰트 노드는 Attr, 텍스트 노드는 CharacterData 인터페이스를 상속받음.
  • 요소 노드는 Element 인터페이스를 상속받고, 추가적으로 HTMLElement와 태그의 종류별로 세분화된 HTMLHtmlElement, … 등의 인터페이스를 상속받음.
  • 이를 프로토타입 체인 관점에서 살펴보면 예를 들어, input 요소를 파싱하여 객체화한 input 요소 노드 객체는 HTMLInputElement, HTMLElement, … 의 prototype에 바인딩되어 있는 프로토타입 객체를 상속받음.
  • 즉, input 요소 노드 객체는 프로토타입 체인에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용할 수 있음.

39-02

<!DOCTYPE html>
<html>
<body>
  <input type="text">
  <script>
    // input 요소 노드 객체를 선택
    const $input = document.querySelector('input');

    // input 요소 노드 객체의 프로토타입 체인
    console.log(
      Object.getPrototypeOf($input) === HTMLInputElement.prototype,
      Object.getPrototypeOf(HTMLInputElement.prototype) === HTMLElement.prototype,
      Object.getPrototypeOf(HTMLElement.prototype) === Element.prototype,
      Object.getPrototypeOf(Element.prototype) === Node.prototype,
      Object.getPrototypeOf(Node.prototype) === EventTarget.prototype,
      Object.getPrototypeOf(EventTarget.prototype) === Object.prototype
    ); // 모두 true
  </script>
</body>
</html>
  • 배열이 객체인 동시에 배열인 것처럼 input 요소 노드 객체도 다음과 같이 다양한 특성을 갖는 객체.
  • 그리고 이러한 특성을 나타내는 기능들을 상속을 통해 제공받음.

input 요소 노드 객체의 특성 프로토타입을 제공하는 객체

객체 Object
이벤트를 발생시키는 객체 EventTarget
트리 자료구조의 노드 객체 Node
브라우저가 렌더링할 수 있는 웹 문서의 요소(HTML, XML, SVG)를 표현하는 객체 Element
웹 문서의 요소 중에서 HTML 요소를 표현하는 객체 HTMLElement
HTML 요소 중에서 input 요소를 표현하는 객체 HTMLInputElement
  • 노드 객체의 상속 구조는 개발자 도구의 Elements 패널 우측의 Properties 패널에서 확인 가능.
  • 노드 객체에는 노드 타입에 상관없이 공통으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있음.
  • ex) 모든 노드 객체는 공통적으로 이벤트를 발생시킬 수 있음.이 같은 노드 관련 기능은 Node 인터페이스가 제공함.
  • 이벤트에 관련된 기능(EventTarget.addEventListener, …)은 탐색 기능(Node.parentNode, Node.childNodes, Node.previousSibling, …)이나 노드 정보 제공 기능(Node.nodeType, …)이 필요.
  • HTML 요소가 객체화된 요소 노드 객체는 HTML 요소가 갖는 공통적인 기능이 있음.이처럼 HTML 요소가 갖는 공통적인 기능은 HTMLElement 인터페이스가 제공함.
  • ex) input 요소 노드 객체와 div 요소 노드 객체는 모두 HTML 요소의 스타일을 나타내는 style 프로퍼티가 있음.
  • 하지만 요소 노드 객체는 HTML 요소의 종류에 따라 고유한 기능도 있음div 요소 노드 객체는 value 프로퍼티가 필요하지 않음.
  • ex) input 요소 노드 객체는 value 프로퍼티가 필요,
  • 따라서 필요한 기능을 제공하는 인터페이스(HTMLInputElement, HTMLDivElement 등)가 HTML 요소의 종류에 따라 각각 다름.
  • 이처럼 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 하위에 프로토타입 체인을 구축하여 노드 객체에 필요한 기능, 즉 프로퍼티와 메서드를 제공하는 상속구조를 갖는다.
  • DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론,
  • 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집한인 DOM API로 제공함.
  • 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있음.
  • 노드 객체의 상속 구조를 자세히 알 필요는 없음.
  • 중요한 것은 DOM API, 즉 DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근하고 HTML의 구조나 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것임.

요소 노드 취득

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

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

39-03

<!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 요소가 존재하지 않는 경우 null을 반환함.

39-05

<!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>
  • HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수효과가 있음.

39-06

<!DOCTYPE html>
<html>
  <body>
    <div id="foo"></div>
    <script>
      // id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당된다.
      console.log(foo === document.getElementById('foo')); // true

      // 암묵적 전역으로 생성된 전역 프로퍼티는 삭제되지만 전역 변수는 삭제되지 않는다.
      delete foo;
      console.log(foo); // <div id="foo"></div>
    </script>
  </body>
</html>
  • 단, id 값과 동일한 이름의 전역변수가 이미 선언되어 있으면 전역 변수에 노드 객체가 재할당되지 않음.

39-07

<!DOCTYPE html>
<html>
  <body>
    <div id="foo"></div>
    <script>
      let foo = 1;

      // id 값과 동일한 이름의 전역 변수가 이미 선언되어 있으면 노드 객체가 재할당되지 않는다.
      console.log(foo); // 1
    </script>
  </body>
</html>

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

  • Document.prototype/Element.rptotype.getElementsByTagName
  • 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환함.

39-08

<!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>
  • DOM 컬렉션 객체인 HTMLCollection 객체는 유사 배열 객체이면서 이터러블임.
  • HTML 문서의 모든 요소 노드를 취득하려면 getElementsByTagName 메서드의 인수로 ‘*’을 전달.

39-09

// 모든 요소 노드를 탐색하여 반환한다.
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]
  • 만약 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우 getElementsByTagName 메서드는 빈 HTMLCollection 객체를 반환함.

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

  • Document.prototype/Element.prototype.getElementByClassName

39-11

<!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>

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

39-13

/* 전체 선택자: 모든 요소를 선택 */
* { ... }
/* 태그 선택자: 모든 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

39-14

<!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
  • 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체를 반환함.
  • NodeList 객체는 유사 배열 객체이면서 이터러블임.

39-15

<!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>

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

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

39-17

<!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>
  • matches는 이벤트 위임을 사용할 때 유용함. 40.7절에서 자세히

6 ) HTMLCollection과 NodeList

  • DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다.
  • 둘 다 유사 배열 객체이면서 이터러블. 따라서 for … of 문으로 순회 가능, 스프레드 문법 사용 가능.
  • 중요 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 객체라는 것.
  • HTMLCollection은 언제나 live 객체로 동작함.
  • 단 NodeList는 대부분의 경우 노드 객체의 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있음.

6-1 ) HTMLCollection

  • getElementsByTagName, getElementByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션 객체.

39-18

<!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>
  • 예상 : 모든 요소의 class 값을 ‘red’ 에서 ‘blue’로 변경 → 모든 li 요소의 class 값이 blue로 변경되어 파란색으로 렌더링
  • 현실 : 두번째 li 요소만 class 값이 그대로 red
  • 예상대로 동작하지 않은 이유

1 ) 첫번째 반복(i === 0)

$elems[0] 요소는 className에 의해 ‘red’에서 ‘blue’로 바뀜.

이때 class 값이 바뀌어서 getElementsByClassName 메서드 인자로 전달한 ‘red’와 더는 일치하지 않기 떄문에 $elems에서 실시간으로 제거됨.

이처럼 HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하는 살아있는 DOM 컬렉션 객체임.

2 ) 두번째 반복(i === 1)

첫번째 반복에서 첫번째 li 요소는 $elems에서 제거됨.

따라서 $elems[1]은 세번째 li 요소임.

이 세번째 요소의 class값도 blue로 변경되고 $elems에서 실시간으로 제거됨.

3 ) 세번째 반복(i === 2)

첫번째 두번째 반복에서 첫번째 세번째 li 요소가 $elems에서 제거됨.

따라서 $elems에는 두번째 li요소 노드만 남음.

이때 $elems.length는 1이므로 for 문의 조건식 i<$elems.length가 false로 평가되어 반복 종료됨.

따라서 $elems에 남아있는 두번째 li 요소의 class값은 변경되지 않음.

  • 해결법

1 ) for문을 역방향으로 순회

39-19

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

2 ) while문 사용하여 HTMLCollection 객체에 노드 객체가 남아 있지 않을 때까지 무한 반복

39-20

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

3 ) 부작용을 반생시키는 원인인 HTMLCollection 객체를 사용하지 않는 것.

대신 배열로 변환하고 배열의 고차함수(forEach, map, filter, reduce 등)을 사용.

39-21

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

6-2 ) NodeList

  • HTMLCollection 객체의 부작용을 해결
  • getElementByTagName, getElementByClassName 메서드 대신 querySelectorAll 메서드 사용
  • querySelectorAll 메서드는 DOM 컬렉션 객체인 NodeList 객체를 반환함.
  • 실시간으로 노드 객체의 상태 변경을 반영하지 않는 객체임.

39-22

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

// NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용할 수 있다.
$elems.forEach(elem => elem.className = 'blue');
  • forEach, item, entries, keys, values 사용 가능.
  • non-live 객체로 동작하지만 childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요.

39-23

<!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>
  • HTMLCollection이나 NodeList 객체는 예상과 다르게 동작할 떄가 있다.
  • 따라서 노드 객체의 상태 변경과 관계 없이 안전하게 DOM 컬렉션을 사용하려면 배열로 변환하여 사용하는 것을 권장.
  • HTMLCollection이나 NodeList 객체는 스프레드 문법, Array.from 메서드를 활용하여 배열로 변환 가능하다.

39-24

<!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>

39장 DOM

  • DOM : HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조.

노드

1 ) HTML 요소와 노드 객체

  • HTML 요소 : HTML 문서를 구성하는 개별적인 요소.
  • HTML 요소는 렌더링 엔진에 의해 파싱됨. → DOM을 구성하는 요소 노드 객체로 변환됨.
  • 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환됨.
  • HTML 문서는 HTML 요소들의 집합으로 이루어지고, 중첩 관계를 가짐.
  • 이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부자 관계가 형성됨.
  • 이러한 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성함.

2 ) 노드 객체의 타입

예를 들어, 다음 HTML 문서를 렌더링 엔진이 파싱한다고 생각해보자.

<!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가지.
  • 문서 노드(document)
    • DOM 트리 최상위 존재하는 루트 노드로, document 객체를 가리킴.
    • document 객체는 HTML 문서 전체를 가리키는 객체로, 전역 객체 window의 document 프로퍼티에 바인딩되어 있음.
    • 따라서 문서 노드는 window.document 또는 document로 참조 가능.
    • 브라우저 환경의 모든 JS 코드는 script 태그에 의해 분리되어 있어도 하나의 전역 객체 window를 공유함. 따라서 모든 JS 코드는 전역 객체 window의 document 프로퍼티에 바인딩 되어 있는 하나의 document 객체를 바라봄. 즉, HTML 문서당 document 객체는 유일함.
    • 문서 노드, 즉 document 객체는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당함. 즉, 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야함.
  • 요소 노드(element)
    • 요소 노드는 HTML 요소를 가리키는 객체.
    • HTML 요소 간의 중첩에 의해 부자 관계를 가지고 이 부자 관계를 통해 정보를 구조화함.
    • 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있음.
  • 어트리뷰트 노드(atrribute)
    • HTML 요소의 어트리뷰를 가리키는 객체.
    • 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고 요소 노드에만 연결되어 있음.
    • 부모 노드가 없으므로 요소 노드의 형제 노드는 아님.
    • 따라서 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야함.
  • 텍스트 노드(text)
    • HTML 요소의 텍스트를 가리키는 객체.
    • 요소 노드가 문서의 구조를 표현한다면 텍스트 노드는 문서의 정보를 표현함.
    • 요소 노드의 자식 노드. 자식 노드를 가질 수 없는 리프 노드.
    • DOM 트리의 최종단.
    • 따라서 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야함.

3 ) 노드 객체의 상속 구조

  • DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있음.
  • 이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있고, 자신의 어트리뷰트와 텍스트를 조작할 수 있음.
  • 노드 객체는 브라우저 환경에서 추가적으로 제공하는 호스트 객체다.
  • 하지만 노드 객체도 JS 객체이므로 프로토타입에 의한 상속 구조를 갖는다.
  • 위 그림과 같이 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받음.
  • 문서 노드는 Document, HTMLDocument 인터페이스를 상속받음.
  • 어트리뷰트 노드는 Attr, 텍스트 노드는 CharacterData 인터페이스를 상속받음.
  • 요소 노드는 Element 인터페이스를 상속받고, 추가적으로 HTMLElement와 태그의 종류별로 세분화된 HTMLHtmlElement, … 등의 인터페이스를 상속받음.
  • 이를 프로토타입 체인 관점에서 살펴보면 예를 들어, input 요소를 파싱하여 객체화한 input 요소 노드 객체는 HTMLInputElement, HTMLElement, … 의 prototype에 바인딩되어 있는 프로토타입 객체를 상속받음.
  • 즉, input 요소 노드 객체는 프로토타입 체인에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용할 수 있음.

39-02

<!DOCTYPE html>
<html>
<body>
  <input type="text">
  <script>
    // input 요소 노드 객체를 선택
    const $input = document.querySelector('input');

    // input 요소 노드 객체의 프로토타입 체인
    console.log(
      Object.getPrototypeOf($input) === HTMLInputElement.prototype,
      Object.getPrototypeOf(HTMLInputElement.prototype) === HTMLElement.prototype,
      Object.getPrototypeOf(HTMLElement.prototype) === Element.prototype,
      Object.getPrototypeOf(Element.prototype) === Node.prototype,
      Object.getPrototypeOf(Node.prototype) === EventTarget.prototype,
      Object.getPrototypeOf(EventTarget.prototype) === Object.prototype
    ); // 모두 true
  </script>
</body>
</html>
  • 배열이 객체인 동시에 배열인 것처럼 input 요소 노드 객체도 다음과 같이 다양한 특성을 갖는 객체.
  • 그리고 이러한 특성을 나타내는 기능들을 상속을 통해 제공받음.

input 요소 노드 객체의 특성 프로토타입을 제공하는 객체

객체 Object
이벤트를 발생시키는 객체 EventTarget
트리 자료구조의 노드 객체 Node
브라우저가 렌더링할 수 있는 웹 문서의 요소(HTML, XML, SVG)를 표현하는 객체 Element
웹 문서의 요소 중에서 HTML 요소를 표현하는 객체 HTMLElement
HTML 요소 중에서 input 요소를 표현하는 객체 HTMLInputElement
  • 노드 객체의 상속 구조는 개발자 도구의 Elements 패널 우측의 Properties 패널에서 확인 가능.
  • 노드 객체에는 노드 타입에 상관없이 공통으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있음.
  • ex) 모든 노드 객체는 공통적으로 이벤트를 발생시킬 수 있음.이 같은 노드 관련 기능은 Node 인터페이스가 제공함.
  • 이벤트에 관련된 기능(EventTarget.addEventListener, …)은 탐색 기능(Node.parentNode, Node.childNodes, Node.previousSibling, …)이나 노드 정보 제공 기능(Node.nodeType, …)이 필요.
  • HTML 요소가 객체화된 요소 노드 객체는 HTML 요소가 갖는 공통적인 기능이 있음.이처럼 HTML 요소가 갖는 공통적인 기능은 HTMLElement 인터페이스가 제공함.
  • ex) input 요소 노드 객체와 div 요소 노드 객체는 모두 HTML 요소의 스타일을 나타내는 style 프로퍼티가 있음.
  • 하지만 요소 노드 객체는 HTML 요소의 종류에 따라 고유한 기능도 있음div 요소 노드 객체는 value 프로퍼티가 필요하지 않음.
  • ex) input 요소 노드 객체는 value 프로퍼티가 필요,
  • 따라서 필요한 기능을 제공하는 인터페이스(HTMLInputElement, HTMLDivElement 등)가 HTML 요소의 종류에 따라 각각 다름.
  • 이처럼 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 하위에 프로토타입 체인을 구축하여 노드 객체에 필요한 기능, 즉 프로퍼티와 메서드를 제공하는 상속구조를 갖는다.
  • DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론,
  • 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집한인 DOM API로 제공함.
  • 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있음.
  • 노드 객체의 상속 구조를 자세히 알 필요는 없음.
  • 중요한 것은 DOM API, 즉 DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근하고 HTML의 구조나 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것임.

요소 노드 취득

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

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

39-03

<!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 요소가 존재하지 않는 경우 null을 반환함.

39-05

<!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>
  • HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수효과가 있음.

39-06

<!DOCTYPE html>
<html>
  <body>
    <div id="foo"></div>
    <script>
      // id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당된다.
      console.log(foo === document.getElementById('foo')); // true

      // 암묵적 전역으로 생성된 전역 프로퍼티는 삭제되지만 전역 변수는 삭제되지 않는다.
      delete foo;
      console.log(foo); // <div id="foo"></div>
    </script>
  </body>
</html>
  • 단, id 값과 동일한 이름의 전역변수가 이미 선언되어 있으면 전역 변수에 노드 객체가 재할당되지 않음.

39-07

<!DOCTYPE html>
<html>
  <body>
    <div id="foo"></div>
    <script>
      let foo = 1;

      // id 값과 동일한 이름의 전역 변수가 이미 선언되어 있으면 노드 객체가 재할당되지 않는다.
      console.log(foo); // 1
    </script>
  </body>
</html>

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

  • Document.prototype/Element.rptotype.getElementsByTagName
  • 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환함.

39-08

<!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>
  • DOM 컬렉션 객체인 HTMLCollection 객체는 유사 배열 객체이면서 이터러블임.
  • HTML 문서의 모든 요소 노드를 취득하려면 getElementsByTagName 메서드의 인수로 ‘*’을 전달.

39-09

// 모든 요소 노드를 탐색하여 반환한다.
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]
  • 만약 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우 getElementsByTagName 메서드는 빈 HTMLCollection 객체를 반환함.

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

  • Document.prototype/Element.prototype.getElementByClassName

39-11

<!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>

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

39-13

/* 전체 선택자: 모든 요소를 선택 */
* { ... }
/* 태그 선택자: 모든 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

39-14

<!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
  • 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체를 반환함.
  • NodeList 객체는 유사 배열 객체이면서 이터러블임.

39-15

<!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>

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

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

39-17

<!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>
  • matches는 이벤트 위임을 사용할 때 유용함. 40.7절에서 자세히

6 ) HTMLCollection과 NodeList

  • DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다.
  • 둘 다 유사 배열 객체이면서 이터러블. 따라서 for … of 문으로 순회 가능, 스프레드 문법 사용 가능.
  • 중요 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 객체라는 것.
  • HTMLCollection은 언제나 live 객체로 동작함.
  • 단 NodeList는 대부분의 경우 노드 객체의 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있음.

6-1 ) HTMLCollection

  • getElementsByTagName, getElementByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션 객체.

39-18

<!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>
  • 예상 : 모든 요소의 class 값을 ‘red’ 에서 ‘blue’로 변경 → 모든 li 요소의 class 값이 blue로 변경되어 파란색으로 렌더링
  • 현실 : 두번째 li 요소만 class 값이 그대로 red
  • 예상대로 동작하지 않은 이유

1 ) 첫번째 반복(i === 0)

$elems[0] 요소는 className에 의해 ‘red’에서 ‘blue’로 바뀜.

이때 class 값이 바뀌어서 getElementsByClassName 메서드 인자로 전달한 ‘red’와 더는 일치하지 않기 떄문에 $elems에서 실시간으로 제거됨.

이처럼 HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하는 살아있는 DOM 컬렉션 객체임.

2 ) 두번째 반복(i === 1)

첫번째 반복에서 첫번째 li 요소는 $elems에서 제거됨.

따라서 $elems[1]은 세번째 li 요소임.

이 세번째 요소의 class값도 blue로 변경되고 $elems에서 실시간으로 제거됨.

3 ) 세번째 반복(i === 2)

첫번째 두번째 반복에서 첫번째 세번째 li 요소가 $elems에서 제거됨.

따라서 $elems에는 두번째 li요소 노드만 남음.

이때 $elems.length는 1이므로 for 문의 조건식 i<$elems.length가 false로 평가되어 반복 종료됨.

따라서 $elems에 남아있는 두번째 li 요소의 class값은 변경되지 않음.

  • 해결법

1 ) for문을 역방향으로 순회

39-19

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

2 ) while문 사용하여 HTMLCollection 객체에 노드 객체가 남아 있지 않을 때까지 무한 반복

39-20

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

3 ) 부작용을 반생시키는 원인인 HTMLCollection 객체를 사용하지 않는 것.

대신 배열로 변환하고 배열의 고차함수(forEach, map, filter, reduce 등)을 사용.

39-21

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

6-2 ) NodeList

  • HTMLCollection 객체의 부작용을 해결
  • getElementByTagName, getElementByClassName 메서드 대신 querySelectorAll 메서드 사용
  • querySelectorAll 메서드는 DOM 컬렉션 객체인 NodeList 객체를 반환함.
  • 실시간으로 노드 객체의 상태 변경을 반영하지 않는 객체임.

39-22

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

// NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용할 수 있다.
$elems.forEach(elem => elem.className = 'blue');
  • forEach, item, entries, keys, values 사용 가능.
  • non-live 객체로 동작하지만 childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요.

39-23

<!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>
  • HTMLCollection이나 NodeList 객체는 예상과 다르게 동작할 떄가 있다.
  • 따라서 노드 객체의 상태 변경과 관계 없이 안전하게 DOM 컬렉션을 사용하려면 배열로 변환하여 사용하는 것을 권장.
  • HTMLCollection이나 NodeList 객체는 스프레드 문법, Array.from 메서드를 활용하여 배열로 변환 가능하다.

39-24

<!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>

39장 DOM

  • DOM : HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조.

노드

1 ) HTML 요소와 노드 객체

  • HTML 요소 : HTML 문서를 구성하는 개별적인 요소.
  • HTML 요소는 렌더링 엔진에 의해 파싱됨. → DOM을 구성하는 요소 노드 객체로 변환됨.
  • 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환됨.
  • HTML 문서는 HTML 요소들의 집합으로 이루어지고, 중첩 관계를 가짐.
  • 이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부자 관계가 형성됨.
  • 이러한 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성함.

2 ) 노드 객체의 타입

예를 들어, 다음 HTML 문서를 렌더링 엔진이 파싱한다고 생각해보자.

<!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가지.
  • 문서 노드(document)
    • DOM 트리 최상위 존재하는 루트 노드로, document 객체를 가리킴.
    • document 객체는 HTML 문서 전체를 가리키는 객체로, 전역 객체 window의 document 프로퍼티에 바인딩되어 있음.
    • 따라서 문서 노드는 window.document 또는 document로 참조 가능.
    • 브라우저 환경의 모든 JS 코드는 script 태그에 의해 분리되어 있어도 하나의 전역 객체 window를 공유함. 따라서 모든 JS 코드는 전역 객체 window의 document 프로퍼티에 바인딩 되어 있는 하나의 document 객체를 바라봄. 즉, HTML 문서당 document 객체는 유일함.
    • 문서 노드, 즉 document 객체는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당함. 즉, 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야함.
  • 요소 노드(element)
    • 요소 노드는 HTML 요소를 가리키는 객체.
    • HTML 요소 간의 중첩에 의해 부자 관계를 가지고 이 부자 관계를 통해 정보를 구조화함.
    • 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있음.
  • 어트리뷰트 노드(atrribute)
    • HTML 요소의 어트리뷰를 가리키는 객체.
    • 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고 요소 노드에만 연결되어 있음.
    • 부모 노드가 없으므로 요소 노드의 형제 노드는 아님.
    • 따라서 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야함.
  • 텍스트 노드(text)
    • HTML 요소의 텍스트를 가리키는 객체.
    • 요소 노드가 문서의 구조를 표현한다면 텍스트 노드는 문서의 정보를 표현함.
    • 요소 노드의 자식 노드. 자식 노드를 가질 수 없는 리프 노드.
    • DOM 트리의 최종단.
    • 따라서 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야함.

3 ) 노드 객체의 상속 구조

  • DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있음.
  • 이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있고, 자신의 어트리뷰트와 텍스트를 조작할 수 있음.
  • 노드 객체는 브라우저 환경에서 추가적으로 제공하는 호스트 객체다.
  • 하지만 노드 객체도 JS 객체이므로 프로토타입에 의한 상속 구조를 갖는다.
  • 위 그림과 같이 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받음.
  • 문서 노드는 Document, HTMLDocument 인터페이스를 상속받음.
  • 어트리뷰트 노드는 Attr, 텍스트 노드는 CharacterData 인터페이스를 상속받음.
  • 요소 노드는 Element 인터페이스를 상속받고, 추가적으로 HTMLElement와 태그의 종류별로 세분화된 HTMLHtmlElement, … 등의 인터페이스를 상속받음.
  • 이를 프로토타입 체인 관점에서 살펴보면 예를 들어, input 요소를 파싱하여 객체화한 input 요소 노드 객체는 HTMLInputElement, HTMLElement, … 의 prototype에 바인딩되어 있는 프로토타입 객체를 상속받음.
  • 즉, input 요소 노드 객체는 프로토타입 체인에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용할 수 있음.

39-02

<!DOCTYPE html>
<html>
<body>
  <input type="text">
  <script>
    // input 요소 노드 객체를 선택
    const $input = document.querySelector('input');

    // input 요소 노드 객체의 프로토타입 체인
    console.log(
      Object.getPrototypeOf($input) === HTMLInputElement.prototype,
      Object.getPrototypeOf(HTMLInputElement.prototype) === HTMLElement.prototype,
      Object.getPrototypeOf(HTMLElement.prototype) === Element.prototype,
      Object.getPrototypeOf(Element.prototype) === Node.prototype,
      Object.getPrototypeOf(Node.prototype) === EventTarget.prototype,
      Object.getPrototypeOf(EventTarget.prototype) === Object.prototype
    ); // 모두 true
  </script>
</body>
</html>
  • 배열이 객체인 동시에 배열인 것처럼 input 요소 노드 객체도 다음과 같이 다양한 특성을 갖는 객체.
  • 그리고 이러한 특성을 나타내는 기능들을 상속을 통해 제공받음.

input 요소 노드 객체의 특성 프로토타입을 제공하는 객체

객체 Object
이벤트를 발생시키는 객체 EventTarget
트리 자료구조의 노드 객체 Node
브라우저가 렌더링할 수 있는 웹 문서의 요소(HTML, XML, SVG)를 표현하는 객체 Element
웹 문서의 요소 중에서 HTML 요소를 표현하는 객체 HTMLElement
HTML 요소 중에서 input 요소를 표현하는 객체 HTMLInputElement
  • 노드 객체의 상속 구조는 개발자 도구의 Elements 패널 우측의 Properties 패널에서 확인 가능.
  • 노드 객체에는 노드 타입에 상관없이 공통으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있음.
  • ex) 모든 노드 객체는 공통적으로 이벤트를 발생시킬 수 있음.이 같은 노드 관련 기능은 Node 인터페이스가 제공함.
  • 이벤트에 관련된 기능(EventTarget.addEventListener, …)은 탐색 기능(Node.parentNode, Node.childNodes, Node.previousSibling, …)이나 노드 정보 제공 기능(Node.nodeType, …)이 필요.
  • HTML 요소가 객체화된 요소 노드 객체는 HTML 요소가 갖는 공통적인 기능이 있음.이처럼 HTML 요소가 갖는 공통적인 기능은 HTMLElement 인터페이스가 제공함.
  • ex) input 요소 노드 객체와 div 요소 노드 객체는 모두 HTML 요소의 스타일을 나타내는 style 프로퍼티가 있음.
  • 하지만 요소 노드 객체는 HTML 요소의 종류에 따라 고유한 기능도 있음div 요소 노드 객체는 value 프로퍼티가 필요하지 않음.
  • ex) input 요소 노드 객체는 value 프로퍼티가 필요,
  • 따라서 필요한 기능을 제공하는 인터페이스(HTMLInputElement, HTMLDivElement 등)가 HTML 요소의 종류에 따라 각각 다름.
  • 이처럼 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 하위에 프로토타입 체인을 구축하여 노드 객체에 필요한 기능, 즉 프로퍼티와 메서드를 제공하는 상속구조를 갖는다.
  • DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론,
  • 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집한인 DOM API로 제공함.
  • 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있음.
  • 노드 객체의 상속 구조를 자세히 알 필요는 없음.
  • 중요한 것은 DOM API, 즉 DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근하고 HTML의 구조나 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것임.

요소 노드 취득

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

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

39-03

<!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 요소가 존재하지 않는 경우 null을 반환함.

39-05

<!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>
  • HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수효과가 있음.

39-06

<!DOCTYPE html>
<html>
  <body>
    <div id="foo"></div>
    <script>
      // id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당된다.
      console.log(foo === document.getElementById('foo')); // true

      // 암묵적 전역으로 생성된 전역 프로퍼티는 삭제되지만 전역 변수는 삭제되지 않는다.
      delete foo;
      console.log(foo); // <div id="foo"></div>
    </script>
  </body>
</html>
  • 단, id 값과 동일한 이름의 전역변수가 이미 선언되어 있으면 전역 변수에 노드 객체가 재할당되지 않음.

39-07

<!DOCTYPE html>
<html>
  <body>
    <div id="foo"></div>
    <script>
      let foo = 1;

      // id 값과 동일한 이름의 전역 변수가 이미 선언되어 있으면 노드 객체가 재할당되지 않는다.
      console.log(foo); // 1
    </script>
  </body>
</html>

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

  • Document.prototype/Element.rptotype.getElementsByTagName
  • 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환함.

39-08

<!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>
  • DOM 컬렉션 객체인 HTMLCollection 객체는 유사 배열 객체이면서 이터러블임.
  • HTML 문서의 모든 요소 노드를 취득하려면 getElementsByTagName 메서드의 인수로 ‘*’을 전달.

39-09

// 모든 요소 노드를 탐색하여 반환한다.
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]
  • 만약 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우 getElementsByTagName 메서드는 빈 HTMLCollection 객체를 반환함.

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

  • Document.prototype/Element.prototype.getElementByClassName

39-11

<!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>

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

39-13

/* 전체 선택자: 모든 요소를 선택 */
* { ... }
/* 태그 선택자: 모든 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

39-14

<!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
  • 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체를 반환함.
  • NodeList 객체는 유사 배열 객체이면서 이터러블임.

39-15

<!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>

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

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

39-17

<!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>
  • matches는 이벤트 위임을 사용할 때 유용함. 40.7절에서 자세히

6 ) HTMLCollection과 NodeList

  • DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다.
  • 둘 다 유사 배열 객체이면서 이터러블. 따라서 for … of 문으로 순회 가능, 스프레드 문법 사용 가능.
  • 중요 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 객체라는 것.
  • HTMLCollection은 언제나 live 객체로 동작함.
  • 단 NodeList는 대부분의 경우 노드 객체의 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있음.

6-1 ) HTMLCollection

  • getElementsByTagName, getElementByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션 객체.

39-18

<!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>
  • 예상 : 모든 요소의 class 값을 ‘red’ 에서 ‘blue’로 변경 → 모든 li 요소의 class 값이 blue로 변경되어 파란색으로 렌더링
  • 현실 : 두번째 li 요소만 class 값이 그대로 red
  • 예상대로 동작하지 않은 이유

1 ) 첫번째 반복(i === 0)

$elems[0] 요소는 className에 의해 ‘red’에서 ‘blue’로 바뀜.

이때 class 값이 바뀌어서 getElementsByClassName 메서드 인자로 전달한 ‘red’와 더는 일치하지 않기 떄문에 $elems에서 실시간으로 제거됨.

이처럼 HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하는 살아있는 DOM 컬렉션 객체임.

2 ) 두번째 반복(i === 1)

첫번째 반복에서 첫번째 li 요소는 $elems에서 제거됨.

따라서 $elems[1]은 세번째 li 요소임.

이 세번째 요소의 class값도 blue로 변경되고 $elems에서 실시간으로 제거됨.

3 ) 세번째 반복(i === 2)

첫번째 두번째 반복에서 첫번째 세번째 li 요소가 $elems에서 제거됨.

따라서 $elems에는 두번째 li요소 노드만 남음.

이때 $elems.length는 1이므로 for 문의 조건식 i<$elems.length가 false로 평가되어 반복 종료됨.

따라서 $elems에 남아있는 두번째 li 요소의 class값은 변경되지 않음.

  • 해결법

1 ) for문을 역방향으로 순회

39-19

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

2 ) while문 사용하여 HTMLCollection 객체에 노드 객체가 남아 있지 않을 때까지 무한 반복

39-20

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

3 ) 부작용을 반생시키는 원인인 HTMLCollection 객체를 사용하지 않는 것.

대신 배열로 변환하고 배열의 고차함수(forEach, map, filter, reduce 등)을 사용.

39-21

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

6-2 ) NodeList

  • HTMLCollection 객체의 부작용을 해결
  • getElementByTagName, getElementByClassName 메서드 대신 querySelectorAll 메서드 사용
  • querySelectorAll 메서드는 DOM 컬렉션 객체인 NodeList 객체를 반환함.
  • 실시간으로 노드 객체의 상태 변경을 반영하지 않는 객체임.

39-22

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

// NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용할 수 있다.
$elems.forEach(elem => elem.className = 'blue');
  • forEach, item, entries, keys, values 사용 가능.
  • non-live 객체로 동작하지만 childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요.

39-23

<!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>
  • HTMLCollection이나 NodeList 객체는 예상과 다르게 동작할 떄가 있다.
  • 따라서 노드 객체의 상태 변경과 관계 없이 안전하게 DOM 컬렉션을 사용하려면 배열로 변환하여 사용하는 것을 권장.
  • HTMLCollection이나 NodeList 객체는 스프레드 문법, Array.from 메서드를 활용하여 배열로 변환 가능하다.

39-24

<!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>

'JS' 카테고리의 다른 글

모던 자바스크립트 Deep Dive - 이벤트  (0) 2024.02.11
모던 자바스크립트 Deep Dive - DOM 2  (0) 2024.02.10
모던 자바스크립트 Deep Dive - 브라우저의 렌더링 과정  (0) 2024.02.07
모던 자바스크립트 Deep Dive - Set과 Map  (0) 2024.02.05
모던 자바스크립트 Deep Dive - 디스트럭처링 할당  (0) 2024.02.03

관련글

댓글

티스토리툴바