Javascript Deep Dive -39장 (DOM)

DOM

DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. DOM에 대해 자세히 살펴보자.

NODE

HTML 요소와 노드 객체

HTML element는 HTML문서를 구성하는 개별적인 요소를 의미한다.

<div class="greeting">Hello</div>

HTML 문서를 구성하는 개별적인 요소로 구분
<div는 시작 태그이다. (start tag)
class는 어트리뷰트 이름이다. (attribute name)
greeting은 어트리뷰트 값이다. (attribute value)
Hello는 콘텐츠이다. (contents)
</div>는 종료 태그이다. (end tag)

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

Node로 구분
div는 요소 노드이다. (element node)
class="greeting"은 어트리뷰트 노드이다. (attribute node)
Hello는 텍스트 노드이다. (text node)

HTML 문서는 HTML 요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 갖는다. 즉 HTML 요소의 콘텐츠 영역(시작 태그와 종료 태그 사이)에는 텍스트 뿐만 아니라 다른 HTML 요소도 포함될 수 있다.
이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부자관계가 형성된다. 이러한 HTML 요소 간의 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료구조로 구성한다.

트리 자료구조

트리 자료구조는 노드들의 계층 구조로 이뤄진다. 즉 트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조를 말한다. 트리 자료구조는 하나의 최상위 노드에서 시작한다. 최상위 노드는 부모 노드가 없으며, 루트 노드라 한다. 루트 노드는 0개 이상의 자식 노드를 갖는다. 자식 노드가 없는 노드를 리프 노드라 한다.
노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. 노드 객체의 트리로 구조화되어 있기 때문에 DOM을 DOM 트리라고 부르기도 한다.

비선형 자료구조
비선형 자료구조는 하나의 자료 뒤에 여러 개의 자료가 존재할 수 있는 자료구조다. 비선형 자료구조에는 트리와 그래프가 있다.
-
선형 자료구조
하나의 자료 뒤에는 하나의 자료만 존재하는 자료구조다. 선형 자료구조에는 배열,스택,큐,링크드 리스트, 해시 테이블이 있다.

DOM은 노드 객체의 계층적인 구조로 구성된다.

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

• 문서 노드
• 요소 노드
• 어트리뷰트 노드
• 텍스트 노드

문서 노드 document node

문서 노드는 DOM 트리의 최상위에 존재하는 루트노드로서 document 객체를 가리킨다. document 객체는 브라우저가 랜더링한 HTML 문서 전체를 가리키는 객체로서, 전역 객체 window의 document 프로퍼티에 바인딩되어 있다. 따라서 문서 노드는 window.document 또는 document로 참조할 수 있다.
브라우저 환경의 모든 자바스크립트 코드는 script 태그에 의해 분리되어 있어도 하나의 전역 객체 window를 공유한다. HTML 문서당 document 객체는 유일하기 때문이다. document 객체인 문서 노드는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당한다. 즉 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야한다.

요소 노드 element node

요소 노드는 HTML 요소를 가리키는 객체다. 요소 노드는 HTML 요소 간의 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있다.

어트리뷰트 노드 attribute node

어트리뷰트 노드는 HTML 요소의 어트리뷰트를 가리키는 객체다. 어트리뷰트 노드는 어트리뷰트가 지정된 HTML 요소의 요소 노드와 연결되어 있다. 단 요소노드는 부모 노드와 연결되어 있지만 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고 요소 노드에만 연결되어 있다. 즉 어트리뷰트 노드는 부모 노드가 없으므로 요소 노드의 형제 노드는 아니다. 따라서 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야 한다.

텍스트 노드 text node

텍스트 노드는 HTML 요소의 텍스트를 가리키는 객체다. 요소 노드가 문서의 구조를 표현한다면 텍스트 노드는 문서의 정보를 표현한다고 할 수 있다. 텍스트 노드는 요소 노드의 자식 노드이며, 자식 노드를 가질 수 없는 리프 노드다. 즉 텍스트 노드는 DOM 트리의 최종단이다. 따라서 텍스트 노드에 접근하려면 부모 노드인 요소 노드에 접근해야 한다.

노드 객체의 상속 구조

