HTML DOM childNodes 属性
htmlweb developmentfront end technology更新于 2025/9/23 4:28:17
HTML DOM childNodes 属性以 NodeList 对象的形式返回节点子节点的集合。这些节点已排序，其顺序与它们在 HTML 文档中的显示顺序相同。这些节点可以通过从 0 开始的索引号访问。它是一个只读属性。请记住，空格和注释也被视为节点。
语法
以下是 childNodes 属性的语法 −
elementNodeReference.childNodes;
示例
让我们看一个 HTML DOM childNodes 属性的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid blue;
margin: 7px;
}
</style>
</head>
<body>
<p>Click the button below to find the div element childnodes.</p>
<button onclick="countNodes()">COUNT</button>
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>
<p id="Sample"></p>
<script>
function countNodes() {
var x = document.getElementById("DIV1").childNodes.length;
document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击 COUNT 按钮 −
在上面的例子中 −
我们创建了一个 id 为 “DIV1” 的 <div> 元素，其中包含两个段落。我们添加了彩色边框和一些边距，以将其与其他元素区分开来。这里需要注意的是，我们按下了三次回车键，使每个元素都占一行，这在我们的 <div> 标签中总共创建了三个空格。
div {
border: 1px solid blue;
margin: 7px;
}
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>
然后，我们创建了一个按钮 COUNT，当用户点击该按钮时，它将执行 countNodes() 方法。
<button onclick=“countNodes()>COUNT</button>
countNodes() 函数获取 id 等于 “DIV1” 的元素(在本例中为 <div> 元素)，并获取其 childnodes.length 属性值并将其赋值给变量 x。
由于 <div> 标签内有三个空格和两个 <p> 元素，因此 childnodes.length 返回 5。然后，使用 innerHTML() 方法将返回值显示在 id 为 “Sample” 的段落中。
function countNodes() {
var x = document.getElementById("DIV1").childNodes.length;
document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
