수평적으로 읽고 있지않고
탐색하는방법은 깊이 탐색을 함.
트리시작부터 끝까지 따라 내려간다.
결과목록에 계속 추가시키고 그다음놈을 끝까지 따라가게 만든다
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> 노드찾기</title>
<style>
body{
font-size:9pt;
font-family:"굴림";
}
div, p{
border:1px #eeeeee solid;
margin:10px;
}
</style>
<script>
function findByTagName(){
var divs=document.getElementsByTagName("div");
console.log(divs.length);
//깊이탐색을 사용한다
divs[6].style.border="4px solid violet";
/* for(var i=0; i<divs.length;++i){
divs[i].style.border="4px solid red";
} */
}
function findByTagName2(){
var content=document.getElementById("content");
var divs=content.getElementsByTagName("div");
for(var i=0; i<divs.length;++i){
divs[i].style.border="4px solid aqua";
}
}
function findByClassName(){
var contents=document.getElementsByClassName("content_data");
for(var i=0; i<contents.length;++i){
contents[i].style.border="5px solid green";
}
}
function findById(){
var header=document.getElementById("header");
header.style.border="3px solid blue";
}
</script>
</head>
<body>
<h2>1. 노드 찾기</h2>
<div id="sample_page" class="page" >
샘플 페이지(div, id=sample_page, class=page)
<div id="header">
헤더 영역(div, id=header)
</div>
<div id="content" class="sample_content">
컨텐츠 영역(div, id=content, class=sample_content)
<div>
JavaScript란?(div)
<p id="data_1">1. 자바스크립트 Core(p, id=data_1)</p>
<p id="data_2">2. 자바스크립트 BOM(p, id=data_2)</p>
<p id="data_3">3. 자바스크립트 DOM(p, id=data_3)</p>
을 배운다는것
</div>
<div class="content_data">
자바스크립트에서 배울 내용(div, class=content_data)
<p>1. 자바스크립트 DOM(p)</p>
<p>2. 자바스크립트 Ajax(p)</p>
</div>
<div class="content_data">
jQuery에서 배울 내용(div, class=content_data)
<p>1. jQuery DOM(p)</p>
<p>2. jQuery Ajax(p)</p>
</div>
</div>
<div id="footer">
푸터 영역(div, id=footer)
</div>
</div>
<input type="button" value="문서에서 태그이름으로 찾기" onclick="findByTagName()"/>
<input type="button" value="특정노드에서 태그이름으로 찾기" onclick="findByTagName2()"/>
<input type="button" value="클래스이름로 찾기" onclick="findByClassName()"/>
<input type="button" value="ID로 찾기" onclick="findById()"/>
</body>
</html>
'웹 & 프레임워크' 카테고리의 다른 글
| [CSS] 장치에 맞게 화면을 바꿔주는 스타일 태그 (0) | 2014.06.27 |
|---|---|
| JavaScript Jquery를 이용하지 않고 태그의 속성 바꾸는 법 (0) | 2014.06.27 |
| 상대경로와 절대경로 (0) | 2014.06.27 |
| [CSS] display 속성 / visibility속성 (0) | 2014.06.27 |
| JavaScript 날짜함수와 현재날짜부터 특정날짜까지 남은 일수 구하기 (0) | 2014.06.27 |