How to count amount of child elements of a parent class

Admin 1
Viewed 321

I have something like this.

function myFunction() {
  var c = document.getElementById("myID").childElementCount;
  alert(c);
}

Is there a way to do something like this?

function myFunction() {
  var c = document.getElementsByClass("myClass").childElementCount;
  alert(c);
}
javascript
6 Answers

There's document.getElementsByClassName which returns an HTMLCollection (as opposed to a single Element). An HTMLCollection can be converted to an array easily with the [...x] syntax.

So if you want the sum of child elements in all .myClass parents:

[...document.getElementsByClassName('myClass')]
  .reduce((sum, parent) => sum += parent.childElementCount, 0);

There's also the newer and more concise document.querySelector[All] functions:

[...document.querySelectorAll('.myClass')]
  .reduce((sum, parent) => sum += parent.childElementCount, 0);
user_69514280

There is no getElementByClass but there is getElementsByClassName. However, it returns a collection of elements because you can have multiple elements with the same class. IDs however are limited to one per document.

So if you knew the index of the element in the collection, you could do something like this:

var els = document.getElementsByClassName('myClass');
var c = els[0].childElementCount;
alert(c);
user_2671800

If you would like to count all of the children of a certain className, here's how you would do that:

function countAllChildren(selector){
  let i = 0, q = document.querySelectorAll(selector);
  for(let n of q){
    i += n.children.length;
  }
  return i;
}
countAllChildren('.myClass');
user_24384230

did you tried

document.getElementsByClassName('myClass')[0].childElementCount
user_62363050

@evolutionxbox has the working answer even though it is a comment. @evolutionxbox please make your comment an answer so that I can mark yours as correct.

This works.

function myFunction() {
  var c = document.getElementsByClassName('myClass').length;
  alert(c);
}
Admin1

You can use jquery for that:

var count = $("#myID").children().length;
user_74942180
Related