[javascript] childElementCount 프로퍼티 예제보기 [펌]

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

 

출처 : https://webisfree.com/2019-01-30/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%90%EC%8B%9D-%EC%9A%94%EC%86%8C%EC%9D%98-%EA%B0%9C%EC%88%98-%EA%B5%AC%ED%95%98%EA%B8%B0-childelementcount