推荐使用 firstelementchild 属性获取父节点下的第一个子元素节点，它自动跳过文本、注释等非元素节点，语义清晰且兼容 ie9+；若无子元素则返回 null，需判空。
在 JavaScript 中，获取父节点下的第一个子元素节点（即不包含文本、注释等非元素节点），推荐使用 firstElementChild 属性。
用 firstElementChild 获取首个子元素（最常用）
该属性直接返回父节点的第一个元素节点，自动跳过空格、换行、文本节点和注释节点，语义清晰、兼容性好（IE9+）。
- 语法：
parentElement.firstElementChild - 示例：
<div id="box"> <!-- 注释 --> \n <span>第一个元素</span> <p>第二个元素</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java"><img src="https://img.php.cn/upload/skill/000/000/081/178955835420587.jpg" alt="Alibabacloud Sdk Client Initialization For Java" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="overflowclass">Alibabacloud Sdk Client Initialization For Java</a> <p class="overflowclass">在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。</p> </div> <a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div>
document.getElementById('box').firstElementChild返回的就是<span></span>元素。
对比：childNodes[0] 不可靠
childNodes 返回的是所有子节点（包括文本、注释、元素），首项常为空白文本节点（如换行或缩进），容易出错。
- 即使 HTML 看似紧凑，DOM 解析后仍可能产生文本节点
- 若需用
childNodes，得手动过滤：Array.from(parent.childNodes).find(node => node.nodeType === 1)（nodeType 1 表示元素节点） - 不推荐日常使用，冗余且性能略低
其他可用方式（按场景选择）
-
children[0]：返回元素子节点的 HTMLCollection 中第一个，IE9+ 支持，效果与firstElementChild基本一致，但children是只读类数组，firstElementChild是直接属性，更简洁 -
querySelector(':scope > :first-child')：CSS 方式，支持复杂筛选，但性能略低，适合需要条件匹配时（如“第一个带 class 的子元素”）
日常开发中，firstElementChild 是最直接、安全、高效的选择。注意它返回 null（而非 undefined）当不存在子元素时，使用前建议判空。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
