HTML DOM childElementCount 속성 – 자식 요소 개수 쉽게 구하는 방법

HTML DOM의 childElementCount 속성은 읽기 전용(read-only) 속성으로, 특정 요소가 가진 직계 자식 요소(child element)의 개수를 반환합니다. 반환값의 타입은 부호 없는 정수(unsigned long)입니다. 이 속성은 HTML 문서 전체의 모든 자식 노드를 세는 것이 아니라, 오직 해당 속성을 호출한 노드의 자식 요소만 계산한다는 점에 유의해야 합니다.

문법(Syntax)

childElementCount 속성의 기본 문법은 다음과 같습니다.

node.childElementCount

예제(Example)

다음은 HTML DOM childElementCount 속성을 활용한 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        border: 2px solid blue;
        margin: 7px;
        padding-left:20px;
    }
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 div 요소의 자식 개수를 확인할 수 있습니다</p>
<button onclick="childCount()">COUNT</button>
<div id="myDIV">
<h3>제목</h3>
<p>첫 번째 p 요소</p>
<p>두 번째 p 요소</p>
</div>
<p id="Sample"></p>
<script>
    function childCount() {
        var x = document.getElementById("myDIV").childElementCount;
        document.getElementById("Sample").innerHTML = "div 요소에는 자식이 "+x+"개 있습니다";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM childElementCount 속성 – 자식 요소 개수 쉽게 구하는 방법

COUNT 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.

HTML DOM childElementCount 속성 – 자식 요소 개수 쉽게 구하는 방법

예제 상세 해설

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

먼저 id가 "myDIV"인 <div> 요소를 생성하고, 그 안에 <h3> 제목 하나와 <p> 요소 두 개, 총 세 개의 자식 요소를 넣었습니다. 또한 div 요소에 파란색 테두리, 마진, 패딩 스타일을 적용하여 다른 요소들과 시각적으로 구분되도록 했습니다.

div {
    border: 2px solid blue;
    margin: 7px;
    padding-left:20px;
}
<div id="myDIV">
<h3>제목</h3>
<p>첫 번째 p 요소</p>
<p>두 번째 p 요소</p>
</div>

그다음, 클릭 시 childCount() 함수를 실행하는 COUNT 버튼을 만들었습니다.

<button onclick="childCount()">COUNT</button>

childCount() 함수는 id가 "myDIV"인 요소, 즉 여기서는 <div> 요소를 가져온 뒤 그 childElementCount 속성값을 변수 x에 할당합니다. <div> 내부에 <p> 요소 두 개와 <h3> 요소 하나가 존재하므로, childElementCount는 3을 반환하게 됩니다.

마지막으로 반환된 값은 innerHTML 메서드를 통해 id가 "Sample"인 단락(<p>)에 출력됩니다.

function childCount() {
    var x = document.getElementById("myDIV").childElementCount;
    document.getElementById("Sample").innerHTML = "div 요소에는 자식이 "+x+"개 있습니다";
}

참고 사항

childElementCount는 텍스트 노드나 주석 노드는 제외하고 오직 요소 노드(element node)만 개수에 포함합니다. 따라서 공백이나 줄바꿈 등으로 인한 텍스트 노드가 존재해도 결과에는 영향을 주지 않습니다. 이 속성은 children, firstElementChild, lastElementChild 같은 다른 자식 요소 관련 속성들과 함께 사용하면 DOM 탐색을 더욱 효율적으로 처리할 수 있습니다.