compareDocumentPosition 返回位掩码值，需用按位与判断节点关系：1=断开、2=前、4=后、8=包含、16=被包含；判断前后顺序应检查 PRECEDING/FOLLOWING 位并排除包含干扰。
用 compareDocumentPosition 判断两个 DOM 节点的相对位置，核心是理解它返回的位掩码值，并按位与（&）提取具体关系。它不直接返回“前/后”这样的字符串，而是返回一个数字，每一位代表一种可能的位置关系。
compareDocumentPosition 返回值的含义
调用 nodeA.compareDocumentPosition(nodeB) 返回一个整数，其二进制位表示 nodeA 相对于 nodeB 的多种关系（可同时成立）。常用位标志有：
-
1（0x01）：
DISCONNECTED—— 两节点不在同一文档或无共同祖先（如 iframe 内外） -
2（0x02）：
PRECEDING—— nodeA 在 nodeB 的前面（文档顺序中更早出现） -
4（0x04）：
FOLLOWING—— nodeA 在 nodeB 的后面（文档顺序中更晚出现） -
8（0x08）：
CONTAINS—— nodeA 包含 nodeB（即 nodeB 是 nodeA 的后代） -
16（0x10）：
CONTAINED_BY—— nodeA 被 nodeB 包含（即 nodeA 是 nodeB 的后代）
注意：PRECEDING 和 FOLLOWING 描述的是**文档顺序（source order）**，不是视觉位置或 CSS 布局顺序；它们互斥，但可能和包含关系共存（比如父元素既 precedes 又 contains 子元素）。
如何准确判断“谁在前、谁在后”
要明确回答“nodeA 是否在 nodeB 前面”，不能只看返回值是否为 2，而要检查 PRECEDING 位是否被置起，且排除包含关系干扰（因为包含本身不等于文档顺序前后）。
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
推荐写法：
function isBefore(a, b) {
const pos = a.compareDocumentPosition(b);
// 满足：a 在 b 前 + 不被 b 包含 + a 不包含 b（避免父子干扰）
return (pos & Node.DOCUMENT_POSITION_PRECEDING) !== 0 &&
(pos & Node.DOCUMENT_POSITION_FOLLOWING) === 0 &&
(pos & (Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_CONTAINED_BY)) === 0;
}
更实用的简化版（多数场景只需文档顺序）：
- 若
pos & Node.DOCUMENT_POSITION_PRECEDING→ a 在 b 文档顺序之前 - 若
pos & Node.DOCUMENT_POSITION_FOLLOWING→ a 在 b 文档顺序之后 - 若两者都为 0，再看是否包含（比如 a 是 b 父级，则 a 在前且包含 b）
常见误判场景与避坑提示
以下情况容易出错：
-
父子关系混同于前后顺序：父元素调用
compareDocumentPosition(子元素)返回8（CONTAINS），但它在文档中确实出现在子元素之前；此时PRECEDING位也常被置起（返回值可能是 10 = 2+8），所以需结合判断 -
文本节点参与比较：文本节点也属于节点，会参与文档顺序计算。例如
<div>hello<span>world</span></div>中，"hello" 文本节点 precedes<span> -
跨 shadow root 或 iframe：不同上下文的节点会返回
DISCONNECTED（1），此时无法定义前后关系
一个直观的判断工具函数
封装一个返回明确关系字符串的辅助函数：
function positionOf(a, b) {
const pos = a.compareDocumentPosition(b);
if (pos & Node.DOCUMENT_POSITION_DISCONNECTED) return 'disconnected';
if (pos & Node.DOCUMENT_POSITION_CONTAINS) return 'contains';
if (pos & Node.DOCUMENT_POSITION_CONTAINED_BY) return 'contained-by';
if (pos & Node.DOCUMENT_POSITION_PRECEDING) return 'preceding';
if (pos & Node.DOCUMENT_POSITION_FOLLOWING) return 'following';
return 'same';
}
调用 positionOf(p1, p2) 就能清晰知道 p1 相对于 p2 是 preceding、following 还是父子关系，避免手动查位运算。
