<근본 시리즈 2탄. DOM이란 무엇이란 말이냐? >

강민수·2022년 3월 26일

근본시리즈 노드 웹

근본 시리즈

목록 보기

2/7

이번에는 일전에 예고 드린 대로, 돔이 웹에서 어떤 방식으로 작동하는 지에 대해 한 번 알아보고자 한다.

1. D.O.M.

이름하야, 웹 개발을 한다면 무조건 마주하게 되는 그 이름... 돔.

DOM이란. Document of Object Model의 약자인 것은 개발 관련해서 조금이라도 공부해 본 사람이면 누구나 한 번쯤은 들어본 얘기다.

그렇다면, 여기서 이것들이 무엇을 의미하는 것일까?

일단, 기본적으로 그림들을 보면, 우리가 흔히 알고 있는, html의 기본 골격들이 보인다. 그리고 그 위의 가장 최상단에 document가 보인다.

자! 여기서 잠깐!

위의 코드를 봅시다. html 문서를 작성하면 최상단에 설정해 두는 저 옵션... 저게 바로 doctype 즉. documentype을 설정하는 옵션이다.

즉, 웹 브라우저에게 개발자가 이제부터 작성하는 웹 문서는 html로 작성할 것이다.

라고 선언을 해 주는 것이라고 생각하면 된다. 결국 모든 dom에 대한 시작은 이 작은 옵션 하나에서부터 시작한다.

모질라에서 dom에 대한 정의를 한 번 가지고 와 봤다.

DOM 이란?
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

=> 결론적으로, 요약하자면 우리가 보고 있는 웹 페이지 내부에서 다양한 프로그래밍 언어들이 화면을 그릴 수 있도록 연결시켜주는 연결체다. 결국 이걸 완벽히 이해하기 위해서는 또 웹팩이라고 하는 일종의 번들러도 이해할 필요는 있다. 하지만, 웹팩에 대해서는 추후 더 자세하게 알아보기로 하겠다. 지금은 일단, 간단히만 알고 넘어가자.

2. DOM tree.

이제는 dom의 구조를 알아야 한다. 정확히 말하자면 dom의 트리구조를 의미한다.

그렇다면, dom의 트리 구조? 그것은 또 무엇을 의미하는 것인가?

HTML 문서에 대한 모델 구성
브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree라 한다.

자 결국~ 위의 구조가 dom의 트리 구조다. 아래는 우리가 흔히 보는 html의 구조다. 사실상 비교해 보면 어떤 것 같으신가? 똑같지 않은가?.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .red  { color: #ff0000; }
      .blue { color: #0000ff; }
    </style>
  </head>
  <body>
    <div>
      <h1>Cities</h1>
      <ul>
        <li id="one" class="red">Seoul</li>
        <li id="two" class="red">London</li>
        <li id="three" class="red">Newyork</li>
        <li id="four">Tokyo</li>
      </ul>
    </div>
  </body>
</html>

그렇다. 사실 뜯어보고 보면, dom이라는 것이 간단히 생각해서 html 코드의 계층 구조를 의미한다고 볼 수 있다.

즉, 정리해 보면

DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식이다. 요소의 중첩관계는 객체의 트리로 구조화하여 부자관계를 표현한다. DOM tree의 진입점(Entry point)는 document 객체이며 최종점은 요소의 텍스트를 나타내는 객체이다.

3. DOM에서 Node 구성요소.

자. 위의 예시 그림에서 눈치빠른 사람이면 캐치했을 부분이 있다.

이는 바로 Node. dom의 트리 구조는 크게 4 종류의 node로 구성된다.

1)문서 노드(Document Node)

트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다.

2)요소 노드(Element Node)

요소 노드는 HTML 요소를 표현한다. HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말 할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다.

3)어트리뷰트 노드(Attribute Node)

어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.

4)텍스트 노드(Text Node)

텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.

그림으로 정리해 보면 다음과 같다.

아래처럼, 크롬 개발자 도구를 통해 해당 html 파일이 어떤 노드들로 이루어져 있는 지 확인이 가능하다. 필자가 확인한 것처럼 어떤 요소의 node들을 확인할 수 있다. 여기서 보면, 이 노드안에 자식 노드로 어떤 것들이 있는 지 보여주고 있다.

4. 다음 편 예고 및 정리.

신기하지 않은가? 우리가 흔히 웹이라고 생각하고 단순해 보이는 것들이 이렇게 체계적인 구조로 이뤄져 있다니....
물론 여기에 더불어서 알아야 할 것들은 아직 많다. 그냥 기본중의 기본만 정리한 내용이다. 필자역시 추가적으로 해당 부분 외에 디테일은 더 추가적으로 공부하고 이해한 뒤에 포스팅 할 예정이다.

다음 편은 이런 node들을 어떻게 조작해서 dom을 조작하는 지에 대한 방식에 대해 한 번 얘기해 보겠다.

그러면 긴 글 읽어주셔서 감사하다. 우리 모두 뿌리가 단단해 지는 그날까지 파이팅🙇🏻‍♂️