childNodes 예제 - 자식노드 리스트
<button onclick="homzzang()">클릭</button>
<div id='hz'>
<h1>홈짱닷컴</h1>
<h3>Homzzang.com</h3>
<p>홈페이지 제작관리</p>
</div>
<p id="demo"></p>
<script>
function homzzang() {
var hz = document.getElementById('hz');
var c = hz.childNodes;
var txt = "";
var i;
for (i = 0; i < c.length; i++) {
txt = txt + c[i].nodeName + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
결과보기
결과값:
#text
H1
#text
H3
#text
P
#text
childNodes 예제1 - 자식노드 개수
<button onclick="homzzang()">클릭</button>
<div id='hz'>
<h1>홈짱닷컴</h1>
<h3>Homzzang.com</h3>
<p>홈페이지 제작관리</p>
</div>
<p id="demo"></p>
<script>
function homzzang() {
var c = document.getElementById("hz").childNodes.length;
document.getElementById("demo").innerHTML = c;
}
</script>
결과보기
결과값:7
childNodes 예제2 - 2번째 요소에 배경색 넣기
<button onclick="homzzang()">클릭</button>
<div id='hz'>
<h1>홈짱닷컴</h1>
<h3>Homzzang.com</h3>
<p>홈페이지 제작관리</p>
</div>
<p id="demo"></p>
<script>
function homzzang() {
var c = document.getElementById("hz").childNodes;
c[3].style.backgroundColor = "yellow";
}
</script>
결과보기
childNodes 예제3 - 특정 자식노드의 텍스트 얻기
<select id="hz" size="4">
<option>홈짱닷컴</option>
<option>Homzzang.com</option>
<option>홈페이지 제작관리</option>
<option>서버 관리</option>
</select>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var hz = document.getElementById("hz");
var c = hz.childNodes;
document.getElementById("demo").innerHTML = c[3].text;
}
</script>
결과보기
