[DOM_HTMLCollection] JS - length 속성 ★ - 요소개수 반환 (※ for반복문에 활용)

 

<h1>홈짱닷컴 Homzzang.com</h1>

<p>홈페이지 제작관리 + 서버관리</p>

<p>HTML CSS JS JQ PHP SQL BS</p>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var n = document.getElementsByTagName("P").length;

  alert(n);

}

</script>

 

결과보기

length 정의

 

HTMLCollection 요소 개수

 

---

 

1.

읽기 전용.

 

2.

반복문 작성할 때 유용.

 

3.

모든 브라우저 지원.

 

length 구문

 

HTMLCollection.length

 

---

 

[반환값]

HTMLCollection 요소 개수

 

length 예제 - 반복문

 

<h1>홈짱닷컴 Homzzang.com</h1>

<p class='hz'>홈페이지 제작관리 + 서버관리</p>

<p class='hz'>HTML CSS JS JQ PHP SQL BS</p>

<p>그누보드 제작관리 강의</p>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var x, i;

  x = document.getElementsByClassName("hz");

  for (i = 0; i < x.length; i++) {

    x[i].style.backgroundColor = "yellow";

  }

}

</script>

 

결과보기