ParentNode.childElementCount 教程
最后修改于 2023 年 8 月 24 日
ParentNode.childElementCount 教程演示了如何在 JavaScript 文档中计算元素的子元素数量。
ParentNode.childElementCount
ParentNode.childElementCount 返回此 ParentNode 中是元素的子节点的数量。该属性在 DOM 的文档和元素中均有实现。
要确定子元素，我们可以使用 ParentNode.children 属性。
ParentNode.childElementCount 示例
以下示例计算了所选元素的子元素数量。我们通过单击元素来选择它。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ParentNode.childElementCount</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="first">
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>
<div id="second">
<p>paragraph 1</p>
<p>paragraph 3</p>
</div>
<div id="output"></div>
<button id="count">Count</button>
<script src="main.js"></script>
</body>
</html>
在文档中，我们有几个元素。按钮的事件处理程序会将子元素的数量输出到输出 div 中。
main.css
* {
margin:10px;
}
div {
border: 1px solid steelblue;
width: 200px; height: 150px;
}
这是文档的一些基本样式。
main.js
let selected = document.body;
let btn = document.getElementById('count');
let output = document.getElementById('output');
btn.addEventListener('click', countElements);
function countElements(e) {
let nOfElements = selected.childElementCount;
output.innerHTML = `The ${selected.localName} has ${nOfElements} elements`;
}
document.onclick = e => {
if (e.target.localName != 'button') {
selected = e.target;
}
}
有两个事件处理程序。
function countElements(e) {
let nOfElements = selected.childElementCount;
output.innerHTML = `The ${selected.localName} has ${nOfElements} elements`;
}
我们使用 childElementCount 属性确定子元素的数量，并将消息输出到 div 的 innerHTML 中。
document.onclick = e => {
if (e.target.localName != 'button') {
selected = e.target;
}
}
我们在文档的处理程序中确定了被单击的元素。我们跳过了按钮元素。
在本文中，我们展示了如何计算 DOM 元素的子元素数量。