자바스크립트를 사용하여 자식 엘리먼트의 개수를 구하는 방법으로 아래의 프로퍼티를 사용할 수 있습니다.
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 이상과 최신 브라우저에서 잘 동작합니다.