DOM 树、节点身份与遍历

本节用一个最小 DOM 树观察节点身份、元素子节点和静态查询快照。

规则与边界

• 平台保证、浏览器实现和业务约定必须分开；一个浏览器中的结果不能自动推广到所有宿主。
• 每个监听器、请求、观察器、缓存和焦点操作都要有清理/取消责任；页面或组件离开后不能继续写状态。
• 用户输入、URL、HTML、消息和持久化数据按不同信任边界处理；类型正确不代表内容可信。
• 失败、取消、超时、权限拒绝、配额不足和不支持要有不同的可观察结果。

机制拆解

DOM 节点有身份，查询得到的引用不会因为后来替换同名元素而自动指向新节点。children 只返回元素子节点，childNodes 还包括文本节点；静态 querySelectorAll 结果也不会自动跟随未来插入的节点。

可运行实验

<ul id="list"><li>A</li><li>B</li></ul>
<script>
  const list = document.querySelector('#list')
  const snapshot = list.querySelectorAll('li')
  list.insertAdjacentHTML('beforeend', '<li>C</li>')
  console.log(snapshot.length, list.children.length, list.childNodes.length)
</script>

预期静态快照仍为 2，而 children.length 为 3。替换第一个 li 后比较旧引用的 isConnected，说明节点身份与文本内容不是一回事。

练习

1. 用 querySelectorAll 得到快照后插入节点，写出两个长度断言。
2. 替换第一个节点并比较旧引用的 isConnected 与新查询结果。
3. 解释何时需要 TreeWalker 或实时集合，以及它们的遍历代价。 查看本节答案

下一步

完成答案核对后继续本章下一篇，并把实验日志保存在自己的项目中。