firstElementChild 更可靠,因为它只返回第一个子元素节点,跳过空白文本节点和注释节点;而 firstChild 可能返回换行符等不可见的文本节点,导致意外错误。

firstElementChild 是一个只读属性,用于获取父元素的**第一个子元素节点**(不包括文本节点、注释节点等非元素节点),它比 firstChild 更实用,因为后者可能返回空白文本节点(比如换行或空格)。
为什么 firstElementChild 更可靠?
HTML 中常因格式化缩进产生看不见的文本节点。例如:
第一段
第二项
此时 container.firstChild 很可能是换行符组成的文本节点,而 container.firstElementChild 直接返回 元素。
基本用法和注意事项
- 只作用于元素节点,不能在 document 或 text node 上使用
- 若父容器下没有子元素(全是空白或注释),返回
null,使用前建议判空 - 返回的是Element 对象,可直接调用
.className、.textContent等属性
常见安全写法示例
推荐加空值判断,避免报错:
const container = document.getElementById('container');const firstEl = container.firstElementChild;
if (firstEl) {
console.log('第一个元素是:', firstEl.tagName);
} else {
console.log('容器内无元素子节点');
}
替代方案对比(按场景选择)
- 想选第一个
?用querySelector('li')更精准 - 要兼容老浏览器(如 IE8-)?
firstElementChild不支持,可用children[0](children只含元素节点) - 需遍历所有子元素?
children是 HTMLCollection,firstElementChild是快捷入口










