HTML DOM childElementCount 속성

<시간/>

HTML DOM childElementCount 속성은 주어진 요소의 자식 요소 수를 반환하는 읽기 전용 속성입니다. childElementCount의 반환 유형은 unsigned long입니다. HTML 문서의 모든 자식 노드가 아니라 쿼리된 노드의 자식 요소만 반환합니다.

구문

다음은 childElementCount 속성의 구문입니다 -

node.childElementCount

예시

HTML DOM의 childElementCount 속성에 대한 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      border: 2px solid blue;
      margin: 7px;
      padding-left:20px;
   }
</style>
</head>
<body>
<p>Click the button below to find out the no of children of the div element</p>
<button onclick="childCount()">COUNT</button>
<div id="myDIV">
<h3>HEADING</h3>
<p>First p element</p>
<p>Second p element</p>
</div>
<p id="Sample"></p>
<script>
   function childCount() {
      var x = document.getElementById("myDIV").childElementCount;
      document.getElementById("Sample").innerHTML = "The div element has "+x+" children";
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM childElementCount 속성

COUNT 버튼을 클릭하면 -

HTML DOM childElementCount 속성

위의 예에서 -

id가 "myDIV"인

요소와 그 안에 세 개의 요소를 만들었습니다. 두 개의

요소와

헤더. 다른 요소와 구별하기 위해 div에 색상 테두리, 여백 및 패딩도 추가했습니다. -

div {
   border: 2px solid blue;
   margin: 7px;
   padding-left:20px;
}
<div id="myDIV">
<h3>HEADING</h3>
<p>First p element</p>
<p>Second p element</p>
</div>

그런 다음 클릭 시 childCount() 메서드를 실행하는 버튼 COUNT를 만들었습니다.

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

childCount() 메서드는 id가 "myDIV"인 요소를 가져오고 이 경우

요소를 사용하고 해당 childElementCount 속성 값을 변수 x에 할당합니다.

안에 두 개의

요소와

요소가 있으므로 childElementCount는 3을 반환했습니다.

반환된 값은 단락에서 innerHTML() 메서드를 사용하여 ID가 "Sample"인 단락에 표시됩니다. −

function childCount() {
   var x = document.getElementById("myDIV").childElementCount;
   document.getElementById("Sample").innerHTML = "The div element has "+x+" children";
}