JavaScript childNodes
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 childNodes 属性。此属性对于 DOM 遍历至关重要，它允许开发人员访问元素的所有子节点，包括文本节点和注释节点。
基本定义
childNodes 属性返回给定元素的子节点的 NodeList。与 children 不同，它包括所有节点类型，而不仅仅是元素节点。
NodeList 是一个实时集合，这意味着当添加或删除子节点时，它会自动更新。节点从 0 开始索引，类似于数组。
基本 childNodes 示例
此示例演示了如何访问简单 div 元素的子节点。
<!DOCTYPE html>
<html>
<head>
<title>Basic childNodes</title>
</head>
<body>
<div id="parent">
<p>First paragraph</p>
Text content
<!-- Comment node -->
<p>Second paragraph</p>
</div>
<script>
const parent = document.getElementById('parent');
const nodes = parent.childNodes;
console.log('Total child nodes:', nodes.length);
nodes.forEach((node, index) => {
console.log(`Node ${index}:`, node);
});
</script>
</body>
</html>
在此示例中，我们有一个带有各种子节点的 div。JavaScript 代码使用 childNodes 检索所有子节点，并将它们记录到控制台中。
输出显示 childNodes 包含元素节点、文本节点和注释节点。这表明与仅返回元素节点的 children 相比，它具有全面的特性。
过滤元素节点
此示例展示了如何从 childNodes 集合中仅过滤元素节点。
<!DOCTYPE html>
<html>
<head>
<title>Filtering Element Nodes</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');
const allNodes = list.childNodes;
const elementNodes = Array.from(allNodes).filter(
node => node.nodeType === Node.ELEMENT_NODE
);
console.log('All nodes:', allNodes.length);
console.log('Element nodes:', elementNodes.length);
elementNodes.forEach(node => {
console.log(node.textContent);
});
</script>
</body>
</html>
这里我们有一个带有三个项目的无序列表。代码首先获取所有子节点，然后过滤它们以仅包含元素节点（nodeType 1）。
这演示了如何处理 childNodes 集合中的特定节点类型。nodeType 属性有助于识别 DOM 中的不同节点类型。
计算文本节点
此示例演示了如何在 childNodes 中计算和处理文本节点。
<!DOCTYPE html>
<html>
<head>
<title>Counting Text Nodes</title>
</head>
<body>
<div id="container">
Some text
<p>Paragraph</p>
More text
<span>Span element</span>
Final text
</div>
<script>
const container = document.getElementById('container');
const textNodes = Array.from(container.childNodes).filter(
node => node.nodeType === Node.TEXT_NODE &&
node.textContent.trim() !== ''
);
console.log('Text nodes found:', textNodes.length);
textNodes.forEach((node, index) => {
console.log(`Text node ${index + 1}:`, node.textContent.trim());
});
</script>
</body>
</html>
在此示例中，我们有一个包含文本节点和元素节点的混合内容的 div。代码会过滤掉空的文本节点并计算剩余的节点。
这展示了如何专门处理文本节点，这些节点通常被忽略，但对于精确的 DOM 操作和内容分析可能很重要。
修改子节点
此示例展示了如何访问子节点后修改它们。
<!DOCTYPE html>
<html>
<head>
<title>Modifying Child Nodes</title>
</head>
<body>
<div id="content">
<p class="item">Original text 1</p>
<p class="item">Original text 2</p>
<p class="item">Original text 3</p>
</div>
<button onclick="modifyNodes()">Modify Nodes</button>
<script>
function modifyNodes() {
const content = document.getElementById('content');
const nodes = content.childNodes;
Array.from(nodes).forEach((node, index) => {
if (node.nodeType === Node.ELEMENT_NODE) {
node.textContent = `Modified text ${index + 1}`;
node.style.color = 'red';
}
});
}
</script>
</body>
</html>
这里我们有一个带有段落元素和一个按钮的 div。单击按钮时，它会修改每个元素节点的文本内容和样式。
这演示了 childNodes 在批量修改 DOM 元素方面的实际应用。该示例还展示了如何安全地处理仅元素节点。
检查子节点
此示例演示了如何检查元素是否具有子节点。
<!DOCTYPE html>
<html>
<head>
<title>Checking for Child Nodes</title>
</head>
<body>
<div id="parent1">
<p>Child paragraph</p>
</div>
<div id="parent2"></div>
<script>
const parent1 = document.getElementById('parent1');
const parent2 = document.getElementById('parent2');
console.log('Parent1 has child nodes:', parent1.hasChildNodes());
console.log('Parent2 has child nodes:', parent2.hasChildNodes());
if (parent1.hasChildNodes()) {
console.log('Parent1 first child:', parent1.firstChild);
}
</script>
</body>
</html>
在此示例中，我们有两个 div 元素 - 一个有内容，一个为空。代码使用 hasChildNodes() 检查每个元素是否有子节点。
这展示了如何在尝试访问子节点之前安全地检查子节点。还演示了使用 firstChild 属性直接访问第一个节点。
来源
在本文中，我们展示了如何在 JavaScript 中使用 childNodes 属性。此属性对于 Web 开发中的 DOM 遍历和操作至关重要。
作者
列出 所有 JS DOM 教程。