문서 객체 모델(DOM, Document Object Model)은 document 객체와 관련된 객체의 집합입니다.
문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가 수정 제거 할 수 있습니다.
다음은 간단히 document 객체를 활용한 회전하는 글자라는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
window.onload = function(){
//변수 선언 및 문서 객체를 가져오기
//이때 ID로 가져온다
var sun = document.getElementById('sun');
var earth = document.getElementById('earth');
var moon = document.getElementById('moon');
//문서 객체의 스타일 속성을 변경합니다
sun.style.posiion = 'absolute';
earth.style.position = 'absolute';
moon.style.position = 'absolute';
sun.style.left = 250 + 'px';
sun.style.top = 200 + 'px';
//변수 선언
var earthAngle = 0;
var moonAngle = 0;
//애니메이션 시작 1초에 30회 아래 함수를 실행함
setInterval(function(){
var earthLeft = 250 + 150 * Math.cos(earthAngle);
var earthTop = 250 + 150 * Math.sin(earthAngle);
var moonLeft = earthLeft + 50 * Math.cos(moonAngle);
var moonTop = earthTop + 50 * Math.sin(moonAngle);
earth.style.left = earthLeft + 'px';
earth.style.top = earthTop + 'px';
moon.style.left = moonLeft + 'px';
moon.style.top = moonTop + 'px';
earthAngle += 0.1;
moonAngle += 0.3;
}, 1000/30);
}
</script>
</head>
<body>
<h1 id="sun">@</h1>
<h1 id="earth">0</h1>
<h1 id="moon">*</h1>
</body>
</html>
실행 화면 @가 태양을 의미하고 0이 지구를 의미하고 *가 달을 의미합니다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - 함수 유효범위와 클로저 (0) | 2015.01.22 |
|---|---|
| Javascript - 연산자, 제어문, 예외처리 (0) | 2015.01.21 |
| Javascript - 변수, 데이터 타입, 리터럴 (0) | 2015.01.21 |
| 자바스크립트 - EJS 형식에서 forEach문 의미 및 사용법 (0) | 2015.01.06 |
| 자바스크립트 - for...in 문 (0) | 2015.01.06 |
| 자바스크립트 - DOM level2 이벤트 모델 (0) | 2014.09.09 |
| 자바스크립트 - 이벤트 버블링과 버블링 막는 방법 (0) | 2014.09.07 |
| 자바스크립트 - 문서객체를 이용한 글자 움직이기 예제 (0) | 2014.09.06 |