ch4 - 2. DOM에 접근하기

index

DOM(Document Object Model)이란?

웹페이지는 일종의 문서(document)입니다. 웹브라우저를 통해 그 내용이 해석되어 웹브라우저 화면에 나타나거나 HTML소스 자체로 나타기도 합니다 그 중에서도 DOM은 문서 객체모델(Document Object Model)의 약자입니다. 객체 지향 모델로써 구조화된 문서를 표현하는 형식입니다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공합니다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있습니다.

Dom구조 예시

구조 보고 예시를 한번 작성해 보았습니다.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dom에 대해서 알아보자</title>
</head>
<body>
<h1>Dom 작성법</h1>
<p id="check1">공기밥</p>
<p id="check2">국밥</p>
<p id="check3">수육국밥</p>
<p id="check4">순대국밥</p>
<p id="check5">원조국밥</p>
<scrpit src="code.js"><scrpit> //외부 자바스크립트 코드 불러오기
</body>
</html>


var dom_code = document.getElementById("check2")
var code = access.innerHTML;
code = "원조의"+ code;
alert(dom_code);

자주쓰이는 메소드 및 이벤트 핸들러 정의

Method

Description

document.getElementById(id)

요소 ID별로 요소 찾는다.

element.attribute = new value

HTML 요소의 특성 값 변경한다.

element.innerHTML

요소의 내부 HTML 변경한다.

document.createElement(element)

HTML요소 문서를 만든다

document.removeChild(element)

HTML요소 문서를 제거한다

document.appendChild(element)

HTML요소 문서를 추가한다

document.replaceChild(new, old)

HTML요소 문서를 대체한다.

document.getElementById(id).onclick = function(){code}

이벤트 핸들러 코드를추가한다.