● DOM이란?
: DOM(Document Object Model) 은 BOM중 하나입니다.
BOM(Browse Object Model)이라는 브라우저 객체 모델의 최상위 객체는 window라는 객체가 있고,
DOM은 이 window객체의 또하나의 객체이기도 합니다.
DOM은 문서 객체 모델인데, 여기서 문서 객체란 또는 같은 html문서의 모든 태그들을 Javascript가 이용할 수 있는
객체로 만들면 이것을 문서객체라고 합니다. Model은 영어단어로는 모형,주형이라는 의미가 있고 모듈이라는 의미도 있습니다.
문서객체를 인식하는 방식이라고 해석 할 수 있습니다.
즉, DOM은 웹 브라우저가 HTML페이지를 인식하는 방식으로써, tree라는 자료구조로 되어있습니다.
● Node(노드)이란?
: tree구조에서 root노드를 포함한 모든 개개의 개체를 node라고 표현합니다.
head, body, title, script, p, h1 등의 태그 뿐아니라 태그안의 텍스트나 속성 등도 모두 node에 속합니다.
이중에서 HTML 태그를 요소노드(Element Node)라고 부르고, 요소 노드안에 있는 글자를 Text 노드(Text Node)라고 부릅니다.
● JavaScript로 문서 객체를 생성
: 문서 객체가 생성되는 방식은 2가지로 나누어 볼 수 있습니다.
우선, 웹브라우저가 HTML페이지에 적혀 있는 태그를 읽으면 생성하는것입니다. 이 방식은 정적으로 문서 객체를 생성한다고
합니다. 반면에 원래 HTML페이지에 없던 문서객체를 JavaScript를 이용해서 생성할 수 있는데, 이런 방식을 동적으로 문서 객체를
생성한다고 합니다.
● DOM사용 예제
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>문서객체 모델(DOM)</title>
<script type="text/javascript">
</script>
</head>
<body>
<h1 id="header1">헤더-1</h1>
<h1 id="header2">헤더-2</h1>
<hr>
</body>
</html>
이제부터는 JavaScript를 통해서 동적으로 문서 객체를 생성해보겠습니다.
<script type="text/javascript">
window.onload = function() {
var header = document.createElement('p');
var textNode = document.createTextNode('이것이 DOM이다.');
header.appendChild(textNode);
document.body.appendChild(header);
};
</script>
'Dev. Front-End > JavaScirpt' 카테고리의 다른 글
| [jQuery] 제이쿼리 문법 ($ 의미) (0) | 2020.01.29 |
|---|---|
| [Javascript] JSON객체와 메소드 (문자열 변환) (0) | 2019.09.23 |
| [Javascript] Number객체와 String객체 / 메소드(Method) (0) | 2019.09.22 |
| [Javascript] for of 반복문 / for in 반복문 개념 및 차이점 (예제) (0) | 2019.09.21 |
| [Javascript] 숫자와 문자열 자료형 변환(Number) (0) | 2019.09.20 |
| [Javascript] prompt(), confirm() 함수 (1) | 2019.09.19 |
| [Javascript] 배열 (Array) / length, push (0) | 2019.09.18 |
| [Javascript] 클로저 (Closure) (0) | 2019.09.17 |
