根据子元素的数量检索 DOM 元素

Question

I want to get the DOM elements that have more than 5 children and add a class name to only those elements. For example,

<div class="parent">
    <span>child</span>
    <span>child</span>
    <span>child</span>
</div>

<div class="parent">
    <span>child</span>
    <span>child</span>
    <span>child</span>
    <span>child</span>
    <span>child</span>
    <span>child</span>
</div>

<div class="parent">
    <span>child</span>
    <span>child</span>
</div>

In this case I'd like to add a class name to the second div above that has 6 children spans .

I've tried the following:

const parents = document.querySelector(".parent");

if (parents.childElementCount > 5) {
    parents.classList.add('reduce-size');
}

Answer 1

You have 3 div with the class parent. So I think you have to use a querySelectorAll('.parent') and a loop after. Someting like this maybe

const parents = document.querySelectorAll(".parent");
for (let i = 0; i < parents.length; i++) {
  if (parents[i].childElementCount > 5) {
  cityLocationTitle.classList.add('.reduce-size');
}
}

Answer 2

const parents = document.querySelectorAll(".parent");

parents.forEach(el => {
 if(el.childNodes.length > 5){
   el.classList.add('.reduce-size');
 }
});

Answer 3

querySelector only returns the first matching element. You need to use querySelectorAll together with a loop:

 const parents = document.querySelectorAll(".parent"); for (let parent of parents) { if (parent.childElementCount > 5) { console.log("do stuff here"); } }

 <div class="parent"> <span>child</span> <span>child</span> <span>child</span> </div> <div class="parent"> <span>child</span> <span>child</span> <span>child</span> <span>child</span> <span>child</span> <span>child</span> </div> <div class="parent"> <span>child</span> <span>child</span> </div>