DOM
DOM(Document Object Model): HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조
이때 DOM은 어떻게 생성되냐?!
-> HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조를 생성하는데, 그 자료구조가 바로 DOM!
노드
HTML 요소와 노드 객체
HTML 요소: HTML 문서를 구성하는 개별적인 요소
- HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.
💡 HTML 문서를 아까 위에서 브라우저가 이해할 수 있는 자료구조를 생성한다고 했는데, 이때 HTML 요소 -> 요소 노드 객체가 된다는 말이다.
HTML 문서는 HTML 요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 갖는다.
즉, HTML 요소의 콘텐츠 영역(시작 태그와 종료 태그 사이)에는 텍스트뿐만 아니라 다른 HTML 요소도 포함할 수 있다.
-> 계층적인 부자 관계 형성!
ex. <body> 태그의 콘텐츠 영엑에 <div>가 포함되고, <div>에는 <ul>태그가 포함된 형태
<body>
<div>
<ul> </ul>
</div>
</body>
트리 자료구조
트리 자료구조는 노드들의 계층 구조로 이뤄진다.
(부모 노드와 자식 노드로 구성되며, 비선형 자료구조이다.)
최상위 노드는 부모 노드가 없으며, 루트 노드라 한다. 루트 노드는 0개 이상의 자식 노드를 갖는다. 자식 노드가 없는 노드를 리프 노드라 한다.
💡노드 객체들로 구성된 트리 자료구조가 바로 DOM이다!
노드 객체의 타입
아래와 같은 HTML 문서를 렌더링 엔진이 파싱한다면,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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을 생성한다.
DOM은 노드 객체의 계층적인 구조로 구성되는데, 노드 객체는 총 12개의 종류(노드 타입)가 있다.
중요한 노드 타입 4가지
문서 노드
최상위에 존재하는 루트 노드로서 document 객체를 가리킨다.
💡 document 객체?
: 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체!
HTML 문서당 document 객체는 유일하다!!
또한, DOM 트리의 루트 노드이므로 노드들에 접근하기 위한 진입점 역할을 담당한다. 즉, 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다.
요소 노드
HTML 요소를 가리키는 객체다. 요소 노드는 문서의 구조를 표현한다고 할 수 있다.
💡 요소 노드는 우리가 HTML에서 보는 태그를 의미!!
어트리뷰트 노드
HTML 요소의 어트리뷰트를 가리키는 객체다. 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고 요소 노드에만 연결되어 있다.
어트리뷰트 노드에 접근하여 어트리뷰트를 참조/변경하려면 먼저 요소 노드에 접근해야 한다.
텍스트 노드
HTML 요소의 텍스트를 가리키는 객체다. 텍스트 노드는 문서의 정보를 표현한다고 할 수 있다.
텍스트 노드는 요소 노드의 자식 노드이며, 자식 노드를 가질 수 없는 리프 노드(->DOM 트리의 최종단!)다.
텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 한다.
노드 객체의 상속 구조
🌟 DOM: HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조
즉, DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있다!!!
이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있으며, 자신의 어트리뷰트와 텍스트를 조작할 수 있다.
위 그림과 같이 모든 객체는 Object, EventTarget, Node 인터페이스를 상속받는다.
모든 노드 객체는 공통적으로 이벤트를 발생시킬 수 있다. 이벤트에 관련된 기능(EventTarget.addEventListener, EventTarget.removeEventListener 등)은 EventTarget 인터페이스가 제공한다.
또한, 모든 노드 객체는 트리 자료구조의 노드로서 공통적으로 트리 탐색 기능이나 정보 제공 기능이 필요한데, 이 기능은 Node 인터페이스가 제공한다.
HTML 요소가 객체화된 요소 노드 객체는 HTML 요소가 갖는 공통적인 기능과 HTML 요소의 종류에 따라 고유한 기능이 있다.
공통적인 기능: input 요소 노드 객체와 div 요소 노드 객체는 모두 HTML 요소의 스타일을 나타내는 style 프로퍼티가 있다. 이는 HTMLElement 인터페이스가 제공한다.
고유한 기능: input 요소 노드 객체는 value 프로퍼티가 필요하지만 div 요소 노드 객체는 value 프로퍼티가 필요하지 않다. 필요한 기능을 제공하는 인터페이스(HTMLInputElement, HTMLDivElement 등)가 HTML 요소의 종류에 따라 각각 다르다.
💡 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 프로토타입 체인의 하위에 프로토타입 체인을 구축하여 노드 객체에 필요한 기능, 즉 프로퍼티와 메서드를 제공하는 상속 구조를 갖는다.
DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다.
이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.
(✨우리는 DOM API, 즉 DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근하고 HTML의 구조나 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것이 중요하다!!!)
요소 노드 취득
HTML의 구조의 내용 또는 스타일 등을 동적으로 조작하려면?! 가장 먼저 요소 노드를 취득해야 한다.
id를 이용한 요소 노드 취득
Document.prototype.getElementById 메서드는 인수로 저장한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환한다.
getElementById 메서드는 Document.prototype의 프로퍼티다. 따라서 반드시 문서 노드인 document를 통해 호출해야 한다.
(✨우리가 그동안 사용할 때 앞에 document를 앞에 붙인 이유!)
id 값은 HTML 문서 내에서 유일한 값이어야 한다. 여러 개가 존재하는 경우 id 값을 갖는 첫 번째 요소 노드만 반환한다. 만약 인수로 전달된 id 값을 갖는 HTML 요소가 존재하지 않는 경우 getElementById 메서드는 null을 반환한다.
태그 이름을 이용한 요소 노드 취득
Document.prototype/Element.prototype.getElementsByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다.
해당 메서드는 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
⁉️ HTMLCollection이란?
함수는 하나의 값만 반환할 수 있으므로 여러 개의 값을 반환하려면 배열이나 객체와 같은 자료구조에 담아 반환해야 한다. DOM 컬렉션 객체인 HTMLCollection 객체는 유사 배열 객체이면서 이터러블이다.
(이터러블이란 이터러블 프로토콜을 준수한 객체를 말한다. 이때 이터러블 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 미리 약속한 규칙이다.)
출처: 『모던 자바스크립트 Deep Dive』, 이웅모 저, 위키북스
DOM 개념을 깔끔하게 정리해주셔서 입문자에게 정말 유익한 글인 거 같습니다!