DOM(Document Object Model)이란 무엇일까?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>example</title>
</head>
<body>
<h1>hello!</h1>
</body>
</html>
예를들어 위와 같은 HTML파일을 브라우저에서 읽게될 때 body, section태그 등 이런 태그들은 노드로 변환된다.
즉, 각각의 태그들을 분석해서 브라우저가 읽을 수 있는 노드로 변환되어진다.
HTML파일에서 쓰인 태그들은 자바스크립트에서 노드로 변환되고 이 노드 오브젝트 안에는 HTML파일에서 작성한 클래스같은 정보들이나 텍스트같은 것들이 포함되어있다.
상속관계를 시각적으로 표현해보자면
Node는 EventTarget을 상속한다. 결국 모든 Node는 이벤트를 발생할수 있고 document라는 것은 node를 상속하고 node는 EventTarget을 상속하기 때문에 document와 동일하게 node를 상속하는 element, text 등 모든 요소에서 이벤트가 발생할 수 있는 것이다.
다시 정리해보자.
HTML파일을 브라우저가 읽으면 작성한 HTML태그들을 그에 맞는 클래스를 이용해 자바스크립트 노드 오브젝트로 변환한다
<div>태그가 있다고하면 HTMLDivElement클래스를 이용해 오브젝트로 변환한다는 것이다.
결국 DOM트리요소는 아래와 같이 브라우저가 이해할수있는 오브젝트로 변환되어지고 아래와 같이 트리구조로 구성된다.
'HTML CSS' 카테고리의 다른 글
| [HTML] 브라우저 렌더링 과정 (0) | 2021.03.25 |
|---|---|
| [HTML] 시맨틱(Semantic) 태그에 대하여 (0) | 2021.02.04 |
| [HTML] 🤔 HTML5란? (0) | 2021.01.31 |
