如何理解浏览器构建和维护文档对象模型时的节点集合与变更成本？

# 核心结论

DOM 是浏览器根据文档解析结果构建的节点树，是脚本操作页面结构的接口，不等同于原始 HTML 字符串，也不等同于最终绘制出的像素。理解节点类型、节点集合是否实时、特性与对象属性的差异，以及读写节点可能引发的渲染成本，才能写出稳定且高效的页面逻辑。工程上尤其要避免遍历实时集合时同步修改集合，以及在循环中交替执行会影响布局的写操作和读取几何信息的操作。

# 底层机制

浏览器会按照标记化和树构建规则生成节点，并对不合法结构执行确定的错误恢复，因此源码中的标签关系不一定与最终节点树完全一致。元素、文本、注释、文档和文档片段都是不同类型的节点。children 只包含直接元素子节点，通常返回实时的 `