DOM이란?
문서를 객체화 하여 트리로 만들어 놓은 상태. 자바스크립트를 통해 접근하고 제어한다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
</head>
<body>
<h1>DOM</h1>
<p>안녕하세요 DOM입니다</p>
<div>Document Object Model</div>
</body>
</html>자바스크립튼 동적인 요소를 제어하기위해 등장했다. 이 DOM트리를 이용해서 웹페이지의 요소에 접근하고 제어 할 수 있다.
브라우저에는 웹 문서를 해석하는 엔진이 내장되어 있다. (대표적으로 구글의 V8엔진)
엔진은 코드를 위에서 한줄씩 읽어가며 해석한다. 해석이 끝나면 전체 문서를 객체화 하여, 자바스크립트로 접근 할 수 있게 해준다.
문서를 객체화 한 DOM은 트리구조를 가지고 있고, 각각의 객체를 노드 라고 한다.상위에 있는 노드를 '부모노드'라고 하고,
부모요소 하위에 있는 노드들은 '자식노드'라고 한다.이 DOM 트리 최상위 루트인 document로 html요소에 접근 할 수 있는 것이다.
태그 내의 문자와 속성역시 객체다. 이런 모든 객체는 자바스크립트를 통해 접근 할 수 있고, 페이지를 조작 할 때 이 객체를 사용한다.
document.body.style.background = 'blue'
이런식으로 배경 색상을 변경하기위해 style.background를 사용 했지만, 다양한 프로퍼티를 사용해서 여러가지 접근이 가능하다.
노드의 경우 총 열두 가지 있지만, 주로 다섯 가지 노드를 다룬다.
| 종류 | 설명 |
| 문서 노드 (document node) |
DOM의 진입점이 되는 문서 노드 HTML 문서 전체를 나타낸다. |
| 요소 노드 (element node) |
태그를 통해 생성된 요소 노드 속성 노드를 가질 수 있는 유일한 노드이다. |
| 속성 노드 (attribute node) |
요소 노드에 관한 정보를 가진다. 해당 요소의 자식 노드에는 포함되지 않는다. |
| 텍스트 노드 (text node) |
텍스트를 포함하는 노드 |
| 주석 노드 (comment node) |
모든 주석은 주석 노드로 존재 |
DOM과 BOM
DOM은 문서(Document)의 객체화 라면, BOM은 Browser Object Model로 자바스크립트가 브라우저에 접근하기 위해 만들어진
모델이라고 할 수 있다.window객체를 통해서 BOM에 접근이 가능하다.
브라우저라는 것은 결국 window 안에서 수행되는 프로그램이다. 모든 객체들은 최상위 객체인 window아래 존재한다.
이미지 출처
<a href="https://www.flaticon.com/free-icons/christmas" title="christmas icons">Christmas icons created by Smashicons - Flaticon</a>
<a href="https://www.flaticon.com/free-icons/web-page" title="web-page icons">Web-page icons created by Talha Dogar - Flaticon</a>
참고자료
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction