웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 자식 요소의 개수 구하기, childElementCount

Last Modified : 2019-09-01 / Created : 2019-01-30
26,581
View Count

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

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 이상과 최신 브라우저에서 잘 동작합니다.

Previous

[HTML5] Canvas 태그에 투명도 opacity 적용하기

Previous

contenteditable 태그에 텍스트만 붙여넣는 방법