DOM은 HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조라고 했다. 즉 DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있다. 이를 통해 노드 객체는 자신의 부모,형제,자식을 탐색할 수 있으며, 자신의 어트리뷰트와 텍스트를 조작할 수도 있다.
DOM을 구성하는 노드 객체는 ECMAScript 사양에 정의된 표준 빌트인 객체가 아니라 브라우저 환경에서 추가적으로 제공하는 호스트 객체다. 하지만 노드 객체도 자바스크립트 객체이므로 프로토타입에 의한 상속 구조를 갖는다.
모든 노드 객체는 Object,EventTarget,Node 인터페이스를 상속 받는다. 추가적으로 문서 노드는 Document, HTMLDocument 인터페이스를 상속 받고, 어트리뷰트 노드는 Attr, 텍스트 노드는 CharacterData 인터페이스를 각각 상속받는다.
요소 노드는 Element 인터페이스를 상속받는다. 또한 요소 노드는 추가적으로 HTMLElement와 태그의 종류별로 세분화된 HTMLHtmlElement, HTMLHeadElement,HTMLBodyElement,HTMLULListElement 등의 인터페이스를 상속받는다.이를 프로토타입 관점에서 살펴보면 예를 들어, input 요소를 파싱하여 객체화 한 input 요소 노드 객체는 HTMLInputElement,HTMLElement,Element,Node,EventTarget,Object의 prototype에 바인딩되어 있는 프로토타입 객체를 상속받는다. 즉 요소 노드 객체는 프로토타입 체인에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용할 수 있다.
배열이 객체인 동시에 배열인 것처럼 input 요소 노드 객체도 다양한 특성을 갖는 객체이며 이러한 특성을 나타내는 기능들을 상속을 통해 제공받는다.

노드 객체에는 노드의 종류, 즉 노드 타입에 상관없이 모든 노드 객체가 공통으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있다. 예를 들어, 모든 노드 객체는 공통적으로 이벤트를 발생시킬 수 있다. 이벤트에 관련된 기능은 EventTarget 인터페이스가 제공한다.

EventTarget 객체가 제공하는 이벤트에 관련된 기능

• EventTarget.addEventListener
• EventTarget.removeEventListener
• EventTarget.dispatchEvent

또한 모든 노드 객체는 트리 자료구조의 노드로서 공통적으로 트리 탐색 기능이나 노드 정보 제공 기능이 필요하다. 이 같은 노드 관련 기능은 Node 인터페이스가 제공한다.

Node 객체가 제공하는 Node 탐색 / 정보에 관련된 기능

• Node.parentNode
• Node.childNodes
• Node.previousSibling
• Node.nextSibling
• Node.nodeType
• Node.nodeName

HTML 요소가 객체화 된 요소 노드 객체는 HTML 요소가 갖는 공통적인 기능이 있다. 예를 들어 input 요소 노드 객체와 div 요소 노드 객체는 모두 HTML 요소의 스타일을 나타내는 style 프로퍼티가 있다. 이처럼 HTML 요소가 갖는 공통적인 기능은 HTMLElement 인터페이스가 제공한다.

하지만 요소 노드 객체는 HTML 요소의 종류에 따라 고유한 기능도 있다. 예를 들어, input 요소 노드 객체는 value 프로퍼티가 필요하지만 div 요소 노드 객체는 value 프로퍼티가 필요하지 않다. 따라서 필요한 기능을 제공하는 인터페이스가 HTML 요소의 종류에 따라 각각 다르다.

이처럼 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 프로토타입 체인의 하위에 프로토타입 체인을 구축하여 노드 객체에 필요한 기능, 즉 프로퍼티와 메서드를 제공하는 상속 구조를 갖는다.

지금까지 살펴본 바와 같이 DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다. 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.
DOM API를 사용하기 위해 노드 객체의 상속 구조를 자세히 알아야 할 필요는 없다. 중요한 것은 DOM API, 즉 DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근하고 HTML의 구조나 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것이다. 프론트엔드 개발자에게 HTML은 단순히 태그와 어트리뷰트를 선언적으로 배치하여 뷰를 구성하는 것 이상의 의미를 갖는다. 즉 HTML을 DOM과 연관지어 바라보아야 한다.

요소 노드 취득

HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다. 텍스트 노드는 요소 노드의 자식 노드이고, 어트리뷰트 노드는 요소 노드와 연결되어 있기 때문에 텍스트 노드나 어트리뷰트 노드를 조작하고자 할 때도 마찬가지다.
예를 들어 HTML 문서 내의 h1 요소의 텍스트를 변경하고 싶은 경우를 생각해보자. 이 경우 먼저 DOM 트리 내에 존재하는 h1 요소 노드를 취득할 필요가 있다. 그리고 취득한 요소 노드의 자식 노드인 텍스트 노드를 변경하면 해당 h1 요소의 텍스트가 변경된다. 이처럼 요소 노드의 취득은 HTML 요소를 조작하는 시작점이다. 이를 위해 DOM은 요소 노드를 취득할 수 있는 다양한 메서드를 제공한다.

id를 이용한 요소 노드 취득

