compareDocumentPosition()用于判断两个节点在DOM树中的相对位置关系，返回位掩码整数：4表示前者在后者前，2表示前者在后者后，8表示后者包含前者，16表示前者包含后者，可组合使用位运算解析。
compareDocumentPosition() 不是用来“做”什么动作的方法，它只是告诉你两个节点在文档树里的相对位置关系——返回一个数字，你得自己用位运算去解读。
怎么用 compareDocumentPosition 判断节点前后顺序
直接调用 nodeA.compareDocumentPosition(nodeB)，看返回值是否包含标志位 4（A 在 B 前）或 2（A 在 B 后）：
- 如果
result & 4为真 →nodeA在nodeB之前（按文档流顺序） - 如果
result & 2为真 →nodeA在nodeB之后 - 注意：
4和2不会同时为真；但可能同时为假（比如父子关系） - 别直接比
=== 4，因为返回值可能是组合值，如20（16 | 4）表示“包含且在前”
怎么判断 A 是否包含 B 或被 B 包含
关键看位标志 8 和 16：
-
result & 8→nodeB包含nodeA（即nodeA是nodeB的后代） -
result & 16→nodeA包含nodeB（即nodeB是nodeA的后代） - 常见误判：用
nodeA.contains(nodeB)只能判断单向包含，而compareDocumentPosition一次调用就能双向确认 - 父子、子元素、文本节点都算“包含”，哪怕中间隔着多层嵌套
为什么有时返回 34、10、20 这种奇怪数字
因为返回值是位掩码（bitmask），每个 bit 代表一种关系，可叠加：
立即学习“前端免费学习笔记（深入）”；
-
34 = 2 | 32→nodeA在nodeB之后（2），且两者是同一元素的两个属性（32） -
10 = 2 | 8→nodeA在nodeB之后（2），且nodeB包含nodeA（8）——这在实际 DOM 中不可能同时成立，说明节点取错了（比如取了 textNode 和 element 混用） -
20 = 4 | 16→ 最典型：父元素在子元素之前（4），且父元素包含子元素（16） - IE8 及更早版本不支持该方法，返回
undefined，必须先检测typeof node.compareDocumentPosition === 'function'
compareDocumentPosition 在真实场景中的坑
它看起来精确，但实际容易踩偏：
- 空白文本节点会影响结果：Firefox/Chrome 把换行和空格当
Text节点，IE 忽略——所以同一段 HTML，在不同浏览器里compareDocumentPosition可能返回4或2 - 不能跨 Shadow DOM：如果节点分属不同 shadow root，返回值恒为
1（不属于同一文档），即使视觉上挨得很近 - 对
DocumentFragment节点调用会报错或返回1，因为它尚未插入文档 - 别拿它替代
Node.compareDocumentPosition的 polyfill——原生方法不可模拟，尤其涉及文档顺序时
最常被忽略的一点：这个方法只反映当前时刻的 DOM 结构快照，不监听变化。一旦节点被移动、删除或重排，结果立刻失效，必须重新调用。
