推荐用 firstElementChild 而不是 firstChild，因其只返回元素节点，自动跳过文本、注释等非元素节点；firstChild 可能返回空白文本节点（nodeType===3），而 firstElementChild 直接返回首个 等标签元素，更精准常用。

在 JavaScript 中，firstElementChild 和 lastElementChild 是用于获取**元素节点（Element）类型**的首尾子元素的属性，它们会自动跳过文本节点、注释节点等非元素节点，比 firstChild / lastChild 更精准、更常用。

为什么推荐用 firstElementChild 而不是 firstChild

firstChild 和 lastChild 返回的是所有类型的子节点（包括空格、换行产生的文本节点），而实际开发中我们通常只关心 HTML 标签元素。例如：

<div id="box">
  <p>第一段</p>
  <span>第二项</span>
</div>

这个

的 firstChild 很可能是换行或空白符构成的文本节点（nodeType === 3），而不是

元素。但 firstElementChild 会直接返回第一个

元素，无需判断节点类型。

基本用法：直接读取属性

这两个属性是只读的，使用方式非常简单：

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

• element.firstElementChild → 返回第一个子元素节点，无则为 null
• element.lastElementChild → 返回最后一个子元素节点，无则为 null

示例：

const box = document.getElementById('box');
const first = box.firstElementChild;   // <p>第一段</p>
const last  = box.lastElementChild;    // <span>第二项</span>

兼容性注意（IE9+ 支持，IE8 及以下不支持）

如果项目还需兼容 IE8，需手动遍历子节点过滤：

• 用 element.children（只含元素节点，IE6+ 支持）数组取 [0] 和 [children.length - 1]
• 或遍历 element.childNodes，检查每个节点的 nodeType === 1

现代项目基本可放心使用 firstElementChild / lastElementChild，简洁且语义清晰。

常见误用提醒

注意以下几点避免踩坑：

• 它们作用于父元素，不是子元素自己 —— 比如 el.firstElementChild 是获取 el 的第一个子元素，不是 el 自己是不是“第一个”
• 返回值是 Element 对象，可继续链式调用，比如：box.firstElementChild.classList.add('active')
• 若父元素没有子元素节点，两个属性都返回 null，使用前建议判空