Document.prototype.getElementById 메서드는 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환한다. getElementById 메서드는 Document.prototype의 프로퍼티다.
따라서 반드시 문서 노드인 document를 통해 호출해야 한다.
HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수 효과가 있다. 단 id 값과 동일한 이름의 전역 변수가 이미 선언되어 있으면 이 전역 변수에 노드 객체가 재할당되지 않는다.

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

Document.prototype / Element.prototype.getelementsByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다.
메서드 이름에 포함된 Elements가 복수형인 것에서 알 수 있듯이, getElementsByTagName 메서드는 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
함수는 하나의 값만 반환할 수 있으므로 여러 개의 값을 반환하려면 배열이나 객체와 같은 자료구조에 담아 반환해야 한다. getElementsByTagName 메서드가 반환하는 DOM 컬렉션 객체인 HTMLCollection 객체는 유사 배열 객체이면서 이터러블이다.
getElementsByTagName 메서드는 Document.prototype에 정의된 메서드와 Element.prototype에 정의된 메서드가 있다. Document.prototype.getElementsByTagName 메서드는 Dom의 루트 노드인 문서 노드, 즉 document를 통해 호출하며 DOM 전체에서 요소 노드를 탐색하여 반환한다. 하지만 Element.prototype.getelementsByTagName 메서드는 특정 요소 노드를 통해 호출하며, 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.

class를 이용한 요소 노드 취득

getElementsByTagName 메서드와 마찬가지로 Document.prototype과 Element.prototype에 정의된 메서드가 있다.

CSS 선택자를 이용한 노드 취득

CSS 선택자는 스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용하는 문법이다. Document.prototype / Element.prototype querytSelector 메서드는 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드를 탐색하여 반환한다.
querySelector,querySelectorAll 메서드또한 Document.prototype,Element.prototpye에 정의된 메서드가 있다. document를 통해 문서 전체를 탐색하며 Element를 통해 하위 요소의 특정 요소를 탐색하여 반환한다.

특정 요소 노드를 취득할 수 있는지 확인하는 방법

Element.prototype.matches 메서드는 인수로 전달한 CSS 선택자를 통해 특정 요소 노드를 취득 할 수 있는지 확인한다. Element.prototype.matches 메서드는 이벤트 위임을 사용할 때 유용하다.

HTMLCollection과 NodeList

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

HTMLCollection

getElementsByTagName, getElementsByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아 있는 DOM 컬렉션 객체다. 따라서 HTMLCollection 객체를 살아 있는 객체라고 부르기도 한다.

<!-- ... --!>
<ul>
<li class="red">Apple</li>
<li class="red">Apple</li>
<li class="red">Apple</li>
</ul>
<!-- ... --!>

// 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}

getElementsByClassName 메서드로 class 값이 'red'인 요소 노드를 모두 취득하고, 취득된 요소 노드를 담고 있는 HTMLCollection 객체를 for문으로 순회하며 className 프로퍼티를 사용하여 모든 요소의 class 값을 'red' 에서 'blue'로 변경한다.
따라서 위 예제가 에러 없이 실행 되면 모든 li 요소의 class 값이 'blue'로 변경되어 모든 li 요소는 CSS에 의해 파란색으로 렌더링 될 것이다. 하지만 위 예제를 실행해 보면 예상대로 동작하지 않는다. 다음 그림처럼 두 번째 li 요소만 class 값이 변경되지 않는다.

1. 첫번째 반복
   첫번째 반복을 실행하며 className 프로퍼티에 의해 $elems[0]은 class의 값이 'red' 에서 'blue'로 변경된다. 이때 첫 번째 li 요소는 class 값이 'red'에서 'blue'로 변경되었으므로 getelementsByClasName 메서드의 인자로 전달한 'red'와 더는 일치하지 않기 때문에 $elems에서 실시간으로 제거된다. 이처럼 HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하는 살아 있는 DOM 컬렉션 객체다.
2. 두번째 반복
   첫 번째 반복에서 첫 번째 li 요소는 $elems에서 실시간으로 제거되었다. 따라서 $elems[1]은 이제 세 번째 li요소이다. 이 세번째 li 요소의 class 값도 'blue'로 변경되고 마찬가지로 HTMLCollection 객체인 $elems에서 실시간으로 제외된다.
3. 세번째 반복
   i의 값이 2가 되었고 $elems에는 2번째 li 요소 노드만 남게 되었다. 이제 i는 $elems.length보다 크므로 false로 평가되어 반복이 종료된다. 따라서 2번째 li 요소의 class 값은 변경되지 않는다.

