JavaScript firstElementChild
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 firstElementChild 属性。此属性对于 DOM 遍历至关重要，它允许开发人员访问指定父元素的第一个子元素节点。
基本定义
firstElementChild 属性返回指定元素的第一个子元素。与 firstChild 不同，它只考虑元素节点，忽略文本节点和注释节点。
此属性是只读的，如果父元素没有子元素，则返回 null。它是 Element 接口的一部分，在现代浏览器中得到了广泛支持。
基本 firstElementChild
本示例演示了如何访问 div 的第一个子元素。
<!DOCTYPE html>
<html>
<head>
<title>Basic firstElementChild</title>
</head>
<body>
<div id="parent">
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<script>
const parent = document.getElementById('parent');
const firstChild = parent.firstElementChild;
console.log(firstChild.textContent);
</script>
</body>
</html>
在这个基本示例中，我们有一个带有两个段落子元素的 div 元素。JavaScript 代码使用 firstElementChild 检索第一个子元素并记录其文本内容。
这演示了 firstElementChild 用于访问第一个元素节点的根本用法。该属性会忽略可能出现在第一个元素之前的任何文本节点或注释。
firstElementChild 与 firstChild
本示例显示了 firstElementChild 和 firstChild 之间的区别。
<!DOCTYPE html>
<html>
<head>
<title>firstElementChild vs firstChild</title>
</head>
<body>
<div id="container">
<!-- This is a comment -->
<p>Only child element</p>
</div>
<script>
const container = document.getElementById('container');
console.log('firstChild:', container.firstChild);
console.log('firstElementChild:', container.firstElementChild);
</script>
</body>
</html>
这里我们有一个 div，在其段落子元素之前有一个注释节点。脚本显示 firstChild 如何返回注释节点，而 firstElementChild 跳过它并返回段落。
这突出了在处理混合内容时这些属性之间的关键区别。firstElementChild 对于 DOM 遍历通常更有用，因为它会忽略非元素节点。
检查子元素
本示例演示了如何检查元素是否具有任何子元素。
<!DOCTYPE html>
<html>
<head>
<title>Checking for Child Elements</title>
</head>
<body>
<div id="hasChildren">
<span>Child element</span>
</div>
<div id="noChildren"></div>
<script>
const hasChildren = document.getElementById('hasChildren');
const noChildren = document.getElementById('noChildren');
console.log('hasChildren:', hasChildren.firstElementChild !== null);
console.log('noChildren:', noChildren.firstElementChild !== null);
</script>
</body>
</html>
在此示例中，我们检查两个 div - 一个有子元素，一个没有。通过将 firstElementChild 与 null 进行比较，我们可以确定是否存在子元素。
此技术对于基于 DOM 结构的条件逻辑很有用。当您只关心元素节点时，它比检查 childNodes.length 更可靠。
修改第一个子元素
本示例显示了如何修改父元素的第一个子元素。
<!DOCTYPE html>
<html>
<head>
<title>Modifying First Child</title>
</head>
<body>
<ul id="list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<button onclick="highlightFirst()">Highlight First</button>
<script>
function highlightFirst() {
const list = document.getElementById('list');
const firstItem = list.firstElementChild;
firstItem.style.backgroundColor = 'yellow';
firstItem.style.fontWeight = 'bold';
}
</script>
</body>
</html>
这里我们有一个无序列表和一个按钮。单击按钮时，它会使用 firstElementChild 查找第一个列表项并对其应用样式。
这演示了 firstElementChild 在 DOM 操作中的实际应用。该属性可以直接访问第一个子元素进行修改，而无需过滤其他节点类型。
链式调用 firstElementChild
本示例演示了链式调用多个 firstElementChild。
<!DOCTYPE html>
<html>
<head>
<title>Chaining firstElementChild</title>
</head>
<body>
<div id="grandparent">
<div>
<p>Nested paragraph</p>
</div>
</div>
<script>
const grandparent = document.getElementById('grandparent');
const nestedPara = grandparent.firstElementChild.firstElementChild;
console.log(nestedPara.textContent);
</script>
</body>
</html>
在此示例中，我们链式调用两个 firstElementChild 来访问一个深度嵌套的段落。第一次调用获取子 div，第二次调用获取段落。
这表明 firstElementChild 可以按顺序用于遍历 DOM 树的多个级别。在处理可能为空的元素时，务必在每个步骤检查 null。
来源
在本文中，我们展示了如何在 JavaScript 中使用 firstElementChild。此属性是 Web 开发中 DOM 遍历和元素选择的基础。
作者
列出 所有 JS DOM 教程。