티스토리 뷰

프론트엔드

DOM, Node, Element

devhanyoung 2024. 4. 11. 21:52

 

DOM은 프론트엔드 개발을 하다보면 자주 접할 수밖에 없는 개념이다.

화면을 동적으로 조작하기 위해서는 필수적으로 사용해야 하기 때문이다.

그런데 DOM API를 자주 사용하고 있으면서도, DOM이라는 게 무엇인지 구체적으로 와닿지 않는다.

또한 DOM과 함께 Node, Element라는 개념도 등장해 혼란을 가중시킨다.

 

이번 포스팅에서는 우리에게 가까운 듯 멀게 느껴지는 DOM, Node, Element의 개념을 명확히 정리하고자 한다.

 

목차는 다음과 같다.

1. DOM
  1-1. 정의
  1-2. DOM이 생긴 이유
  1-3. DOM이 아닌 것
2. Node
  2-1. 정의
  2-2. 유형
3. Element
  3-1. 정의

 

(웹 프론트엔드에서는 XML이 아닌 HTML을 주로 다루므로 아래에서 XML에 대한 언급은 포함하지 않았다. DOM이 HTML 뿐만 아니라 XML에 대한 인터페이스이기도 하다는 사실을 참고로 알아두자.)

DOM

정의

  • DOM(Document Object Model)은 HTML 문서를 조작할 수 있게 해주는 인터페이스이다.
  • DOM은 원본 HTML 문서를 객체 기반으로 표현한 것이다.
  • DOM은 웹 페이지를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다.
  • DOM은 Node로 이루어진 트리이다.

 

이해를 돕기 위해 테오님의 글 내용 중 'DOM이 생긴 이유' 파트를 빌려왔다

DOM이 생긴 이유에 대해 알게 되면 위의 정의가 조금 더 와닿을 것이다.

DOM이 생긴 이유

HTML 조작의 불편함

HTML은 문자열로 이루어진다. 이렇게 단순 문자열로 이루어진 HTML은 프로그래밍 언어로 조작하기 불편하다.

또한 문자열인 HTML은 일부만 수정하는 게 불가능하다.

부분 수정을 위해서 전체 구조를 다시 만들어야 하는데 이 비용이 매우 크다.

이처럼 HTML은 인간에게는 보기 편한 문서일지 몰라도 컴퓨터에게 이해하기 좋은 형태가 아니다.

 

DOM의 탄생

HTML을 효율적으로 다루기 위해서는 이를 컴퓨터가 알아듣기 좋은 형태로 만들어야 했다.

그래서 HTML을 문자열이 아닌 객체 형태로 표현을 했고, 이것이 DOM이다.

DOM 덕분에 객체의 프로퍼티/메서드를 다루는 방식으로 HTML을 다룰 수 있게 되었다.

이로써 HTML을 다루는 일이 훨씬 간편해졌으며 성능 비용도 크게 감소했다.

 

이 내용을 바탕으로 DOM을 'HTML을 프로그래밍 언어로 조작하기 좋은 형태로 만들어 놓은 것(즉, 인터페이스)'으로 이해할 수 있다.

 

 

추가적으로 WIT 블로그 고우영님의 글 내용 중 'DOM이 아닌 것' 파트를 빌려왔다.

DOM이 아닌 것을 알면, 반대로 DOM이 무엇인지 더 와닿을 것이다.

DOM이 아닌 것

1. DOM은 HTML이 아니다.

DOM이 HTML로부터 만들어지는 것은 사실이지만, DOM과 HTML이 항상 동일한 건 아니다.

DOM이 원본 HTML 소스와 다른 두 가지 경우가 있다.

  • HTML 문서가 유효하지 않을 경우: DOM은 유효한 HTML 문서의 인터페이스이다. DOM을 생성할 때, 브라우저는 유효하지 않은 HTML 코드를 올바르게 교정한다. 예를 들어 HTML 규칙의 필수사항인 <head>와 <body> 요소를 빠뜨릴 경우, DOM 트리에는 두 요소가 추가됨으로써 올바르게 교정되어 나타난다.
  • JS에 의해 DOM이 수정될 때: DOM은 HTML문서의 인터페이스 역할을 하는 동시에 동작 자원이 되어 수정될 수 있다. JS 코드로 DOM에 새로운 Node를 추가하거나 기존 요소를 삭제하는 등 수정을 가할 수 있다. 이때, DOM은 업데이트되지만, 원본 HTML 문서의 내용은 변경되지 않는다.

2. DOM은 브라우저에서 보이는 것이 아니다.

브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합이다.

렌더 트리는 오직 스크린에 그려지는 것으로만 구성되어 있어 DOM과 다르다.

DOM에는 렌더링되지 않는 요소, 즉 시각적으로 보이지 않는 요소까지 포함한다.

