Hi

문서 객체 모델 본문

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>을 붙인다.


'WEB(웹)' 카테고리의 다른 글

(html) display: flex 안에 display: flex  (0) 2018.06.26
(jquery) 기본선택자  (0) 2018.06.26
(javascript) 캡슐화  (0) 2018.06.25
(javascript) 함수의 다양한 형태  (0) 2018.06.25
(javascript) 함수 객체 : 함수도 객체다  (0) 2018.06.22
'WEB(웹)' Related Articles more