DOM이란?
문서 객체 모델(Document Object Model, "DOM")은 웹페이지에 대한 인터페이스다. 우리는 DOM을 통해 웹콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 이벤트 등에 대한 처리를 읽고 조작할 수 있는 프로그래밍 인터페이스이다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당한다.
웹페이지는 어떻게 구축되는가?
브라우저가 HTML 파일을 읽어와서 화면에 띄워주는 과정은 'critical rendering path'라고 불린다. 이 과정을 크게 두 가지로 나누자면, 1) 브라우저가 HTML과 CSS를 파싱하여, 결국 화면에 어떤 것이 보여지게 되는지를 결정하는 과정과 2) 브라우저가 렌더링을 하는 과정이다.
critical rendering path의 첫 번째 단계인 브라우저가 HTML과 CSS를 파싱하여, 결국 화면에 어떤 것이 보여지게 되는지를 결정하는 과정의 결과는 "렌더 트리"이다. 렌더링 크리는 페이지에 렌더링 될 HTML 요소와 관련된 스타일을 나타낸다. 이 트리를 구축하려면 브라우저에 두 가지가 필요하다.
- 요소와 관련된 스타일을 표현한 CSSOM(*앞 글자에 달려있는 CSS는 HTML의 CSS 요소인 그 CSS가 맞음)
- 요소의 표현인 DOM
DOM은 어떻게 생성되는가?
DOM은 HTML 문서를 객체 기반으로 표현한 것이다. 객체로 표현한 이유는 HTML의 구조와 내용을 객체 모델로 바꿔서 다양한 프로그램에서 쉽게 사용할 수 있게 하기 위함이다.
DOM의 객체 구조는 "노드 트리"라고도 표현된다. 왜냐하면, DOM을 루트에서부터 여러 노드들이 가지치며 나오는 트리로 생각할 수 있기 때문이다. 루트의 <html> element로 부터 중첩된 여러 element가 뻗어나오게 되며, 말단 노드에는 각 element의 content가 있는 형태이다.
아래 HTML 문서로 예를 들 수 있다.
HTML 문서 안에 h2 태그로 감싸진 text가 존재하고 있을 것이고 해당 문서는 트리 구조로 표현한다면 아래와 같이 표현된다.
document 노드가 최상위 노드가 되고, 밑으로 element 노드가 오며, 이어 text 노드와 attribute 노드가 오는 계층적인 구조임을 알 수 있다. 이러한 노드 타입에는 총 12개가 있는데 가장 중요한 것은 위에서도 명시가 되어 있듯 총 4가지의 노드가 있다.
DOM은 원본 HTML이 아니다.
DOM이 HTML 문서로부터 생성되었고 위 예시를 보면 DOM이 HTML 문서와 1대1로 매핑되는 것 처럼 보이지만, DOM은 HTML이 아니다. 좀 더 자세히 알아보며 그 차이를 이해해야 한다.
1. HTML이 유효하지 않은 경우
DOM은 유효한 HTML 문서를 위한 인터페이스이다. HTML을 파싱하며 DOM을 생성하는 과정에서 브라우저는 HTML 코드의 일부 잘못된 부분을 수정할 수 있다. 예를 들어 아래와 같이 HTML의 요구 사항인 <head>와 <body> 요소가 누락된 유효하지 않은 HTML을 DOM은 head와 body를 추가해서 수정한다.
<!doctype html>
<html>
Hello, world!
</html>↓ DOM을 이용하여 수정된 HTML 코드 ↓
<html>
<head>
<title>My title</title>
</head>
<body>
<h1> Hello, world! </h1>
</body>
</html>2. Javascript로 DOM을 수정하는 경우
Javascript를 이용해서 DOM을 수정할 수 있는데, DOM에 노드를 추가하거나 수정하는 등의 작업을 할 수 있다. 그러면 DOM이 업데이트 되지만 HTML 문서는 업데이트 되지 않는다.
DOM은 브라우저에서 보여지는 것은 아니다.
렌더트리는 오로지 무엇이 렌더링될지에 대해 관심을 갖기 때문에 보여지지 않는 부분은 렌더트리에서 제외가 된다.
display: none 속성이 있는 element는 DOM에는 있지만, 보여지지 않기 때문에 렌더트리에는 빠진다.
<!doctype html>
<html lang="en">
<head></head>
<body>
<h1>Hello, world!</h1>
<p style="display: none;">How are you?</p>
</body>
</html>DOM에는 다음 <p>요소가 포함된다.
- HTML
- 머리
- 몸
- h1
- 안녕, 세상!
- 피
- 어떻게 지내세요?
- h1
그러나 렌더 트리와 뷰포트에 표시되는 요소에는 해당 요소가 포함되지 않는다.
- HTML
- 몸
- h1
- 안녕, 세상!
- h1
- 몸
DOM은 개발자 도구에 있는 것과 같은 것이 아니다.
devtool은 DOM에 가까운 것을 제공한다. 그러나, 데브툴은 DOM에 없더라도, 우리에게 정보를 주기 위해 추가로 넣는 것들이 있다.a
그 예로는 CSS의 pseudo element가 있따. pseudo-element는 CSSOM과 렌더트리로부터 ::before와 ::after 셀렉터로 만들어지게 된다. 그러나, DOM에는 속하지 않는다. DOM은 HTML로부터 만들어지는 것이기 때문에, 그 Element와 관련된 스타일은 포함하지 않기 때문이다. pseudo-element가 DOM의 구성은 아니지만, devtool은 그것을 보여주게 된다. 그러므로, pseudo-element가 devtool에서 보여진다 하더라도, JS로 그 엘리먼트를 target할 수는 없는 것이다.
DOM node와 element의 차이
DOM 문서는 node의 계층 구조로 이루어져 있다. 이때 node는 여러 가지 다양한 유형이 존재한다. 요소(element), 텍스트, 주석 등등...
element는 이러한 node의 여러가지 유형 중 한 가지이다. 따라서 node는 element의 상위 개념이다.
node란?
DOM은 Node의 계층 구조로 이루어져 있다. 각 노드는 부모와 children을 가질 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<!-- Page Body -->
<h2>My Page</h2>
<p id="content">Thank you for visiting my web page!</p>
</body>
</html>위의 HTMl은 아래에 있는 노드들의 계층으로 구성되어있다.
HTML에 있는 tag (<html>, <p>와 같은...)들은 node를 표현하게 된다. 여기서 그저 text이더라도 node가 된다는 점이다. 노드트리를 보면, <p> 자식 노드로 text node가 있는 것을 확인할 수 있다.
element란?
element는 node의 한 종류이다. 주로, <p>, <div> 같은 태그를 사용해서 작성된 노드를 말한다.
앞의 예제에서 element는 <html>, <head>, <title>, <body>, <h2>, <p>이다.
다만 주석이나 text node와 같은 것들은 HTML 태그로 표현된 것이 아니므로 element가 아니다.
참고
'Java Script > 공부 기록' 카테고리의 다른 글
| [JavaScript] 선택자 (0) | 2023.08.28 |
|---|---|
| [JavaScript] 특정 값의 배열 위치(index) 찾기 (0) | 2023.08.27 |
| [JavaScript] 문자열 공백 제거 (0) | 2023.08.23 |
| [JavaScript] Map 메소드 (1) | 2023.08.22 |
| [JavaScript] Part3 Studying - 2 (0) | 2023.08.22 |
