JavaScript는 childElementCount 속성을 제공하여 특정 태그 안에 포함된 자식 요소의 개수를 쉽게 확인할 수 있습니다. 이 속성이 반환하는 값은 오직 숫자뿐이며, 요소의 이름이나 내용 같은 세부 정보는 포함되지 않습니다.
childElementCount 문법
document.getElementById("myDIV").childElementCount;사용 방법은 매우 간단합니다. 개수를 확인하고자 하는 태그의 id 값만 전달하면, 해당 태그 내부에 있는 자식 요소의 개수가 숫자 형태로 반환됩니다.
예제 코드
아래 예제에서는 div 태그 안에 두 개의 p 요소가 들어 있습니다. childElementCount 속성을 사용해 이 요소들의 개수를 구한 뒤, 그 결과를 화면에 출력합니다.
<html>
<body>
<div id="DIV">
<p>첫 번째 요소</p>
<p>두 번째 요소</p>
</div>
<p id = "cou"></p>
<script>
var cou = document.getElementById("DIV").childElementCount;
document.getElementById("cou").innerHTML = "요소의 개수 :" +" "+ cou;
</script>
</body>
</html>실행 결과
첫 번째 요소 두 번째 요소 요소의 개수 : 2
위 실행 결과에서 볼 수 있듯이, div 태그에는 두 개의 p 요소가 포함되어 있으므로 childElementCount 속성은 2를 반환합니다. 이처럼 DOM 트리를 탐색하거나 동적으로 요소를 추가·삭제할 때 현재 자식 요소의 개수를 파악해야 하는 경우에 이 속성이 매우 유용하게 활용됩니다.