HTML DOM childElementCount 属性
htmlweb developmentfront end technology更新于 2025/9/23 3:56:17
HTML DOM childElementCount 属性是一个只读属性，用于返回给定元素的子元素数量。childElementCount 的返回类型为无符号长整型。它仅返回查询节点的子元素，而不是 HTML 文档的所有子节点。
语法
以下是 childElementCount 属性的语法 −
node.childElementCount
示例
让我们看一个 HTML DOM childElementCount 属性的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
margin: 7px;
padding-left:20px;
}
</style>
</head>
<body>
<p>Click the button below to find out the no of children of the div element</p>
<button onclick="childCount()">COUNT</button>
<div id="myDIV">
<h3>HEADING</h3>
<p>First p element</p>
<p>Second p element</p>
</div>
<p id="Sample"></p>
<script>
function childCount() {
var x = document.getElementById("myDIV").childElementCount;
document.getElementById("Sample").innerHTML = "The div element has "+x+" children";
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击 COUNT 按钮时 −
在上面的例子中 −
我们创建了一个 id 为 “myDIV” 的 <div> 元素，其中包含三个元素:两个 <p> 元素和一个 <h3> 标题。我们还为 div 添加了彩色边框、边距和内边距，以将其与其他元素区分开来 −
div {
border: 2px solid blue;
margin: 7px;
padding-left:20px;
}
<div id="myDIV">
<h3>HEADING</h3>
<p>First p element</p>
<p>Second p element</p>
</div>
然后，我们创建了一个按钮 COUNT，点击后会执行 childCount() 方法。
<button onclick="childCount()>COUNT</button>
childCount() 方法获取 id 为 “myDIV” 的元素(在本例中为 <div>)，并将其 childElementCount 属性值赋给变量 x。由于 <div> 内有两个 <p> 元素和一个 <h3> 元素，因此 childElementCount 返回 3。
然后，使用段落的 innerHTML() 方法将返回的值显示在 id 为 “Sample” 的段落中 −
function childCount() {
var x = document.getElementById("myDIV").childElementCount;
document.getElementById("Sample").innerHTML = "The div element has "+x+" children";
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
