[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fbyjuun.com%2Fposts%2FJavaScript%2Fdeep-dive-js-39&count_bg=%233B82F6&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API(프로퍼티와 메서드)를 제공하는 트리 자료구조다.
# 🌟 노드 HTML 요소(Element)(div)는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환한다. `

Hello

` 이때, HTML 요소의 어트리뷰트(greeting)은 어트리뷰트 노드로, HTML 요소의 텍스트 컨텐츠(Hello)는 텍스트 노드로 변환된다. HTML 요소 간에는 중첩 관계에 의해 계층적인 부자관계가 형성된다. 이러한 HTML 요소 간의 부자 관계를 반영하여, HTML Element들을 객체화한 모든 노드 객체들을 **트리 자료 구조**로 구성한다. ## ✨ 노드 객체의 타입 노드 객체는 종류가 있고, 상속 구조를 갖는다. 그 중 중요한 노드 타입은 다음과 같다. - document node : DOM 트리 최상위에 존재하는 루트 노드로서 document객체를 가리킨다. 전역 객체 window의 document 프로퍼티에 바인딩 되어 있다. window.document로 참조할 수 있다. - element node : element node는 HTML 요소를 가리키는 노드이다(예, div, span, a, h1 ...). element node는 HTML 요소 간의 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 구조화된다. - attribute node : HTML Element(예, div)의 attribute(예, class, id)를 가리키는 객체다. attribute가 지정된 element node와 연결되어 있다. - text node : HTML Element의 텍스트를 가리키는 객체다. ## ✨ 노드 객체의 상속 구조 DOM은 HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어하는 API를 제공한다. 즉, DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 제공한다. 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받는다. 노드 객체에는 노드 타입에 상관없이 공통적으로 이벤트를 발생시킬 수 있다. 예를 들어, 이벤트에 관련된 기능은 (EventTarget.addEventListner, EventTarget.removeEventListener 등)은 EventTarget 인터페이스가 제공한다. 그리고, 모든 Node관련 기능은 Node 인터페이스가 제공한다. 지금까지 살펴본바와 같이 **DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 타입에 따라 필요한 기능을 제공하는 프로퍼티와 메서드의 집합인 DOM API를 제공한다**. 그리고 이를 통해 ,HTML 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.
# 🌟 Element Node 취득 ## ✨ id를 이용해 취득 Document.prototype.getElementById 메서드를 이용해 id 어트리뷰트값을 갖는 하나의 Element Node를 탐색해 반환한다. ```html

Apple
Banana
Orange

``` id값은 HTML 문서 내에서 유일한 값이어야 한다. ## ✨ Tag를 이용해 취득 `Document.prototype.getElementsByTagName` 메서드를 이용해 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색해 반환한다. ```html

Apple
Banana
Orange

``` ## ✨ class를 이용해 취득 `Document.prototype.getElementsByClassName` 메서드는 인수로 전달한 class 어트리뷰트 값을 갖는 모든 요소 노드들을 탐색해 반환한다. ```html

Apple
Banana
Orange

``` ```html

Apple
Banana
Orange

``` `Document.prototype.querySelector`메서드는 인수로 전달한 css 선택자를 만족시키는 하나의 요소 노드를 탐색해 반환한다. 모든 요소 노드를 취득하려면 `querySelectorAll` 메서드를 사용한다. ## ✨ HTMLCollection과 NodeList `DOM` 컬렉션 객체인 `HTMLCollection`과 `NodeList`는 `DOM API`가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다. 둘 다 유사 배열 객체이면서 이터러블이다. 따라서 for ... of 문으로 순회할 수 있으며, 스프레드 문법을 사용해 간단히 배열로 변환할 수 있다. HTML Collection 객체는 살아있는 (live) 객체라고 부르기도 한다. ```html

Apple
Banana
Orange

``` 위 예제의 결과로 class값이 모두 red에서 blue로 바뀔것이라 예상하지만, 그렇지 않다. 1. 첫 번째 반복(`i === 0`) - $elems[0]은 첫 번째 li요소다. 첫번째 li 요소는 class값이 'red' 에서 'blue'로 변경되었기 때문에, $elems에서 실시간으로 제거된다. 이처럼 실시간으로 노드 객체의 상태 변경을 반영하는 살아있는 DOM 컬렉션 객체다 2. 두 번째 반복(`i === 1`) - 첫 번째 반복에서 첫 번째 li 요소는 $elems에서 제거되었다. 따라서 $elems[1]은 세 번째 li요소다 (실시간으로 제거되었기 때문에) 이 문제는 for문을 역방향으로 순회하는 방법, while문을 이용하는 방법으로 회피할 수 있다. ```jsx // for 문을 역방향으로 순회 for (let i = $elems.length - 1; i >= 0; i--) { $elems[i].className = "blue"; } // while 문으로 HTMLCollection에 요소가 남아 있지 않을 때까지 무한 반복 let i = 0; while ($elems.length > i) { $elems[i].className = "blue"; } ``` 더 간단한 해결책은 부작용을 발생시키는 `HTML Collection` 객체를 사용하지 않고, 배열로 변환해 사용하는 것이다. ```jsx // 유사 배열 객체이면서 이터러블인 HTMLCollection을 배열로 변환하여 순회 [...$elems].forEach((elem) => (elem.className = "blue")); ``` ## ✨ NodeList\*\* `HTML Collection` 객체의 부작용을 해결하기 위해 `querySelectorAll` 메서드를 사용하는 방법도 있다. `NodeList` 객체는 실시간으로 노드 객체의 상태 변경을 반영하지 않는 객체다. ```jsx // querySelectorAll은 DOM 컬렉션 객체인 NodeList를 반환한다. const $elems = document.querySelectorAll(".red"); // NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용할 수 있다. $elems.forEach((elem) => (elem.className = "blue")); ```
# 🌟 Node 탐색 노드를 취득한 다음, 취득한 Element Node를 기준으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드 등을 탐색해야 할 때가 있다. ## ✨ 자식 노드 탐색 - Node.prototype.childNodes : NodeList에 자식 노드 뿐만 아니라, 텍스트 노드 포함해 반환 - Node.prototype.firstChild : 첫 번째 자식 노드를 반환, 텍스트 노드이거나 요소 노드 - Node.prototype.lastChild : 마지막 자식 노드 반환, 텍스트 노드이거나 요소 노드 - Element.prototype.children : HTMLCollection에 텍스트 노드를 제거해서 반환 - Element.prototype.firstElementChild : 첫 번째 자식 요소 노드 반환 - Element.prototype.lastElementChild : 마지막 자식 요소 노드 반환 ```html

Apple
Banana
Orange

``` **✨ 부모 노드 탐색** `Node.prototype.parentNode` 를 사용 ```html

Apple
Banana
Orange

``` **✨ 형제 노드 탐색** - Node.prototype.previousSibling : NodeList에 자신의 이전 형제 노드 반환 (텍스트 노드일 수도 있다.) - Node.prototype.nextSibling : NodeList에 자신의 이후 형제 노드 반환 (텍스트 노드일 수도 있다.) - Element.prototype.previousElementSibling : 이전 형제 요소 노드 반환 - Element.prototype.nextElementSibling :이후 형제 요소 노드 반환 ```html

Apple
Banana
Orange

```
# 🌟 Element Node 텍스트 조작 ## nodeValue 텍스트 노드의 텍스트다. 텍스트 노드가 아닌 경우 null을 반환한다. ```html

Hello

``` ## textContent element node의 콘텐츠 영역 내의 텍스트를 모두 반환한다. ```html

Hello world!

```
# 🌟 DOM 조작 DOM 조작은 새로운 노드를 생성해 DOM에 추가하거나 기존 노드를 삭제 또는 교체 하는 것을 말한다. DOM 조작에 의해 DOM에 새로운 노드가 추가되거나 삭제되면, 리플로우 리페인트가 발생하는 원인이 되므로 성능에 영향을 준다. ## innerHTML element Node 콘텐츠 영역 내에 포함된 모든 HTML 마크업을 문자열로 반환한다. ```html

Hello world!

``` ```html

Hello world!

Apple

``` 이때, 사용자로 부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 XSS 공격에 취햑하다. ## 노드 생성과 추가 DOM은 노드를 직접 생성/삽입/삭제/치환 하는 메서드로 제공한다. ```html

Apple

``` 복수의 노드 생성과 추가 ```html

``` 위 예제는 3개의 요소 노드를 생성해 DOM에 3번 추가하므로, DOM이 3번 변경된다. 따라서 리플로우 리페인트가 3번 실행된다. 아래와 같이 컨테이너 요소를 미리 생성하고, DOM에 추가할 3개의 요소 노드를 컨테이너 요소에 자식 노드로 추가한 뒤 한번에 추가하면 DOM은 한 번만 변경된다. ```html

``` ## 노드 삽입 마지막 노드로 추가 (appendChild) ```html

Apple
Banana

``` 지정한 위치에 노드 삽입 (insertBefore) ```html

Apple
Banana

``` 노드 이동(apeendChild, 또는 inserBefore 메서드를 이용해 이미 존재하는 노드를 다시 추가) ```html

Apple
Banana
Orange

``` 노드 삭제(removeChild) ```html

Apple
Banana

```
# 🌟 어트리뷰트 HTML Element는 여러 개의 attribute를 가질 수 있다. ```HTML ``` HTML 문서가 파싱될 때, HTML 요소의 어트리뷰트는 Attribute Node로 변환되어 Element Node와 연결된다. 위, input Element는 3개의 어트리뷰트가 있으므로, 3개의 어트리뷰트 노드가 생성된다. Element Node의 모든 어트리뷰트 노드는 Element.prototype.attributes 프로퍼티로 취득할 수 있다. ```html ``` ## ✨ 어트리뷰트 조작 Element.prototype.getAttribute 메서드를 통해 어트리뷰트 값을 참조할 수 있고, 변경하려면 Element.prototype.setAttributes 메서드를 이용하면 된다. ```html ``` 어트리뷰트 존재 여부 확인은 hasAttribute 메서드를 사용하고, 특정 HTML 어트리뷰트를 삭제하려면 removeAttribute 메서드를 이용하면 된다. ```html ```
# 🌟 스타일 ## ✨ 인라인 스타일 조작 `HTMLElement.prototype.style` 프로퍼티는 요소 노드의 인라인 스타일을 취득하거나 추가 또는 변경한다. ```html

Hello World

``` ## ✨ 클래스 조작 . 으로 시작하는 클래스 선택자를 사용해, CSS Class를 미리 정의한 다음, HTML 요소의 class 어트리뷰트값을 변경해, HTML 요소의 스타일을 변경할 수도 있다. className 프로퍼티는 문자열을 반환하므로 공백으로 구분된 여러 개의 클래스를 반환하는 경우 다루기가 불편하다. ```html

Hello World

``` classList 프로퍼티는 class 어트리뷰트의 정보를 담은 DOMTokenList 객체를 반환한다. ```html

Hello World

```

DOM [모던 자바스크립트 Deep Dive 39장]