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

Question

我想获取具有超过 5 个子元素的 DOM 元素，并仅为这些元素添加一个 class 名称。 例如，

<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>

在这种情况下，我想将spans名称添加到上面有 6 个子 span 的第二个div中。

我尝试了以下方法：

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

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

Answer 1

您有 3 个 div 与 class 父级。 所以我认为你必须使用 querySelectorAll('.parent') 和之后的循环。 可能是这样的

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只返回第一个匹配的元素。 您需要将querySelectorAll与循环一起使用：

 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>