문서객체 DOM (Document Object Model)
문서 객체 모델은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다.
문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다.
자주 사용되는 용어로는 문서객체, 태그, 노드가 있다.
태그
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<script></script>
</head>
<body>
<h1 id="header">HEADER</h1>
</body>
</html>위와같이 HTML페이지에 존재하는 <html>이나 <body> 를 태그 라고 부른다.
이 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 그것이 '문서객체' 가 된다.
문서객체
window.onload = function () {
// 함수 호출시 실행할 내용
}우선 문서객체를 다루기 위해서는 이전 포스팅에서 다뤘던 window객체의 onload 이벤트 핸들러를 사용해 다룰수 있다.
다음 코드와같이 document객체의 getElementById( ) 메서드로 문서객체를 자바스크립트로 가져와 조작할 수 있다.
window.onload = function () {
var header = document.getElementById('header');
};이때 변수 header에 저장된 header객체를 '문서객체' 라고 부른다.
노드
그렇다면 노드란 무엇일까
HTML 페이지는 다음과 같은 트리모양 형태로 나타낼 수 있다.
html
┌────┴────┐
head body
│ │
title ─ script h1
│ │
"INDEX" "HEADER"
위와같은 트리 모양의 형태에서의 각 요소를 '노드' 라고 부른다.
이러한 노드는 요소노드와 텍스트노드 두가지 종류로 나뉜다.
요소노드 : HTML 태그
텍스트노드 : HTML 태그 즉, 요소노드 안에 들어있는 글자를 의미
이처럼 웹 페이지가 처음 HTML 페이지에 적혀있는 태그들을 읽으며 생성하는 것을 "정적으로 문서 객체를 생성한다" 라고 표현한다.
반면에 자바스크립트로 원래 HTML 페이지에는 없던 문서 객체를 생성하는 것을 "동적으로 문서객체를 생성한다" 라고 표현한다.
'JavaScript > DOM & Event' 카테고리의 다른 글
| 이벤트 - DOM Level 0 : 고전 이벤트 모델 (0) | 2022.01.20 |
|---|---|
| 문서객체 스타일조작, 제거 removeChild( ), parentNode, appendChild( ), childNode (0) | 2022.01.19 |
| 문서객체 가져오기 getElementBy (Id, Name,TagName, class) / querySelector (0) | 2022.01.19 |
| 문서 객체 만들기 (DOM) createElement , createTextNode , appendChild, setAttribute , getAttribute , innerHTML, textContent속성 (0) | 2022.01.18 |
| window객체와 이벤트 (BOM/DOM) window.onload (0) | 2022.01.18 |