DOM(Document Object Model)

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

Table Of Contents

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">)들이 다운로드되고 실행될 때 발생한다. 단, 이미지, 서브프레임, 비동기 스크립트들의 로드는 기다리지 않는다.

참고