[Javascript] DOM(The Document Object Model)
개요
브라우저에는 웹 문서를 해석할 수 있는 랜더링 엔진이 있다. 랜더링 엔진은 HTML 파일을 할 줄 한 줄 해석한다. 해석이 완료되면 웹 문서를 객체화(Document Object Model)하여 자바스크립트에서 접근할 수 있게 해준다. 문서를 객체화(DOM)한다는게 무엇일까?
DOM
DOM은 두 가지 의미가 있다. 하나는 HTML 문서의 트리 구조(실체)이고 다른 하나는 그 구조를 만들고 조작하는 데 필요한 API와 규칙을 정의한 표준 명세(설계도)가 있다. 혼동하지 않도록 한다.
DOM 구조(실체)
- 문서 객체 모델(Document Object Model, 이하 DOM)이라고 한다.
- DOM은 HTML 코드를 자바스크립트가 다룰 수 있게 객체화 한 것이다.
- Tree 구조를 갖는다. (DOM Tree)
예를 들어, HTML 문서가 다음과 같을 때
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
브라우저는 다음과 같이 문서를 객체화(DOM)한다.
document
└── html
|── head
| └── title
└── body
└── h1각 요소(<html>, <head>, <title>, <body>, <h1>)가 전부 객체로 표현되면, 자바스크립트가 document를 통해 이 객체들에 접근해서 내용을 바꾸거나, 삭제하거나, 새로 만들 수 있다.
그렇다면, document는 무엇일까?
document
DOM 구조(실체)에 접근할 수 있는 시작점(최상위 객체 중 하나)이다.
브라우저(실행 환경)가 자바스크립트에 제공하는 객체이다.
- 자바스크립트가 document 객체를 통해 HTML 문서를 조작할 수 있도록 하기 위해서이다.
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
<script>
document.childNodes[1].childNodes[2].childNodes[1].innerText = "Bye World!";
</script>
</html>document 객체에서 자식 노드를 타고 들어가서 직접 그 노드의 값을 변경해줄 수 있다.
일일이 이렇게 노드를 특정하고 바꿔주는건 무리가 있기 때문에 document 객체의 메서드를 활용하여, 이를 다음과 같이 간단하게 제어 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
<script>
const title = document.queryselector("h1");
title.innerText = "Bye World!";
</script>
</html>이러한 메서드뿐 아니라 여러가지 속성들을 이용할 수 있도록, DOM 사양(설계도)에 맞춰 브라우저가 DOM(실체)를 구현한다.
그렇다면, DOM 사양은 무엇일까?
DOM 사양(설계도)
DOM(실체)을 만들고 조작하는 데 필요한 API와 규칙을 정의한 표준 명세(설계도)이다.
예를 들어,
- document.getElementById() 메서드가 존재해야한다.
- Element 객체에는 innerHTML 속성이 있어야 한다.
- Node는 childNodes를 가져야 한다.
- 등등
W3C나 WHATWG가 이 표준을 작성하고, 브라우저들이 이를 토대로 DOM(실체)을 구현한다.
정리
1. DOM 사양(설계도)은 W3C/WHATWG가 정의한 표준이다.
2. 브라우저는 DOM 사양을 참고해서 DOM 객체(실체)를 구현한다.
3. 개발자는 그 구현체를 통해 자바스크립트로 HTML 문서를 조작할 수 있는 것이다.