从 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

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

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

Answer 1

第一个：

getElementsByTagName 是 return 一个类似数组的结构 (HTMLCollection)。您可以通过 .length.

获取列表的长度

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

第二个：

getElementsByTagName 将 return 所有后代，而不仅仅是直系子女。之前在 Whosebug 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 函数。

Answer 2

希望对您有所帮助

let divs = document.getElementsByTagName('div')

Array.prototype.slice.call(divs).map(div => {
  let count = 0;
  Array.prototype.slice.call(div.getElementsByTagName('p')).forEach(p => {
    if (p.parentNode == div) {
      count++;
    }
  })
  console.log('div ', div.id, " = ", count)
})

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

Answer 3

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

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

:scope 表示 parent 元素本身。 > 意思是 select direct/immediate children.

查看 :scope pseudo-class 目前如何支持 here. No support from IE, but there is a shim 可用。

从 div 中获取特定类型的直接子代数

Get count of direct children of specific type from div

html

javascript

children

getelementsbytagname