예를 들어 'display: none' 스타일 속성을 가지고 있는 요소는 렌더 트리에는 포함되지 않지만, DOM에는 포함된다.

 

3. DOM은 개발자 도구에서 보이는 것이 아니다.

개발자 도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공한다.

하지만 이 역시도 DOM과 완전히 동일하진 않다. 개발자 도구 요소 검사기에는 DOM에 없는 추가 정보를 포함한다.

이에 해당하는 가장 좋은 예는 CSS 가상 요소이다.

예를 들어, ::before ::after 선택자를 사용하여 생성된 가상 요소는 CSSOM과 렌더 트리의 일부를 구성한다.

하지만 이는 DOM의 일부로는 포함되지 않는다.

DOM은 오직 원본 HTML 문서로부터 생성되고, 요소에 적용되는 스타일은 포함하지 않기 때문이다.

Node

정의

  • Node는 노드 트리의 단일 지점이다.
  • Node는 DOM을 구성하는 계층적 단위이다.

앞서 살펴보았듯 DOM은 HTML을 트리 형태의 객체로 모델링한 것이다.

DOM

html을 모델링한 트리(DOM)에서 각 단일 지점에 해당하는 객체를 Node라고 부른다.

우리는 특정 Node를 취득하고, 해당 Node를 기점으로 트리를 옮겨 다니며 부모/형제/자식 Node를 탐색할 수 있다.

 

유형

DOM에 포함될 수 있는 Node의 유형은 다음과 같다.

Document Node(문서 노드) HTML 문서 전체를 나타내는 Node이다.
Element Node(요소 노드) HTML 요소에 해당하는 Node이다. 속성 노드를 가질 수 있는 유일한 Node이다.
Attribute Node(속성 노드) HTML 요소의 속성에 해당하는 Node이다. Element Node에 관한 정보를 가지고 있다.
단, Element Node의 자식 노드에 포함되지는 않는다.
Text Node(텍스트 노드) HTML 문서의 텍스트에 해당하는 Node이다.
Comment Node(주석 노드) HTML 문서의 주석에 해당하는 Node이다.

 

Element

정의

  • Element는 Node의 한 종류이다.(Wep api의 Element 클래스는 Node 클래스를 상속받는다.)
  • Node 중 HTML 요소에 해당하는 Node이다.

쉽게 말하면, 모든 Element는 Node에 해당하지만, 모든 Node가 Element인 것은 아니다.

 

이를 더 잘 이해하기 위해 하나의 예시를 살펴보자.

<p>
  <span>Element Node</span> Text Node
</p>
const paragraph = document.querySelector('p');

paragraph.childNodes; // NodeList:       [HTMLElement, Text]
paragraph.children;   // HTMLCollection: [HTMLElement]

차이가 보이는가?

childNodes 프로퍼티는 유형 구분없이 모든 자식 Node를 가져오기 때문에 Element Node와 Text Node를 모두 가져왔다.

반면, childern 프로퍼티는 자식 Node 중에서 Element Node만 가져오기 때문에 Text Node를 제외하고 가져왔다.

 

이 예시를 통해 모든 Node가 Element Node는 아니라는 사실을 알 수 있다.

만약 Node와 Element가 다르다는 사실을 모른다면, 이러한 현상이 잘 이해되지 않을 것이다.

짧은 소감

항상 헷갈렸던 DOM, Node, Element의 개념에 대해 정리하니 한결 후련하다.

어렴풋한 느낌으로만 이해했던 개념들이 머릿속에 보다 선명히 그려지게 됐다.

 

프로그래밍을 잘하기 위해 중요한 한 가지 능력은, 추상적인 개념들을 구체적인 형태로 빚어내는 능력인 것 같다.

본질적으로 추상적이고 모호할 수밖에 없는 여러 개념들을, 반복해서 접하고 공부하여 나만의 방식으로 그려낼 수 있어야 한다.

그렇지 않으면 유사해 보이는 다양한 개념들 사이에서 혼란을 겪는 일이 점차 많아지기 때문이다.

 

그러니, 귀찮고 고되어도 용어/개념 정리를 소홀히 하지 말자 💪🏻

참고 자료 🙇🏻‍♂️

[MDN] DOM 소개

[WIT블로그] DOM은 정확히 무엇일까?

[코드스테이츠 블로그] 문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법

[yejineee님의 블로그] DOM은 무엇인가? DOM Node와 Element의 차이

[TCPSchool] 노드

[MDN] 노드

'프론트엔드' 카테고리의 다른 글

이벤트 전파(Event Propagation)  (1) 2024.04.14
옵저버 패턴으로 컴포넌트 상태 변화 감지하기  (1) 2024.04.10