使用JavaScript计算元素的直接子元素数量

Question

我可以获取一个元素的所有后代元素数量，但是我似乎无法仅针对直接子元素进行目标定位。以下是我目前拥有的代码。

var sectionCount = document.getElementById("window").getElementsByTagName("section").length;

我尝试过其他工具和不同的语法，但似乎做不到。

相当于 jQuery 的写法是:

var sectionCount = $("#window > section").length;

但我需要只使用JavaScript完成此操作。

- Ark-of-Ice

Answer 1

使用 DOM 选择器接口(querySelectorAll)。

var selectionCount = document.querySelectorAll("#window > section").length;

如果您需要向后兼容的解决方案，请循环遍历childNodes并计算元素节点的数量。

var w = document.getElementById('window');
var count = 0; // this will contain the total elements.
for (var i = 0; i < w.childNodes.length; i++) {
    var node = w.childNodes[i];
    if (node.nodeType == Node.ELEMENT_NODE && node.nodeName == "SECTION") {
        count++;
    }
}

- Anurag

---

不过，在史前时期这是不相容的。即IE和IEn。 - Caspar Kleijne

@Caspar - 史前时代的笑话，那并不是很久以前的事情。已经为IE添加了一个解决方案。 - Anurag

抱歉回复晚了。我现在才意识到它确实在IE中出错了。它显示“节点未定义”。它出现在'if'语句所在的行上。是否需要切换某些内容或者我应该定义节点？ - Ark-of-Ice

用整数1替换Node.ELEMENT_NODE。 - Anurag

这不应该是个问题，特别是你已经看到 SECTION 标签名称被记录下来了。从那时起，它基本上就是一个整数和一个字符串的比较。也许记录下所有三个表达式的结果并查看它们是否为 true - node.nodeType == 1，node.nodeName == "SECTION" 和合并版本 node.nodeType == 1 && node.nodeName == "SECTION"。 - Anurag