JavaScript element.children
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 element.children 属性。此属性可访问元素的子元素，但不包括文本节点和注释。它对于 DOM 遍历至关重要。
基本定义
element.children 属性返回给定元素的子元素的实时 HTMLCollection。它只包含元素节点，不包含文本节点或注释节点。
与 childNodes 不同，children 更具针对性，因为它只返回元素节点。这使其成为涉及元素遍历的大多数 DOM 操作任务的理想选择。
访问子元素
此示例演示了如何访问父元素的子元素。
<!DOCTYPE html>
<html>
<head>
<title>Accessing Children</title>
</head>
<body>
<div id="parent">
<p>First paragraph</p>
<p>Second paragraph</p>
<div>Nested div</div>
</div>
<script>
const parent = document.getElementById('parent');
const children = parent.children;
console.log(children.length); // 3
console.log(children[0].textContent); // "First paragraph"
</script>
</body>
</html>
在此示例中，我们访问 ID 为“parent”的 div 元素的子元素。children 属性返回三个子元素的 HTMLCollection。
然后，我们可以通过索引访问单个子元素并处理它们的属性。该集合是实时的，这意味着它会在 DOM 更改时自动更新。
遍历子元素
此示例展示了如何循环遍历父元素的所有子元素。
<!DOCTYPE html>
<html>
<head>
<title>Iterating Children</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
for (let i = 0; i < list.children.length; i++) {
list.children[i].style.color = 'blue';
}
</script>
</body>
</html>
这里我们有一个包含三个项目的无序列表。JavaScript 代码使用 children 访问所有列表项并更改它们的文本颜色。
这演示了如何使用标准的 for 循环遍历子元素。我们可以在迭代期间对每个子元素执行操作。
检查子元素
此示例演示了如何检查元素是否具有任何子元素。
<!DOCTYPE html>
<html>
<head>
<title>Checking Children</title>
</head>
<body>
<div id="container">
<span>Child element</span>
</div>
<div id="empty"></div>
<script>
const container = document.getElementById('container');
const emptyDiv = document.getElementById('empty');
console.log(container.children.length > 0); // true
console.log(emptyDiv.children.length > 0); // false
</script>
</body>
</html>
在此示例中，我们检查两个 div 元素是否包含任何子元素。children.length 属性告诉我们存在多少子元素。
此技术对于基于元素内容的条件逻辑很有用。请记住，children 只计算元素节点，不计算文本节点。
将子元素转换为数组
此示例展示了如何将子元素的 HTMLCollection 转换为数组。
<!DOCTYPE html>
<html>
<head>
<title>Children to Array</title>
</head>
<body>
<div id="gallery">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<script>
const gallery = document.getElementById('gallery');
const childrenArray = Array.from(gallery.children);
childrenArray.forEach(img => {
console.log(img.src);
});
</script>
</body>
</html>
在这里，我们使用 Array.from() 将图库 div 的子元素转换为一个真正的数组。这使我们能够使用 forEach 等数组方法。
当您需要 HTMLCollection 上不可用的数组方法时，转换为数组会很有帮助。它还创建了元素的静态快照。
过滤子元素
此示例演示了如何根据条件过滤子元素。
<!DOCTYPE html>
<html>
<head>
<title>Filtering Children</title>
</head>
<body>
<div id="content">
<p class="important">Important note</p>
<p>Regular text</p>
<p class="important">Another important note</p>
</div>
<script>
const content = document.getElementById('content');
const importantNotes = Array.from(content.children)
.filter(child => child.classList.contains('important'));
importantNotes.forEach(note => {
note.style.fontWeight = 'bold';
});
</script>
</body>
</html>
在此示例中，我们过滤子元素以仅选择具有“important”类的元素。然后，我们仅将样式应用于这些过滤后的元素。
这展示了将 children 与数组方法结合使用进行选择性 DOM 操作的强大功能。filter 操作创建一个包含匹配元素的新数组。
来源
在本文中，我们探讨了 JavaScript 中的 element.children 属性。此属性对于 DOM 遍历和操作至关重要，可访问元素的子元素。
作者
列出 所有 JS DOM 教程。