자바스크립트를 사용하여 자식 엘리먼트의 개수를 구하는 방법으로 아래의 프로퍼티를 사용할 수 있습니다.

element.childElementCount

이 방법을 사용하면 쉽게 자식요소가 몇 개인지 알수 있죠. 여기서 자식요소의 엘리먼트 element의 값인 개수를 구하며 텍스트 등의 노드 개수를 구하는 것은 아닙니다. 그럼 아래에서 예제를 통해 더 알아봅니다.




# childElementCount 프로퍼티 예제보기만약 아래와 같은 div 엘리먼트가 존재하는 경우 자식 요소의 전체 개수를 구할 수 있겠죠.
<div id="myTest">
  <span>web</span>
  <span>is <b>all</b></span>
  <span>free</span>
</div>

이제 자바스크립트로 개수를 콘솔 영역에 출력해볼까요?
var ele = document.getElementById('myTest');
var eleCount = ele.childElementCount;

console.log(eleCount);

코드를 실행하면 아래와 같이 출력됩니다.
3  // 자식의 총 개수가 출력

간단하죠? 여기서 두 번째 span태그에서는 b라는 태그가 안에 있지만 자식의 자식 요소가 포함되지는 않으므로 알아두시기 바랍니다. 작 바로 아래의 자식요소의 개수만 반환합니다.


! 브라우저 호환성참고로 childElementCount는 IE 9 이상과 최신 브라우저에서 잘 동작합니다.