如何计算父类的子元素数量

Question

我有这样的东西。

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

有没有一种类似这样的方法？

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

- user15559049

---

我认为你的意思是 getElementsByClassName（注意 s）。你可以通过使用 getElementsByClassName('my-class').length 访问匹配元素的数量。 - evolutionxbox

是的，打错了，我会修正的。 - user15559049

请翻译以下关于编程的内容从英文到中文。只返回翻译后的文本：（请仔细检查我的评论） - evolutionxbox

.getElementsByClassName 返回一个实时的 NodeList（不建议使用 - 相反请使用 .querySelectorAll('.myClass')）。如果您不想要 textNodes，则需要对 NodeList 进行循环以获取 .children.length。 - StackSlave

Answer 1

有一个 document.getElementsByClassName 方法，它返回一个 HTMLCollection（与单个 Element 相对应）。可以使用 [...x] 语法将 HTMLCollection 转换为数组。

因此，如果您想要所有 .myClass 父元素中子元素的总和：

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

还有更新且更简洁的 document.querySelector[All] 函数：

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

- junvar

Answer 2

没有getElementByClass这个方法，但是有getElementsByClassName。不过，它返回的是一个元素集合，因为您可以有多个具有相同类名的元素。而ID在文档中限制为一个。

所以，如果您知道集合中元素的索引，您可以这样做：

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

- andrunix

Answer 3

@evolutionxbox提供了可行的答案，尽管这是一条评论。@evolutionxbox，请将您的评论变成答案，以便我可以将其标记为正确答案。

这个方法可行。

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

- user15559049

Answer 4

如果您想计算特定 className 的所有子元素数量，可以按照以下步骤进行：

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

- StackSlave

Answer 5

你可以使用jQuery来实现这个功能：

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

- Ran Turner

Answer 6

像这样在父元素上使用childElementCount-

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

- Subhojit Khara