ol.children.length > 0 是最可靠判断方式，因 children 仅返回元素节点（如 ），自动过滤换行缩进产生的文本节点；而 haschildnodes() 会将空白字符解析为 text 节点导致误判。
直接用 hasChildNodes() 会误判
因为 <ol></ol> 元素哪怕视觉上“空”，只要 HTML 源码里有换行或空格，hasChildNodes() 就返回 true——这些空白字符会被解析为 Text 类型节点。这不是你想要的“有实际列表项”的判断。
常见错误现象：document.querySelector('ol').hasChildNodes() 对空 <ol></ol> 返回 true，但里面根本没 <li>。
- 只关心是否有
<li>子元素？用querySelector('li')或children.length - 需要兼容老浏览器？
ol.children.length > 0最稳（children只含元素节点，过滤掉文本/注释） - 想严格检查是否至少有一个
<li>且不被display: none隐藏？得加:not([aria-hidden="true"])这类逻辑，不能只靠 DOM 结构
ol.children.length 是最常用也最可靠的判断方式
children 属性只返回元素节点（即 <li>），完全忽略空白文本、注释等干扰项，语义清晰、性能好、兼容性覆盖 IE9+。
使用场景：表单提交前校验步骤列表是否为空；动态渲染后判断是否要显示“暂无步骤”提示。
-
ol.children.length === 0→ 真空，没任何<li> -
ol.children.length > 0→ 至少有一个可见的<li>（注意：不保证内容可读或未被 JS 隐藏） - 别用
childNodes.length，它包含换行符，结果不可靠
用 querySelector 判断是否存在有效 <li>
当你需要更精确的语义控制（比如跳过被 aria-hidden="true" 或 data-disabled 标记的项），querySelector 更灵活：
const hasVisibleLi = ol.querySelector('li:not([aria-hidden="true"]):not([data-disabled])') !== null;
这个写法能绕过辅助技术隐藏项，适合可访问性要求高的流程列表。
- 比遍历
children更简洁，适合一次判断 - 支持复杂条件，比如
li[data-step-status="done"] - 注意：如果
ol是动态生成的，确保执行时 DOM 已就绪
为什么不用 firstChild 或 lastChild
firstChild 和 lastChild 同样受文本节点干扰——哪怕 <ol>\n <li>第一步</li>\n</ol>，firstChild 也是换行符组成的 Text 节点，不是 <li>。
-
ol.firstChild.nodeType === Node.ELEMENT_NODE才能确认是元素，但太啰嗦 - 不如直接用
ol.children[0]或ol.firstElementChild（IE9+ 支持） -
firstElementChild是更现代的替代，但兼容性略弱于children.length
<li>，关键不是“有没有节点”，而是“有没有你想让它起作用的那个元素”。children.length 简单、可靠、不踩坑，多数情况够用；需要精细控制时，再上 querySelector。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
