Question

我试图通过纯'javascript'找到节点的子节点数但是出现意外错误。

HTML：

<html>
<head>
<script>
var a = document.getElementById('div1').children.length;
console.log(a);
</script>
</head>
<body> 
<div id="div1">
<p>This is para1.</p>
<p>This is para2.</p>
</div>
</body>
</html>

错误：

TypeError: Cannot read property 'children' of null

但是，我可以清楚地看到我的div有2个子节点。有人可以帮忙吗？

Answer 1

您应该将代码放到onload事件

window.onload = function () {
    var a = document.getElementById('div1').children.length;
    console.log(a);
}

或者将您的脚本放在</body>之前，因为您在创建DOM节点之前会尝试获取该节点

Answer 2

您的问题是由浏览器中页面构建过程中的事件顺序引起的。

按顺序同步解析和评估HTML。一旦HTML中出现脚本，就会对其进行评估。当您的脚本（document.getElementById('div1') ...）被评估时， div1 还没有存在（解析器还没有看到它），因此结果是null，你得到例外。

这就是为什么建议在HTML文档末尾放置内联脚本标记，紧接在正文结束标记（</body>）之前。

查找元素的子元素数返回“null”错误

2 个答案: