예제 1 )
typeof를 이용해서 쇼핑목록의 수 만큼 alert 창을 띄워보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom test</title>
</head>
<body>
<h1> 쇼핑목록</h1>
<p title="mustHave">이것만은 꼭 사자..</p>
<ul id="buy">
<li>우유 </li>
<li>치즈 </li>
<li>쥬스 </li>
</ul>
<script type="text/javascript">
//<![CDATA[
var lis =document.getElementById("buy").getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
alert(typeof lis[i]);
}
//]]>
</script>
</body>
</html>
예제 2 )
문서 안의 속성를 변경하여 그 값을 alert 창에 띄워보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom test</title>
</head>
<body>
<h1> 쇼핑목록</h1>
<p title="mustHave">이것만은 꼭 사자..</p>
<ul id="buy">
<li>우유 </li>
<li>치즈 </li>
<li>쥬스 </li>
</ul>
<script type="text/javascript">
//<![CDATA[
/*
예제1)
var lis =document.getElementById("buy").getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
alert(typeof lis[i]);
}*/
var ps=document.getElementsByTagName("p"); //p테그에 접
alert(ps[0].getAttribute("title")); //첫번째 p의 title값의 속성값알아보기
ps[0].setAttribute("title","a list of item"); //첫번째 p이 title값 체인지
alert(ps[0].getAttribute("title")); //체인지된 값 확인
//]]>
</script>
</body>
</html>'새로워지기 > 서른의 생활코딩' 카테고리의 다른 글
| java _20120207 (0) | 2012.02.09 |
|---|---|
| 2011년은 자바스크립트 개발자 전성시대 (0) | 2011.05.05 |
| 샘플소스5) javascript 기본 문서구조 : DOM (1) (0) | 2011.04.23 |
| 샘플소스5) javascript 기본 문서구조 : cookie (2) (0) | 2011.04.23 |
| 샘플소스5) javascript 기본 문서구조 : cookie (1) (0) | 2011.04.23 |
댓글