DOM (Document Object Model)
HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API
- 즉, 프로퍼티와 메서드를 제공하는 트리 자료구조
노드
✅HTML 요소와 노드 객체
- HTML 요소
- HTML 문서를 구성하는 개별적인 요소
- HTML 요소는 중첩 관계를 가지므로 HTML 요소의 콘텐츠 영역에는 텍스트뿐만 아니라 다른 HTML 요소도 포함될 수 있다.
- 이떄 HTML 요소 간 중첩 관계에 의한 계층적인 부자관계가 형성된다.
- 이 부자 관계를 반영하여 HTML 문서의 구성요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다.
- 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.
- 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다.
📍트리 자료구조
부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조
- 노드들의 계층 구조로 이루어진다.
- 트리 자료구조는 하나의 최상위 노드에서 시작한다.
- 최상위 노드는 부모 노드가 없으며 루트 노드라고 한다.
- 루트 노드는 0개 이상의 자식 노드를 가지며 자식 노드가 없는 노드를 리프 노드라고 한다.
- 이러한 노드 객체들로 구성된 트리 자료 구조를 DOM이라 한다.
- 노드 객체의 트리로 구조화되어 있기 때문에 DOM을 DOM 트리라고 부르기도 한다.
✅노드 객체의 타입
- 렌더링 엔진은 아래 HTML 문서를 다음과 같이 파싱한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</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>
- 노드 객체는 총 12개의 타입을 갖는데, 중요한 노드 타입은 아래 네 가지이다.
1️⃣ 문서 노드 (document node)
- DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다.
- document 객체는 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체로서 전역 객체 window의 document 프로퍼티에 바인딩되어 있어 문서 노드는 window.document 또는 document로 참조할 수 있다.
- 브라우저 환경의 모든 자바스크립트 코드는 script 태그에 의해 분리되어 있어도 하나의 전역 객체 window를 공유하기 때문에 HTML 문서당 document 객체는 유일하다.
- 문서 노드, 즉 document 객체는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당한다.
- 즉, 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다.
2️⃣ 요소 노드 (element node)
- 요소 노드는 HTML 요소를 가리키는 객체이다.
- HTML 요소 간의 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다.
- 즉, 요소 노드는 문서의 구조를 표현한다고 할 수 있다.
3️⃣ 어트리뷰트 노드 (attribute node)
- 어트리뷰트 노드는 HTML 요소의 어트리뷰트를 가리키는 객체이다.
- 어트리뷰트 노드는 어트리뷰트가 지정된 HTML 요소의 요소 노드와 연결되어 있다.
- 단, 요소 노드는 부모 노드와 연결되어 있지만 어트리뷰트 노드는 요소 노드에만 연결되어 있다.
- 즉, 어트리뷰트 노드는 부모 노드가 없으므로 요소 노드의 형제 노드는 아니다.
- 따라서 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야 한다.
4️⃣ 텍스트 노드 (text node)
- 텍스트 노드는 HTML 요소의 텍스트를 가리키는 객체이다.
- 요소 노드가 문서의 구조를 표현한다면 텍스트 노드는 문서의 정보를 표현한다.
- 텍스트 노드는 요소 노드의 자식 노드이며 자식 노드를 가질 수 없는 리프 노드이다.
- 즉, 텍스트노드는 DOM 트리의 최종단이며 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 한다.
DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다. 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.
요소 노드 취득
✅ id를 이용한 요소 노드 취득
- Document.prototype.getElementById 메서드는 인수로 전달한 id 어트리뷰트 값(이하 id 값)을 갖는 하나의 요소 노드를 탐색하여 반환한다.
- getElementById 메서드는 Document.prototype의 프로퍼티이기 때문에 반드시 문서 노드인 document를 통해 호출해야 한다.
- id 값은 HTML 문서 내에서 유일한 값이어야 하며 class 어트리뷰트와는 달리 공백 문자로 구분하여 여러 개의 값을 가질 수 없다.
- 단, HTML 문서 내에 중복된 id 값을 갖는 HTML 요소가 여러 개 존재하더라도 어떠한 에러도 발생하지 않는다.
- 즉, HTML 문서 내에는 중복된 id 값을 갖는 요소가 여러 개 존재할 가능성이 있다.
- 이 경우 getElementById 메서드는 인수로 전달된 id 값을 갖는 첫 번째 요소 노드만 반환한다.
- 즉, getElementById 메서드는 언제나 단 하나의 요소 노드를 반환한다.
- 만약 인수로 전달된 id 값을 갖는 HTML 요소가 존재하지 않는 경우 getElementById 메서드는 null을 반환한다.
- HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수효과가 있다.
- id 값과 동일한 이름의 전역 변수가 이미 선언되어 있으면 이 전역 변수에 노드 객체가 재할당되지 않는다.
✅ 태그 이름을 이용한 요소 노드 취득
- Document.prototype / Element.prototype.getElementsByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다.
- 메서드 이름에 포함된 Elements가 복수형인 것에서 알 수 있듯이 getElementsByTagName 메서드는 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
- 함수는 하나의 값만 반환할 수 있으므로 여러 개의 값을 반환하려면 배열이나 객체와 같은 자료구조에 담아 반환해야 한다.
- getElementsByTagName 메서드가 반환하는 DOM 컬렉션 객체인 HTMLCollection 객체는 유사 배열 객체이면서 이터러블이다.
- HTML 문서의 모든 요소 노드를 취득하려면 getElementsByTagName 메서드의 인수로 '*'를 전달한다.
- Document.prototype.getElementsByTagName 메서드는 DOM의 루트 노드인 문서 노드, 즉 document를 통해 호출하며 DOM 전체에서 요소 노드를 탐색하여 반환한다.
- Elernent.prototype.getElementsByTagName 메서드는 특정 요소 노드를 통해 호출하며 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.
- 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우 getElementsByTagName 메서드는 빈 HTMLCollection 객체를 반환한다.
✅ class를 이용한 요소 노드 취득
- Document.prototype / Element.prototype.getElementsByClassName 메서드는 인수로 전달한 클래스 이름을 갖는 어트리뷰트 값을 갖는 모든 요소 노드들을 탐색하여 반환한다.
- 인수로 전달할 class 값은 공백으로 구분하여 여러 개의 class를 지정할 수 있다.
- getElementsByTagName 메서드와 마찬가지로 getElementsByClassName 메서드는 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
- getElementsByTagName 메서드와 마찬가지로 Document.prototype에 정의된 메서드와 Element.prototype에 정의된 메서드가 있다.
- Document.prototype.getElementsByClassName 메서드는 DOM의 루트 노드인 문서 노드, 즉, document를 통해 호출하며 DOM 전체에서 요소 노드를 탐색하여 반환한다.
- Element.prototype.getElementsByClassName 메서드는 특정 요소 노드를 통해 호출하며 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.
- 인수로 전달된 class 값을 갖는 요소가 존재하지 않는 경우 getElementsByClassName 메서드는 빈 HTMLCollection 객체를 반환한다.
✅ CSS 선택자를 이용한 요소 노드 취득
- CSS 선택자는 스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용한다.
- Document.prototype / Element.prototype.querySelelctor 메서드는 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드를 탐색하여 반환한다.
- 인수로 전달한 CSS 선택자를 만족시키는 요소 노드가 여러 개인 경우 첫 번째 요소 노드만 반환한다.
- 인수로 전달된 CSS 선택자를 만족시키는 요소 노드가 존재하지 않는 경우 null을 반환한다.
- 인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 DOMException 에러가 발생한다.
- querySelectorAll 메서드는 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체를 반환한다.
- NodeList 객체는 유사 배열 객체이면서 이터러블이다.
- 인수로 전달된 CSS 선택자를 만족시키는 요소가 존재하지 않는 경우 빈 NodeList 객체를 반환한다.
- 인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 DOMException 에러가 발생한다.
✅ 특정 요소 노드를 취득할 수 있는지 확인
- Element.prototype.matches 메서드는 인수로 전달한 CSS 선택자를 통해 특정 요소 노드를 취득할 수 있는 지 확인한다.
- Element.prototype.matches 메서드는 이벤트 위임을 사용할 때 유용하다.
✅ HTMLCollection과 NodeList
DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체
- 둘 모두 유사 배열 객체이면서 이터러블이기 때문에 for...of 문으로 순회할 수 있으며 스프레드 문법을 사용하여 간단히 배열로 변환할 수 있다.
- 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는(live) 객체이다.
- HTMLCollection은 언제나 live 객체로 동작하며 NodeList는 대부분의 경우 노드 객체의 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있다.
- 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다.
📍HTMLCollection
- 실시간으로 노드 객체의 상태 변경을 반영하여 요소를 제거할 수 있기 떄문에 HTMLCollection 객체를 for문으로 순회하면서 노드 객체의 상태를 변경해야 할 때 주의해야 한다.
📍NodeList
- 노드 객체의 상태 변경을 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작한다.
- childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요하다.
노드 탐색
- 요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드 등읠 탐색해야 할 때가 있다.
- DOM 트리 상의 노드를 탐색할 수 있도록 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다.
- 노드 탐색 프로퍼티는 모두 접근자 프로퍼티이지만 setter 없이 getter만 존재하여 참조만 가능한 읽기 전용 접근자 프로퍼티이다.
- 읽기 전용 접근자 프로퍼티에 값을 할당하면 아무런 에러 없이 무시된다.
✅ 공백 텍스트 노드
- HTML 요소 사이의 스페이스, 탭, 줄바꿈 등의 공백 문자는 텍스트 노드를 생성하는데 이를 공백 텍스트 노드라 한다.
- 공백 문자가 포함된 HTML문서는 파싱되어 다음과 같은 DOM을 생성한다.
- 따라서 노드를 탐색할 때는 공백 문자가 생성한 공백 텍스트 노드에 주의해야 한다.
- 인위적으로 HTML 문서의 공백 문자를 제거하면 공백 텍스트 노드를 생성하지 않지만 가독성이 좋지 않으므로 권장하지 않는다.
✅ 자식 노드 탐색
- 자식 노드를 탐색하기 위해서는 아래와 같은 노드 탐색 프로퍼티를 사용한다.
- Node.prototype.childNodes
- 자식 노드를 모두 탐색하여 DOM 컬렉션 객체인 NodeList에 담아 바노한한다.
- childNodes 프로퍼티가 반환한 NodeList에는 요소 노드 뿐만 아니라 텍스트 노드도 포함되어 있을 수 있다.
- Element.prototype.children
- 자식 노드 중에서 요소 노드만 모두 탐색하여 DOM 컬렉션 객체인 HTMLCollection에 담아 반환한다.
- children 프로퍼티가 반환한 HTMLCollection에는 텍스트 노드가 포함되지 않는다.
- Node.prototype.firstChild
- 첫 번째 자식 노드를 반환한다.
- firstCHild 프로퍼티가 반환한 노드는 텍스트 노드이거나 요소 노드이다.
- Node.prototype.lastChild
- 마지막 자식 노드를 반환한다.
- lastChild 프로퍼티가 반환한 노드는 텍스트 노드이거나 요소 노드이다.
- Element.prototype.firstElementChild
- 첫 번째 자식 요소 노드를 반환한다.
- firstElementChild 프로퍼티는 요소 노드만 반환한다.
- Element.prototype.lastElementChild
- 마지막 자식 요소 노드를 반환한다.
- lastElementChild 프로퍼티는 요소 노드만 반환한다.
✅ 자식 노드 존재 확인
- 자식 노드가 존재하는지 확인하려면 Node.prototype.hasChildNodes 메서드를 사용한다.
- 자식 노드가 존재하면 true, 자식 노드가 존재하지 않으면 false를 반환한다.
- 단, hasChildNodes 메서드는 childNodes 프로퍼티와 마찬가지로 텍스트 노드를 포함하여 자식 노드의 존재를 확인한다.
- 자식 노드 중에 텍스트 노드가 아닌 요소 노드가 존재하는지는 확인하려면 hasChildNodes 메서드 대신 children.length 또는 Element 인터페이스의 childElementCount 프로퍼티를 사용한다.
✅ 요소 노드의 텍스트 노드 탐색
- 요소 노드의 텍스트 노드는 요소 노드의 자식 노드이기 때문에 요소 노드의 텍스트 노드는 firstChild 프로퍼티로 접근 가능하다.
- firstChild 프로퍼티는 첫 번째 자식 노드를 반환한다.
- firstChild 프로퍼티가 반환한 노드는 텍스트 노드이거나 요소 노드이다.
✅ 부모 노드 탐색
- 부모 노드를 탐색하려면 Node.prototype.parentNode 프로퍼티를 사용한다.
- 텍스트 노드는 DOM 트리의 최종단 노드인 리프 노드이므로 부모 노드가 텍스트 노드인 경우는 없다. \
✅ 형제 노드 탐색
- 부모 노드가 같은 형제 노드를 탐색하려면 아래와 같은 노드 탐색 프로퍼티를 사용한다.
- 단, 어트리뷰트 노드는 요소 노드와 연결되어 있지만 부모 노드가 같은 형제 노드가 아니기 때문에 반환되지 않는다.
- 즉, 아래 프로퍼티는 텍스트 노드 또는 요소 노드만 반환한다.
- Node.prototype.previousSibling
- 부모 노드가 같은 형제 노드 중에서 자신의 이전 형제 노드를 탐색하여 반환한다.
- previousSibling 프로퍼티가 반환하는 형제 노드는 요소 노드뿐만 아니라 텍스트 노드일 수도 있다.
- Node.prototype.nextSibling
- 부모 노드가 같은 형제 노드 중에서 자신의 다음 형제 노드를 탐색하여 반환한다.
- nextSibling 프로퍼티가 반환하는 형제 노드는 요소 노드뿐만 아니라 텍스트 노드일 수도 있다.
- Element.prototype.previousElementSibling
- 부모 노드가 같은 형제 요소 노드 중에서 자신의 이전 형제 요소 노드를 탐색하여 반환한다.
- previousElementSibling 프로퍼티는 요소 노드만 반환한다.
- Element.prototype.nextElementSibling
- 부모 노드가 같은 형제 요소 노드 중에서 자신의 다음 형제 요소 노드를 탐색하여 반환한다.
- nextElementSibling 프로퍼티는 요소 노드만 반환한다.
노드 정보 취득
- 노드 객체에 대한 정보를 취득하려면 다음과 같은 노드 정보 프로퍼티를 사용한다.
- Node.prototype.nodeType
- 노드 객체의 종류, 즉 노드 타입을 나타내는 상수를 반환한다.
- 노드 타입 상수는 Node에 정의되어 있다.
- Node.ELEMENT_NODE: 요소 노드 타입을 나타내는 상수 1을 반환
- Node.TEXT_NODE: 텍스트 노드 타입을 나타내는 상수 3을 반환
- Node.DOCUMENT_NODE: 문서 노드 타입을 나타내는 상수 9를 반환
- Node.prototype.nodeName
- 노드의 이름을 문자열로 반환한다.
- 요소 노드: 대문자 문자열로 태그 이름 ("UL", "LI" 등)을 반환
- 텍스트 노드: 문자열 "#text"를 반환
- 문서 노드: 문자열 "#document"를 반환
요소 노드의 텍스트 조작
✅ nodeValue
- Node.prototype.nodeValue 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티이므로 참조와 할당이 모두 가능하다.
- 노드 객체의 nodeValue프로퍼티를 참조하면 노드 객체의 값을 반환한다.
- 노드 객체의 값은 텍스트 노드의 텍스트이므로 텍스트 노드가 아닌 노드의 nodeValue 프로퍼티를 참조하면 null을 반환한다.
- 텍스트 노드의 nodeValue 프로퍼티를 참조할 때에만 텍스트 노드의 값, 즉 텍스트를 반환한다.
- 텍스트 노드의 nodeValue 프로퍼티에 값을 할당하면 텍스트 노드의 값, 즉 텍스트를 변경할 수 있다.
✅ textContent
- Node.prototype.textContent 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경한다.
- 요소 노드의 textContent 프로퍼티를 참조하면 요소 노드의 콘텐츠 영역 내의 텍스트를 모두 반환한다.
- 즉, 요소 노드의 childNodes 프로퍼티가 반환한 모든 노드들의 텍스트 노드의 값을 모두 반환하며 이때 HTML 마크업은 무시된다.
- 요소 노드의 textContent 프로퍼티에 문자열을 할당하면 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열이 텍스트로 추가된다.
- 이때 할당한 문자열에 HTML 마크업이 포함되어 있더라도 문자열 그대로 인식되어 텍스트로 취급된다.
- 즉, HTML 마크업이 파싱되지 않는다.
- textContent와 유사한 동작을 하는 innerText 프로퍼티는 아래와 같은 이유로 사용하지 않는 것이 좋다.
- innerText 프로퍼티는 CSS에 순종적이다. 예를 들어, innerText 프로퍼티는 CSS에 의해 비표시로 지정된 요소 노드의 텍스트를 반환하지 않는다.
- innerText 프로퍼티는 CSS를 고려해야 하므로 testContent 프로퍼티보다 느리다.
DOM 조작
새로운 노드를 생성하여 DOM에 추가하거나 기존 노트를 삭제 또는 교체하는 것
- DOM 조작에 의해 DOM에 새로운 노드가 추가되거나 삭제되면 리플로우와 리페인트가 발생하는 원인이 되므로 성능에 영향을 준다.
✅ innerHTML
- Element.prototype.innerHTML 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 HTML 마크업을 취득하거나 변경한다.
- 요소 노드의 innerHTML 프로퍼티를 참조하면 요소 노드의 콘텐츠 영영 내에 포함된 모든 HTML 마크업을 문자열로 반환한다.
- textContent 프로퍼티를 참조하면 HTML 마크업을 무시하고 텍스트만 반환하지만 innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열을 그대로 반환한다.
- 요소 노드의 innerHTML 프로퍼티에 문자열을 할당하면 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열에 포함되어 있는 HTML 마크업이 파싱되어 요소 노드의 자식 노드로 DOM에 반영된다.
- 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 크로스 사이트 스크립팅 공격에 취약하므로 위험하다.
- HTML 마크업 내에 자바스크립트 악성 코드가 포함되어 있다면 파싱 과정에서 그대로 실행될 가능성이 있기 때문이다.
- innerHTML 프로퍼티에 HTML 마크업 문자열을 할당하면 유지되어도 좋은 기존의 자식 노드까지 모두 제거하고 다시 처음부터 새롭게 자식 노드를 생성하여 DOM에 반영하여 비효율적이다.
어트리뷰트
- HTML 문서의 구성요소인 HTML 요소는 여러 개의 어트리뷰트를 가질 수 있다.
- HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공하는 HTML 어트리뷰트는 HTML 요소의 시작 태그에 어트리뷰트 이름="어트리뷰트 값" 형식으로 정의한다.
<input id="user" type="text" value="billy">
- id, class, style 어트리뷰트는 모든 HTML 요소에 사용할 수 있지만 type, value, checked 어트리뷰트는 input 요소에만 사용할 수 있다.
- 모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NamedNodeMap 객체에 담겨서 요소 노드의 attributes 프로퍼티에 저장된다.
- 요소 노드의 모든 어트리뷰트 노드는 요소 노드의 Element.prototype.attributes 프로퍼티로 취득할 수 있다.
스타일
- HTMLElement.prototype.style 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 인라인 스타일을 취득하거나 추가 또는 변경한다.
- style 프로퍼티를 참조하면 CSSStyleDeclaration 타입의 객체를 반환한다.
- CSSstyleDeclaration 객체는 다양한 css 프로퍼티에 대응하는 프로퍼티를 가지고 있으며 이 프로퍼티에 값을 할당하면 해당 CSSS 프로퍼티가 인라인 스타일로 HTML 요소에 추가되거나 변경된다.
- CSS 프로퍼티는 케밥 케이스를 따르고 이에 대응하는 CSSStyleDeclaration 객체의 프로퍼티는 카멜 케이스를 따른다.
DOM 표준
- HTML과 DOM의 표준은 W3C와 WHATWG에서 협력하면서 공통된 표준을 만들어 왔으나 현재는 구글, 애플, 마이크로소프트, 모질라로 구성된 4개의 주류 브라우저 벤더사가 주도하는 WHATWG이 단일 표준을 내놓기로 합의했다.
- DOM은 현재 다음과 같이 4개의 레벨이 있다.
![[JS] 모던 자바스크립트 Deep Dive - 39. DOM](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcdByyc%2FbtsJDe8B1j4%2FHIaHqieS9IltBL0VO2caE0%2Fimg.png)