이처럼 HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하여 요소를 제거할 수 있기 때문에 HTMLCollection 객체를 for문으로 순회하며 노드 객체의 상태를 변경해야 할 때 주의해야 한다. 이 문제는 for문을 역방향으로 순회하는 방법으로 회피하거나 while문을 사용하여 노드 객체가 남아있지 않을 때까지 무한 반복하는 방법으로 회피할 수도 있다.

let i = 0;
while($elems.length > i){
  $elems[i].className = 'blue';
}

더 간단한 해결책은 부작용을 발생시키는 원인인 HTMLCollection 객체를 사용하지 않는 것이다. 유사 배열객체이면서 이터러블인 HTMLCollection 객체를 배열로 변환하면 부작용을 발생시키는 HTMLCollection 객체를 사용할 필요가 없고 유용한 배열의 고차 함수를 사용할 수 있다.

[...$elems].forEach(elem => elem.className = 'blue');

Nodelist

HTMLCollection 객체의 부작용을 해결하기 위해 getElementsByTagName, getelementsByClassName 메서드 대신 querySelectorAll 메서드를 사용하는 방법도 있다. querySelectorAll 메서드는 DOM 컬랙션 객체인 NodeList 객체를 반환한다. 이때 NodeList 객체는 실시간으로 노드 객체의 상태 변경을 반영하지 않는 객체다.

// querySelectorAll은 DOM 컬렉션 객체인 NodeList를 반환한다.
const $elems = document.querySelectorAll('.red');
  
// NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용할 수 있다.
$elems.forEach(elem => elem.classNae = 'blue');

querySelectorAll이 반환하는 NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용할 수 있다.
NodeList.prototype.forEach 메서드는 Array.prototype.forEach 메서드와 사용 방법이 동일하다.
NodeList.prototype은 forEach 외에도 item, entries, keys, values 메서드를 제공한다.
NodeList 객체는 대부분의 경우 노드 객체의 상태 변경을 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작한다. 하지만 childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요하다.

HTMLCollection 이나 NodeList 객체는 예상과 다르게 동작할 때가 있어 다루기 까다롭고 실수하기 쉽다. 따라서 노드 객체의 상태 변경과 상관 없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다. HTMLCollection과 NodeList 객체가 메서드를 제공하기는 하지만 배열의 고차 함수만큼 다양한 기능을 제공하지 않는다.
HTMLCollection과 NodeList 객체 모두 유사 배열 객체이면서 이터러블이기에 스프레드 문법이나 Array.from 메서드를 사용하여 간단한 배열로 변환할 수 있다.

노드 탐색

요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모,형제,자식 노드 등을 탐색해야 할 때가 있다. 이때 DOM 트리 상의 노드를 탐색할 수 있도록 Node.Element 인터페이스는 트리 탐색 프로퍼티를 제공한다.
parentNode,previusSibling,firstChild,childNodes 프로퍼티는 Node.prototype이 제공하고 프로퍼티 키에 Element가 포함된 previousElementSibling, nextElementsibling과 children 프로퍼티는 Element.prototype이 제공된다. 노드 탐색 프로퍼티는 모두 접근자 프로퍼티다. 단 노드 탐색 프로퍼티는 setter 없이 getter만 존재하여 참조만 가능한 읽기 전용 접근자 프로퍼티다. 읽기 전용 접근자 프로퍼티에 값을 할당하면 아무런 에러 없이 무시된다.

요소 노드의 텍스트 조작

nodeValue 프로퍼티는 탐색,접근했던 프로퍼티들과는 다르게 setter,getter가 모두 존재하는 접근자 프로퍼티다. 따라서 nodeValue 프로퍼티는 참조와 할당 모두 가능하다. 노드 객체의 nodeValue 프로퍼티를 참조하면 노드 객체의 값을 반환한다. 노드 객체의 값이란 텍스트 노드의 텍스트다. 따라서 텍스트 노드가 아닌 노드, 즉 문서 노드나 요소 노드의 nodeValue 프로퍼티를 참조하면 null을 반환한다.

<div id="foo">Hello!!</div>

// 문서 노드의 nodeValue 프로퍼티를 참조한다. 
console.log(document.nodeValue); // null

// 요소 노드의 nodeValue 프로퍼티를 참조한다.
const $foo = document.getElementById('foo');
console.log($foo.nodeValue); // null 

// 텍스트 노드의 nodeValue 프로퍼티를 참조한다.
const $textNode = $foo.firstChild;
console.log($textNode.nodeValue); // Hello

이처럼 텍스트 노드의 nodeValue 프로퍼티를 참조할 때만 텍스트 노드의 값, 즉 텍스트를 반환한다. 텍스트 노드가 아닌 노드 객체의 nodeValue 프로퍼티를 참조하면 null을 반환하므로 의미가 없다.