javascript - 从 div 获取特定类型的直接子代的数量

Question

我是 JavaScript 新手，我正在尝试计算每个 div 有多少个段落作为直接子元素。

示例:

<div id="1">
    <p>text</p>
    <p>text</p>
    <div id="2">
        <p>text</p>
    </div>
</div>
<div id="3">
    <p>text</p>
    <p>text</p>
    <p>text</p>
</div>

我正在寻找的结果:

• div 1 = 2
• div 2 = 1
• div 3 = 3

到目前为止我得到的代码如下所示:

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    var count = divs[i].getElementsByTagName('p').childElementCount;
    console.log('div ' + i + ' count ' + count);
}

结果:

Console log

为什么我得到“未定义”？尝试使用 .length 而不是 .childElementCount 但这也没有给我想要的结果。

我自己正在努力寻找解决方案，jquery 不是一个选择。

Answer 1

第一:

getElementsByTagName 返回一个类似数组的结构 (HTMLCollection)。您可以通过 .length 获取列表的长度。

您只能在 DOM 对象上使用 childElementCount，而不能在集合上使用。

第二:

getElementsByTagName 将返回所有后代，而不仅仅是直接子元素。之前在 stackoverflow here 上提出了一个解决方案。如果您发现回复有用，请不要忘记投票。

更有效的是，我建议只在子级中搜索 div 标签:

for(var i = 0; i < divs.length; i++){
    var children = divs[i].children,
        divCount = 0;
    for(var childIndex = 0; childIndex < children.length; childIndex++)
        if(children[childIndex].tagName == 'DIV')
            divCount++;

    console.log('div ' + i + ' count ' + divCount);
}

或者更极客一点，将 .reduce() 与一个 reduce 函数结合使用。