应使用firstElementChild和lastElementChild而非firstChild/lastChild，因前者只返回元素节点，跳过文本、注释等非元素节点，更准确可靠；后者可能返回空白文本节点导致错误。
直接用 firstElementChild 和 lastElementChild 属性就能获取父元素的第一个和最后一个元素节点（即跳过文本、注释等非元素节点）。
为什么不用 firstChild / lastChild？
firstChild 和 lastChild 返回的是所有类型的子节点，包括空白文本节点（比如换行、缩进）、注释节点等，容易出错。而 firstElementChild 和 lastElementChild 只关心 HTML 元素标签（如 <div>、<p>），更符合日常需求。
例如：
<ul><li>苹果</li>
<li>香蕉</li>
</ul>
在有换行缩进的 HTML 中，ul.firstChild 很可能是换行产生的文本节点，但 ul.firstElementChild 稳稳指向第一个 <li>。
立即学习“Java免费学习笔记（深入）”；
基本用法示例
假设有一个容器：
<div id="container">
<h2>标题</h2>
<p>段落内容</p>
<span>说明文字</span>
</div>
JS 获取首尾子元素：
-
document.getElementById('container').firstElementChild→ 返回<h2>元素 -
document.getElementById('container').lastElementChild→ 返回<span>元素
注意：如果父元素没有子元素节点，这两个属性返回 null，使用前建议判断一下。
兼容性与安全写法
IE9+ 支持这两个属性，现代浏览器完全没问题。为避免运行时报错，推荐加空值检查：
- 获取首元素：
const first = parent.firstElementChild || parent.children[0]; - 获取尾元素：
const last = parent.lastElementChild || parent.children[parent.children.length - 1];
children 是只读的 HTMLCollection，只包含元素子节点，是更老但兼容性极好的替代方案（IE6+ 支持）。
常见误区提醒
- 它们只读，不能赋值（比如
el.firstElementChild = newEl无效） - 不触发重排或重绘，只是访问已有 DOM 结构
- 动态添加子元素后，属性值会自动更新（DOM 实时性）
- 对
Document或DocumentFragment也有效，但要注意其子元素可能只有<html>或为空
不复杂但容易忽略细节，用对了能少踩不少坑。
