<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM</title>
<script type="text/javascript">
// DOM이란 HTML이나 XHTML을 조작하는 명령
function result() {
//태그를 이용한 HTML접근
var vs=document.getElementsByTagName("div"); // div 태그를 가진 모든 오브젝트가 적용된다.
vs[0].style.background="#00ff00";
for(var n=0; n<vs.length; n++)
vs[n].style.fontSize="20pt";
// id를 이용한 접근
var a1=document.getElementById("a1"); // id는 중복을 허용하지 않아 단 하나의 오브젝트만 적용된다.
a1.innerHTML="<b>너는 이순신</b>";
// name을 이용한 접근
var aa=document.getElementsByName("nn"); // name은 중복을 허용.
aa[0].value="졸립다.";
}
</script>
</head>
<body>
<input type="button" value="눌러봐" onclick="result();">
<br/>
<div>안녕하세요</div>
<p>반갑습니다</p>
<div>오늘은 즐거운 금요일</div>
<div id="a1">나는 홍길동</div><br/>
<input type="text" name="nn"><br/>
</body>
</html>
'javascript' 카테고리의 다른 글
| 자바스크립트 확인 취소 창 (0) | 2013.09.08 |
|---|---|
| 자바스크립트를 이용한 예제(성적처리) - 분석요함 (0) | 2013.06.25 |
| 자바스크립트 기본 예제(마우를 클릭드래그하여 오브젝트 이동 시키기) (0) | 2013.06.25 |
| onkeyup / onkeydown / onkeypress 검증하기 (0) | 2013.06.25 |
| 자바스크립트 기본 예제(실행 즉시 작동시키는 소스, 실시간 시간) (0) | 2013.06.25 |