문서 객체 모델

WEB(웹)

문서 객체 모델

SharingWorld 2018. 6. 26. 09:32

문서 객체 모델

DOM, Document Object Model

넓은 의미 : 웹 브라우저가 HTML 페이지를 인식하는 방식

좁은 의미 : document 객체와 관련된 객체의 집합

<!DOCTYPE html>
<html>
<head>
	<title>index</title>
	<script></script>
</head>
<body>
	<h1 id="header>HEADER</h1>
</body>

</html>

위 코드처럼 html, body 태그가 ‘태그’

이 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 그것이 '문서 객체'

window.onload = function() {
	var header = documnet.getElementById('header');
};

이 때 header 객체가 ‘문서 객체’

마지막으로 html 페이지는 트리 모양으로 나타낼 수 있는데, 그 때의 각 요소가 '노드

태그, 문서객체, 노드 - 조금씩 미묘한 차이가 있지만 거의 비슷한 말

-요소 노드 : HTML 태그

-텍스트 노드 : 요소 노드 안에 들어 있는 글자

window.onload = function() {
	// 변수를 선언합니다.
	var header = document.createElement('h1'); // 요소 노드 생성
	var textNode = document.createTextNode('Hello DOM'); // 텍스트 노드 생성

	// 노드를 연결합니다.
	header.appendChild(textNode);
	document.body.appendChild(header);
}

이렇게 body 태그에 <h1> hello DOM </h1>을 붙인다.