[DOM_Element] JS - childNodes 속성 - 자식노드리스트

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>

 

결과보기