📝 docs: 39-1장 DOM 39.1 정리

docs/39_DOM/한수지.md

@@ -0,0 +1,129 @@
+## 39장. ✨ DOM (Document Object Model)
+
+브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성합니다.
+
+> `DOM`은 **HTML 문서의 계층적 구조와 정보를 표현**하며 `이를 제어할 수 있는 API`, 즉 **프로퍼티와 메서드를 제공**하는 `트리 자료구조`입니다.
+
+### 📌 39-1. 노드
+
+#### 🔎 HTML 요소와 노드 객체
+
+> HTML요소는 **HTML 문서를 구성하는 개별적인 요소**를 의미합니다.
+
+![](https://velog.velcdn.com/images/ninto_2/post/d87f8b51-c372-4d03-ba10-c78e178c5b82/image.png)
+
+HTML요소는 `렌더링 엔진에 의해 파싱`되며, `DOM을 구성하는 요소 노드 객체로 변환`됩니다.
+
+![](https://velog.velcdn.com/images/ninto_2/post/a772adc5-eb32-4ab7-92cb-c3cf49cbe010/image.png)
+
+이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환됩니다.
+
+HTML 문서는 **HTML 요소들의 집합**으로 이루어지며, **HTML 요소는 중첩 관계**를 갖게 됩니다.
+
+HTML 요소 간에는 중첩 관계에 의해 계층적인 부자(parent-child, 부모 자식)관계가 형성됩니다.
+
+이러한 HTML 요소를 객체화한 `모든 노드 객체들은 트리 자료구조로 구성`합니다.
+
+**트리(tree) 자료구조**
+
+> `트리 자료구조`는 `노드들의 계층 구조`로 이루어집니다.
+
+즉, `부모 노드와 자식노드로 구성`되어 노드 간의 계층적 구조(부자, 형제 관계)를 표현하는 `비선형 자료구조`를 의미합니다.
+
+트리 자료구조는 하나의 **최상위 노드에서 시작**한다는 특징을 가지고 있습니다.
+
+![](https://velog.velcdn.com/images/ninto_2/post/8fdb4576-a11d-401b-b63f-c9ee335e58cb/image.png)
+
+- **최상위 노드** : 부모 노드가 없으며 `루트 노드`라고도 합니다.
+  - 루트 노드는 0개 이상의 자식 노드를 갖습니다.
+  - 만약 자식 노그가 없다면, `리프 노드`라고 합니다.
+
+> DOM은 노드 객체들로 구성된 트리 자료구조입니다.
+
+**노드 객체의 트리로 구조화** 되어 있기 때문에 **DOM 트리**라고도 합니다.
+
+<br>
+
+#### 🔎 노드 객체의 타입
+
+`노드 객체는 종류`가 있고 `상속 구조`를 갖습니다.
+
+노드 객체에는 총 12개의 종류(노드 타입)이 있습니다.
+
+이 중, 아래와 같은 **대표적인 4가지 타입이 중요한 노드 타입**입니다.
+
+<br>
+
+1. **문서 노드**
+
+> `문서 노드`는 **DOM 트리의 최상위에 존재하는 루트 노드**로서 `document 객체`를 가리킵니다.
+
+document 객체는 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체로서 window의 document 프로퍼티에 바인딩 되어 있습니다.
+
+그렇기에, 문서 노드는 `window.document` 또는 `document`로 `참조`할 수 있습니다.
+
+**자바스크립트 코드는 하나의 전역 객체 window를 공유**합니다.
+
+즉, 전역 객체 window의 document 프로퍼티에 바인딩 되어 있는 하나의 document 객체를 바라보게 됩니다. (HTML 문서당 document 객체는 유일합니다.)
+
+문서노드(= document 객체)는 DOM의 루트 노드이므로 `DOM 트리의 노드들에 접근하기 위한 진입점 역할`을 담당합니다.
+
+(요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서노드를 통해야 합니다.)
+
+<br>
+
+2. **요소 노드**
+
+> `요소 노드`는 **HTML 요소를 가리키는 객체**입니다.
+
+`HTML 요소 간의 중첩에 의해 부자관계`를 가지며, 이 관계를 통해 `정보를 구조화`합니다.
+
+요소 노드를 통해 문서의 구조를 표현한다고 할 수 있습니다.
+
+<br>
+
+3. **어트리뷰트 노드**
+
+> `어트리뷰트 노드`는 **HTML 요소의 어트리뷰트를 가리키는 객체**입니다.
+
+어트리뷰트 노드는 지정된 HTML 요소의 요소 노드와 연결되어 있습니다.
+
+- 요소노드: 부모 노드와 연결되어 있음
+- 어트리뷰트 노드: 부모노드와 연결되어 있지않고, `요소노드에만 연결`되어 있음
+  - 부모 노드가 없으므로 요소 노드의 형제 노드는 아님
+  - 어트리뷰트 노드에 접근하기 위해서는 먼저 요소노드에 접근해야 함
+
+<br>
+
+4. **텍스트 노드**
+
+> `텍스트 노드`는 **HTML 요소의 텍스트를 가리키는 객체**입니다.
+
+- 요소노드: 문서의 구조를 표현
+- 텍스트 노드: `문서의 정보`를 표현
+
+텍스트 노드는 **요소 노드의 자식 노드**이며, **자식 노드를 가질 수 없는 리프 노드**입니다.
+
+즉, 텍스트 노드는 `DOM 트리의 최종단`입니다.
+
+텍스트 노드에 접근하기 위해서는 먼저 부모 노드인 요소 노드에 접근이 필요합니다.
+
+<br>
+
+#### 🔎 노드 객체의 상속 구조
+
+> `DOM을 구성하는 노드 객체`는 `브라우저 환경`에서 추가적으로 제공하는 `호스트 객체`입니다.
+
+하지만, **노드 객체도 자바스크립트 객체이므로 프로토타입에 의한 상속 구조**를 갖습니다.
+
+![](https://velog.velcdn.com/images/ninto_2/post/995ef352-1b19-4745-8fed-0229cdbbb1b1/image.png)
+
+자세히 말하자면, 노드 객체는 `공통된 기능`일수록 `프로토타입 체인 상위`에, `개별적인 고유 기능`일 수록 `프로토타입 체인의 하위`에 **프로토타입 체인을 구축**하며 **노드 객체에 필요한 기능(프로퍼티와 메서드)를 제공**하는 **상속 구조**를 갖습니다.
+
+🔎 **DOM의 역할과 특징**
+
+- HTML 문서의 계층적 구조와 정보를 표현
+- 노드 객체의 종류, 노드 타입에 따라 필요한 기능을 DOM API로 제공
+- DOM API를 통해 HTML 구조나 내용, 스타일을 동적으로 조작할 수 있음
+
+---