DOM(Document Object Model)

DOM이 뭔지 설명할 수 있나요?

TL;DR

DOM(Document Object Model) 은 HTML 또는 XML 문서의 구조를 표현하는 인터페이스로, 프로그래밍 언어가 HTML 또는 XML 기반 문서와 상호작용할 수 있도록 도와준다.
- 예를 들어서, JS라는 프로그래밍 언어로 HTML 문서의 구조, 스타일, 내용 등을 변경할 수 있다.

DOM(Document Object Model)이란?

DOM(Document Object Model)은 HTML 또는 XML 문서의 구조를 표현하는 인터페이스이다.

cf) DOM의 표준 정의를 보고 싶으면 https://dom.spec.whatwg.org/ 을 참고하자.

DOM tree와 Node

DOM은 HTML 또는 XML 기반 문서를 node tree(또는 DOM tree) 로 표현한다.
DOM의 모든 node는 Node라는 인터페이스를 구현한 object이다.
- 각 node는 문서의 각 부분(element, 문자열, 주석 등)을 나타내며, 이벤트 처리기(event handler)를 가질 수도 있다.
- 예를 들어, h1 ~h6 태그는 HTMLHeadingElement 객체로, <p>는 HTMLParagraphElement 객체로 표현된다.
- 이 HTML 문서는 아래와 같이 표현된다.
```
<!DOCTYPE html>
<html class=e>
 <head><title>Aliens?</title></head>
 <body>Why yes.</body>
</html>
```
```
Document
├── Doctype:html
└── Element: html class="e"
    ├── Element: head
    │   └── Element: title
    │       └── Text: Aliens?
    ├── Text: ⏎
    └── Element: body
        └── Text: Why yes.⏎
```
  - 여기에서 Document는 Document라는 인터페이스를 구현한 HTMLDocument 객체이다.
  - Doctype은 DocumentType이라는 인터페이스를 구현한 객체이다.
  - 어떤 인터페이스가 존재하는지는 아래에서 더 자세히 설명하겠다.
  - 다른 HTML 문서가 어떻게 표현되는지 알고 싶다면, Live DOM Viewer 페이지를 찾아가자.
DOM의 메소드는 이 tree에 접근할 수 있는 방법을 제공한다.
- 예를 들어, node를 생성하거나, 이동하거나, 변경함으로써 문서의 구조, 스타일, 내용을 변경할 수 있다.

DOM 인터페이스의 예시

`Node` 인터페이스

모든 DOM의 node는 Node를 기반으로 하는 인터페이스로 표현된다.
Node 인터페이스는 다른 많은 DOM API 객체의 기본이 되는 기본 클래스이다.
- Node를 상속한 객체에는 Document, Element, DocumentFragment 등이 있다.

속성

내가 코딩할 때 자주 쓴 대표적인 속성만 몇 가지 알아보겠다...ㅎㅎ

Node를 상속하는 객체들은 당연히 아래 속성들과 메서드들을 사용할 수 있다.

Node.childNodes (Read only)
- 해당 Node의 자식들이 들어 있는 NodeList를 반환한다.
Node.firstChild (Read only)
- 해당 Node의 첫 번째 자식을 반환하고, 만약 없다면 null을 반환한다.
Node.lastChild (Read only)
- 해당 Node의 마지막 자식을 반환하고, 만약 없다면 null을 반환한다.
Node.nextSibling (Read only)
- node tree 안에서 Node의 다음 노드를 반환하고, 만약 없다면 null을 반환한다.
Node.parentNode (Read only)
- Node의 부모가 되는 노드를 반환하고, 만약 없다면 null을 반환한다. 부모가 없는 경우는 해당 노드가 최상위 노드거나, DOM tree에 들어가 있지 않은 경우 등이 있다.
Node.parentElement (Read only)
- Node의 부모가 되는 Element를 반환하고, 만약 없다면 null을 반환한다. 부모가 없거나, 부모가 Element가 아닌 경우가 있다.
Node.previousSibling (Read only)
- node tree 안에서 Node의 이전 노드를 반환하고, 만약 없다면 null을 반환한다.
Node.textContent
- 어떤 element의 텍스트적인 내용을 반환하거나, 설정할 수 있는 속성이다.

메서드

Node.appendChild()
- Node의 마지막 자식으로 childNode를 삽입한다. 만약 childNode가 DOM tree 안에 이미 존재하고 있다면, 해당 node를 떼어내서 새로운 위치로 이동시킨다.
Node.removeChild()
- Node의 자식 child를 DOM tree에서 삭제할 수 있다. 단, DOM tree에서만 삭제되는 것이고, 메모리에는 여전히 남아 있게 된다. 따라서 참조를 가지고 있다면, 이후 코드에서 DOM에 다시 삽입하는 것이 가능하다. 하지만 참조를 가지고 있지 않다면, 메모리에서도 자동으로 삭제된다.

`Document` 인터페이스

Document 인터페이스는 브라우저에 로드된 웹 페이지를 나타내며, 페이지 콘텐츠(DOM tree)의 진입점이 된다.

`DOMContentLoaded` 이벤트

DOMContentLoaded 이벤트는 HTML 문서가 완전히 파싱되고 모든 지연된 스크립트(<script defer src="…">, <script type="module">)들이 다운로드되고 실행될 때 발생한다. 단, 이미지, 서브프레임, 비동기 스크립트들의 로드는 기다리지 않는다.

참고

DOM: https://developer.mozilla.org/en-US/docs/Glossary/DOM
Introduction to the DOM: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
DOM: https://dom.spec.whatwg.org/
Live DOM Viewer: https://software.hixie.ch/utilities/js/live-dom-viewer/
Node: https://developer.mozilla.org/en-US/docs/Web/API/Node
Node: removeChild() method: https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
Document: https://developer.mozilla.org/en-US/docs/Web/API/Document

DOM(Document Object Model)

DOM이 뭔지 설명할 수 있나요?

Table Of Contents