JavaScript firstChild
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 firstChild 属性。此属性对于 DOM 遍历至关重要，允许开发人员访问元素的第一个子节点。
基本定义
firstChild 属性返回指定元素的第一个子节点。这包括所有节点类型，而不仅仅是元素节点。
需要注意的是，firstChild 可以返回文本节点、注释节点或元素节点。如果元素没有子节点，则返回 null。
访问第一个子元素
此示例演示了如何访问元素的第一个子节点。
<!DOCTYPE html>
<html>
<head>
<title>Basic firstChild</title>
</head>
<body>
<div id="container">
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<script>
const container = document.getElementById('container');
const firstChild = container.firstChild;
console.log(firstChild);
</script>
</body>
</html>
在此示例中，我们有一个包含两个段落子元素的 div 元素。JavaScript 代码使用 firstChild 检索第一个子节点。
请注意，在许多情况下，这可能会返回一个包含空格的文本节点，而不是第一个段落元素。这是因为标签之间的空格被视为文本节点。
使用 firstElementChild
此示例显示如何获取第一个子元素，忽略文本节点。
<!DOCTYPE html>
<html>
<head>
<title>firstElementChild</title>
</head>
<body>
<ul id="list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<script>
const list = document.getElementById('list');
const firstElement = list.firstElementChild;
console.log(firstElement.textContent);
</script>
</body>
</html>
在这里，我们使用 firstElementChild 而不是 firstChild 来直接访问第一个元素子节点，跳过任何文本节点或注释节点。
当您专门希望处理元素节点而不是所有节点类型时，这通常更有用。输出将是“First item”。
检查子节点
此示例演示了如何安全地检查和访问第一个子节点。
<!DOCTYPE html>
<html>
<head>
<title>Checking firstChild</title>
</head>
<body>
<div id="empty"></div>
<div id="content">Some text</div>
<script>
const emptyDiv = document.getElementById('empty');
const contentDiv = document.getElementById('content');
if (emptyDiv.firstChild) {
console.log('Empty div has children');
} else {
console.log('Empty div has no children');
}
if (contentDiv.firstChild) {
console.log('Content:', contentDiv.firstChild.nodeValue);
}
</script>
</body>
</html>
此示例显示如何在尝试访问 firstChild 之前检查元素是否具有任何子节点。这可以防止在处理可能为空的元素时出错。
nodeValue 属性用于访问文本节点的文本内容。对于元素节点，此属性为 null。
修改第一个子节点
此示例显示如何修改元素的第一个子节点。
<!DOCTYPE html>
<html>
<head>
<title>Modifying firstChild</title>
</head>
<body>
<div id="modify">
Original text
<p>Paragraph</p>
</div>
<button onclick="changeFirstChild()">Modify</button>
<script>
function changeFirstChild() {
const div = document.getElementById('modify');
const firstChild = div.firstChild;
if (firstChild.nodeType === Node.TEXT_NODE) {
firstChild.nodeValue = 'Modified text ';
}
}
</script>
</body>
</html>
在此示例中，我们有一个混合内容的 div。按钮的点击处理程序会查找第一个子节点，并在它是文本节点时对其进行修改。
我们检查 nodeType 以确保我们处理的是文本节点，然后再尝试修改它。这演示了类型安全的 DOM 操作。
遍历子节点
此示例演示了在节点遍历中使用 firstChild。
<!DOCTYPE html>
<html>
<head>
<title>Node Traversal</title>
</head>
<body>
<div id="traverse">
<!-- Comment -->
<span>First span</span>
<p>Paragraph</p>
</div>
<button onclick="traverseNodes()">Traverse</button>
<script>
function traverseNodes() {
const div = document.getElementById('traverse');
let currentNode = div.firstChild;
while (currentNode) {
console.log(currentNode.nodeName, currentNode.nodeType);
currentNode = currentNode.nextSibling;
}
}
</script>
</body>
</html>
此示例展示了如何从 firstChild 开始遍历所有子节点。每个节点的名称和类型都会被记录到控制台。
遍历使用 nextSibling 来移动到每个后续节点。这种模式对于检查元素内的所有节点都很有用。
来源
在本文中，我们展示了如何在 JavaScript 中使用 firstChild 属性。此属性对于 Web 开发中的 DOM 遍历和节点操作至关重要。
作者
列出 所有 JS DOM 教程。