상세 컨텐츠

본문 제목

[JavaScript] JS DOM

Coding/JS

by hwlink 2022. 1. 2. 16:09

본문

:: DOM?

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다. 먼저 DOM을 이해하기 전에 웹 페이지가 어떻게 빌드 되는지 살펴보겠습니다.

:: DOM 원리 역할

1. HTML 내용을 브라우저에 표시하게 해준다.

웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 “Critical Rendering Path”라고 합니다.

1단계

  • 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정.

2단계

  • 브라우저는 해당 렌더링을 수행.

Critical Rendering Path

\1번째 과정을 거치면 “렌더 트리”가 생성되고, 렌더 트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성됩니다. 브라우저는 렌더 트리를 생성하기 위해 다음과 같이 두 모델이 필요합니다.

  • DOM(Document Object Model) – HTML 요소들의 구조화된 표현
  • CSSOM(Cascading Style Sheets Object Model) – 요소들과 연관된 스타일 정보의 구조화된 표현

:: 문서 요소를 프로그래밍 언어로 조작하기 위해 필요하다.

DOM은 원본 HTML 문서의 객체 기반 표현 방식입니다. 프로그램이 해당 요소에 엑세스 할 수 있게 되어 수정이 가능해진다.

DOM은 브라우저가 자바스크립트를 구현할 때 나온 개념으로 일반적으로 Java Script에서의 활용을 의미하지만 다른 모든 언어에서 쓰일 수 있다.

:: DOM 특징

DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 DOM의 개체 구조는 “Node Tree”로 표현됩니다. 하나의 부모줄기에서 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 각각의 잎을 구성할 수 있는 구조로 되어있다.

  • 루트 Element “부모 줄기”,
  • 루트 요소에 내포된 태그들은 “자식 나뭇가지”
  • 요소 안의 컨텐츠는 “잎”

아래 HTML에서

이 문서는 아래와 같은 노드 트리로 표현됩니다.

혼동되는 DOM

1. DOM은 HTML이 아닙니다.

DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않는다. DOM이 원본 HTML 소스와 다를 수 있는 2가지 케이스가 있다.

* 1.작성된 HTML 문서가 유효하지 않을 때

아래 예시에서,

<html>
    hello dudud
</html>

문서에 유효한 HTML 규칙의 필수 인자요소가 빠져있다. 그렇지만 생성된 DOM 트리에는 올바르게 교정되어 나타난다.

*2. 자바스크립트에 의해 DOM이 수정될 때

DOM은 HTML 문서의 내용을 볼 수 있는 인터페이스 역할을 하는 동시에 수정이 가능하도록 html 문서 내용을 자원화한 것

이 코드는 DOM을 업데이트합니다. 하지만 HTML 문서의 내용을 변경하진 않습니다.

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

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

렌더 트리는 오직 스크린에 그려지는 것으로 구성되어 있어 DOM과 다릅니다. 렌더트리에는 스크린에 그려져야 할 요소들만 포함되어 있으나 DOM에는 시각적으로 보이지 않는 요소도 포함하고 있다. (ex: display: none 스타일 속성을 가진 요소 )

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

개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공하나 개발도구의 요소 검사기는 DOM에 없는 추가적인 정보를 포함합니다.

::before 과 ::after 선택자를 사용하여 생성된 가상 요소는 CSSOM과 렌더 트리의 일부를 구성하나 DOM은 오직 원본 HTML 문서로부터 구성되어지고 요소에 적용되는 스타일을 포함하지 않기 때문에 가상요소는 DOM에 포함되지 않는다.

가상요소인 ::after DOM의 일부가 아님에도 불구하고, 요소 검사기에서는 아래와 같이 확인됩니다.

가상 요소는 DOM의 일부가 아니기 때문에 Java Script에 의해 수정될 수 없다.

마무리

웹페이지의 html을 계층화 시켜 트리구조로 만든 객체(object) 모델, Java Script 이 모델로 웹페이지에 접근하고, 페이지를 수정할 수 있다. DOM은 웹페이와 Script언어를 잇는 역할이다.

DOM은 뷰포트에 무엇을 렌더링 할지 결정하며, 페이지의 콘텐츠 및 구조, 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.

DOM, HTML 차이점

  • 항상 유효한 HTML 형식.
  • 자바스크립트에 수정될 수 있는 동적 모델이어야 합니다.
  • 가상 요소를 포함하지 않습니다. (ex. ::after, ::before 등)
  • 보이지 않는 요소를 포함. (Ex. display: none)

참고자료

MDN – DOM 소개https://developer.mozilla.org/ko/docs/Gecko_DOM_Reference/소개

NAVER D2 – 브라우저는 어떻게 동작하는가?https://d2.naver.com/helloworld/59361

WIT블로그 - (번역)DOM은 정확히 무엇일까?https://wit.nts-corp.com/2019/02/14/5522

Ire Aderinokun - What, exactly, is the DOM?https://bitsofco.de/what-exactly-is-the-dom/?utm_source=CSS-Weekly&utm_campaign=Issue-341&utm_medium=email

자바스크립트 인포 https://ko.javascript.info/dom-nodes

'Coding > JS' 카테고리의 다른 글

[JavaScript] 완벽가이드 Hoisting  (0) 2022.02.20
[JavaScript] Syntactic Sugar  (0) 2022.01.09
[JavaScript] Runtime Stack, Queue, Eventloop  (0) 2021.12.31
JS 자바스크립트 Sort, pop 가장 긴 문자열 반환해주기  (0) 2021.11.13
JS 자바스크립트 문자 첫번째 위치 반환 findIndex, indexOf, search  (0) 2021.11.13

관련글 더보기

티스토리툴바