* 알아야 할 개념 :: 노드(문서는 노드의집합니다.), 요소 노드, 텍스트 노드, 속성 노드
* 알아야 할 요소
document.getElementById // ID는 한번만..
document.getElementsByTagName //s
ex) document.getElementsByTagName("li");
getAttribute() : 속성의 값을 반환해준다. // 인자값(속성명)
ex) document.getElementById("photo").getAttribute("src");
setAttribute() : 바꿀값 //인자값(속성명,바꿀값)
ex) document.getElementById("photo").setAttribute("src","newPhoto.jpg");
예제 ) 돔을 이용해 바디 테그안에서 필요한 부분을 가져오는 예제를 테스트할 수 있는 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom test</title>
</head>
<body>
<div id="mv_list">
<h1 class="title1">영화 순위 리스트</h1>
<ol>
<li class="list1">리스트1</li>
<li class="list2">리스트2</li>
<li class="list3">리스트3</li>
<li class="list4">리스트4</li>
</ol>
<h1 class="title2">영화 예정 리스트</h1>
<ul>
<li class="list5">영화1</li>
<li class="list6">영화2</li>
<li class="list7">영화3</li>
<li class="list8">영화4</li>
</ul>
</div>
<script type="text/javascript">
//<![CDATA[
//1
document.write(document.getElementById("mv_list").parentNode.nodeName+"<br />");
//2
document.write(document.getElementById("mv_list").childNodes[0].nodeName+"<br />");
document.write(document.getElementById("mv_list").childNodes.item(1).nodeName+"<br />");
//3
document.write(document.getElementById("mv_list").firstChild.nodeName+"<br />");
document.write(document.getElementById("mv_list").childNodes[0].nodeName+"<br />");
//4
document.write(document.getElementById("mv_list").lastChild.nodeName+"<br />");
//5
document.write(document.getElementsByTagName("li")[1].previousSibling.className+"<br />");
document.write(document.getElementsByTagName("li")[1].nextSibling.className+"<br />");
//]]>
</script>
</body>
</html>'새로워지기 > 서른의 생활코딩' 카테고리의 다른 글
| 2011년은 자바스크립트 개발자 전성시대 (0) | 2011.05.05 |
|---|---|
| 샘플소스5) javascript 기본 문서구조 : DOM (2) (0) | 2011.04.23 |
| 샘플소스5) javascript 기본 문서구조 : cookie (2) (0) | 2011.04.23 |
| 샘플소스5) javascript 기본 문서구조 : cookie (1) (0) | 2011.04.23 |
| 샘플소스4) javascript 기본 문서구조 : window객체 3)이벤트.이벤트핸들러 4. (0) | 2011.04.22 |
댓글