39장. DOM

0. DOM

브라우저의 렌더링 엔진은 HTML문서를 파싱하여 브라우저가 이해할 수 있는 자료구조 DOM 생성

(* DOM : HTML 문서의 계층적 구조와 정보를 표현하며 노드 타입에 따라 이를 제어하는 API인 프로퍼티와 메서드를 제공하는 트리 자료구조)

 

 

 

1. 노드

HTML요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소노드 객체로 변환됨.

HTML문서는 HTML요소들의 집합, 중첩관계를 가지며 이로 인해 계층적인 부자관계 형성.

-> 트리 자료구조로 구성

 

(* 트리자료구조 : 부모-자식 노드들로 구성되어있는 노드간의 계층적 구조를 표현하는 비선형 구조)

 

- 노드 객체 타입 : 총 12개

   1) 문서 노드 : DOM 트리 최상위에 존재하는 루트노드,  document 객체(=브라우저가 렌더링한 HTML 문서 전체)를 가리킴, DOM 트리 노드들에 접근하기 위한 진입점 역할.

   2) 요소 노드 : HTML 요소들을 가리키는 객체, 부자관계를 가지고 이를 통해 정보를 구조화 함.(부모 노드와 연결)

   3) 어트리뷰트 노드 : HTML 요소의 어트리뷰트를 가리키는 객체, 요소노드에만 연결되어 있음.

   4) 텍스트 노드 : 문서의 정보 표현, 요소 노드의 자식 노드이고 자식 가질 수 없는 리프노드(DOM 트리 최종단)

+ 코멘트 노드, 도큐먼트 노드, ...

 

DOM을 구성하는 노드 객체는 DOM API를 사용할 수 있음. DOM API를 통해 탐색 가능하고, 조작도 가능.

DOM을 구성하는 노드 객체는 표준 빌트인 객체가 아닌 호스트 객체.(브라우저 환경에서 추가적으로 제공)

하지만, 결국 노드 객체도 자바스크립트 객체이므로 프로토타입에 의한 상속구조를 가짐.

 

-> 모든 노드객체는 공통적으로 Object(객체), EventTarget(이벤트 발생시키는 객체), Node(트리 자료구조의 노드 객체로 트리 탐색, 정보 제공..) 인터페이스 상속받음.

 

추가적으로, 요소의 종류에 따라 고유한 기능들이 있음.

ex) 문서노드는 Document, 어트리뷰트 노드는 Attr, 텍스트 노드는 CharacterData, 요소노드는 Element 인터페이스를 상속받음.

 

공통된 기능일수록 프로토타입 체인의 상위에 위치.

 

 

2. 요소 노드 취득

- id, class, css 선택자등을 이용한 요소 노드 취득

 

* querySelector, getElementById 차이?

: querySelector 메서드는 getElementById 보다 느리지만, 좀 더 구체적인 조건, 일관된 방식으로 요소 취득한다는 장점이 있음. 따라서 id 어트리뷰트 있는 요소 노드 취득할 때에는  getElementById, 이외에는 querySelector 사용 추천.

 

 

 

3. DOM 컬렉션 객체(HTMLCollection & NodeList)

 

* 공통점

: DOM API가 여러개의 결과값을 반환하기 위한 DOM 컬렉션 객체,

둘 다 유사배열 객체이자 이터러블(for..of..로 순회 가능)

노드 객체 상태 변화를 실시간으로 반영하는 살아있는 객체(live 객체)

 

* 차이점

- HTMLCollection :  언제나 live 객체로 동작

- NodeList : 대부분은 실시간 반영하지 않고 과거의 정적 상태 유지하는 non-live 객체로 동작, 경우에 따라 live 객체 동작

 

 

* 단점 및 해결법

실시간으로 상태를 변경해서 문제 발생 가능

-> HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용

 

 

 

4. DOM 조작

새로운 노드를 생성하여 DOM에 추가하거나, 기존 노드 삭제/교체 하는 것

DOM 조작에 의해 DOM에 새로운 노드가 추가되거나 삭제되면 리플로우/리페인트가 일어남. -> 성능에 영향

 

 

+ innerHTML 

- 장점 : DOM 조작 구현이 간단하고 직관적

- 단점 : 크로스 사이트 스크립팅 공격에 취약, HTML 마크업 문자열 할당하는 경우에 요소 노드 모든 자식 노드 제거하고 할당한 HTML 마크업 문자열 파싱하여 DOM 변경, 새로운 요소 삽입시 위치 지정 불가.

 

 

+ innerAdjactHTML

기존 요소에 영향 주지 않고, 새로 삽입될 요소만 파싱하여 자식 요소로 추가 -> innerHTML 보다 빠름

하지만, 여전히 크로스 사이트 스크립팅 공격에 취약

 

 

 

5. 복수 노드 생성 및 추가

 

문제 : DOM이 여러번 변경돠면 변경 횟수만큼 리플로우/리페인트 ->  성능문제

 

-> 해결 : 컨테이너 요소 사용(복수의 요소 노드들을 컨테이너 요소의 자식 노드로 추가하기)

- 장점 : DOM 한 번만 변경

- 단점 : 불필요한 컨테이너 요소 추가

 

-> 해결 : DocumentFragment  노드 사용

부모노드가 없어 기존 DOM과는 별도로 존재 -> DocumentFragment  노드에 자식 추가하여도 기존 DOM에 변경 발생 X

DocumentFragment  노드를 DOM에 추가하면 자신은 제거되고, 자신의 자식 노드만 DOM에 추가됨.