Javascript - 자식 요소(element) 개수 확인

Javascripthtml

Javascript에서 Parent가 갖고 있는 모든 자식 요소의 개수를 확인하는 방법에 대해서 알아보겠습니다.

1. childElementCount, children.length로 개수 확인

HTML

HTML은 parent 요소 아래에 3개의 자식 요소가 있습니다.

<div id="parent">
  <p>첫 번째 자식</p>
  <p>두 번째 자식</p>
  <p>세 번째 자식</p>
</div>

Javascript

먼저 parent 요소를 찾고, childElementCount 또는 children.length로 요소 개수를 가져옵니다.

  • getElementById()으로 parent id로 부모 요소를 찾을 수 있음
  • children은 parent의 모든 자식 요소들을 의미
  • querySelectorAll("*")으로 모든 자식 요소를 찾고 length로 개수를 가져올 수 있음
const parentElement = document.getElementById("parent");

let childNodeCount = parentElement.childElementCount;
console.log(`자식 노드 개수: ${childNodeCount}`);

childNodeCount = parentElement.children.length;
console.log(`자식 노드 개수: ${childNodeCount}`);

const childNodes = parentElement.querySelectorAll("*");
childNodeCount = childNodes.length;
console.log(`자식 노드 개수: ${childNodeCount}`);

Output:

자식 노드 개수: 3
자식 노드 개수: 3
자식 노드 개수: 3
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha