compareDocumentPosition 返回位掩码，用于判断节点相对位置：a.compareDocumentPosition(b) 描述 b 相对于 a 的关系；需用位运算检测标志位，如 pos & Node.DOCUMENT_POSITION_PRECEDING 表示 b 在 a 前，pos & Node.DOCUMENT_POSITION_FOLLOWING 表示 b 在 a 后，返回 0 表示同一节点，1 表示跨文档。
用 compareDocumentPosition 精准判断两个 DOM 节点的相对位置，关键不是看返回值是否等于某个数字，而是用位运算检查对应标志位是否被置起。它返回的是位掩码（bitmask），不是枚举值。
理解调用逻辑和返回语义
调用形式是 a.compareDocumentPosition(b)，返回值描述的是 b 相对于 a 的位置关系，这点极易记反。例如：
-
pos & Node.DOCUMENT_POSITION_PRECEDING→ b 在 a 前面（即 a 在 b 后面） -
pos & Node.DOCUMENT_POSITION_FOLLOWING→ b 在 a 后面（即 a 在 b 前面） -
pos & Node.DOCUMENT_POSITION_CONTAINS→ b 包含 a（即 a 是 b 的后代） -
pos & Node.DOCUMENT_POSITION_CONTAINED_BY→ b 被 a 包含（即 a 是 b 的祖先） - 返回
0表示a === b（同一节点） - 返回
1表示跨文档或脱离文档（a.ownerDocument !== b.ownerDocument）
区分“文档顺序”和“包含关系”
实际业务中，常要判断“谁在 HTML 源码里先出现”，也就是线性文档流顺序，而非结构上的父子关系。但父子关系会干扰这个判断：
- 父元素调用
parent.compareDocumentPosition(child)返回20（即4 | 16），表示 child 在 parent 之后（PRECEDING位没起，FOLLOWING位起了？不对——注意：返回值描述的是 child 相对于 parent 的位置，所以4表示 child 在 parent 之前？错！再核对：Node.DOCUMENT_POSITION_PRECEDING = 2，DOCUMENT_POSITION_FOLLOWING = 4；返回 20 = 4 + 16，即 child 在 parent 之后（FOLLOWING），且 parent 包含 child（CONTAINS）） - 因此，若只关心“谁更靠前”，应优先检测
FOLLOWING和PRECEDING，再排除包含干扰：比如要确认 a 真正在 b 文档顺序之前，需同时满足：
✓pos & Node.DOCUMENT_POSITION_PRECEDING
✗pos & (Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_CONTAINED_BY)
实用判断函数写法
多数场景下，你不需要写得过于严谨，但以下两种写法覆盖常见需求：
-
简单文档前后判断（推荐多数情况）：
function isBefore(a, b) {<br> const pos = a.compareDocumentPosition(b);<br> return !!(pos & Node.DOCUMENT_POSITION_PRECEDING);<br>}
注意：这里判断的是a是否在b之前，所以看的是b相对于a是否为PRECEDING→ 即b在a前 → 所以a实际在b后？等等，纠正：如果pos & PRECEDING为真，说明b在a之前，那么a就在b之后。所以真正表示“a 在 b 之前”的条件是：pos & Node.DOCUMENT_POSITION_FOLLOWING（因为 b 在 a 之后 ⇒ a 在 b 之前） -
严格线性顺序（排除父子干扰）：
function isBeforeStrict(a, b) {<br> const pos = a.compareDocumentPosition(b);<br> return (pos & Node.DOCUMENT_POSITION_FOLLOWING) &&<br> !(pos & (Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_CONTAINED_BY));<br>}
这确保 a 确实在 b 的文档流中更早出现，且二者无直接嵌套关系。
常见踩坑提醒
这些错误在真实项目中高频出现：
- 用
===直接比对返回值（如pos === 4），漏掉复合状态（如20、36也含FOLLOWING） - 混淆主谓关系：误以为
a.compareDocumentPosition(b) === 4表示 “a 在 b 之后”，实际是 “b 在 a 之后” ⇒ 即 “a 在 b 之前” - 在富文本编辑器中直接拿
Range对象去调用该方法 —— 它只接受Node，不支持Range或Selection，必须先提取startContainer等节点 - 对属性节点（
Attr）调用时返回32（IMPLEMENTATION_SPECIFIC），此时比较结果与 HTML 属性声明顺序相关，不可用于布局或渲染逻辑
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
