javascript 中判断 dom 节点相对位置应优先使用 comparedocumentposition 方法，通过位运算提取 preceding（&2）、following（&4）等标志，同时排除 contains（&8）和 contained_by（&16）干扰，并校验同文档及挂载状态，辅以 contains() 快速判断后代关系。
JavaScript 中判断两个 DOM 节点的相对位置，核心是用 compareDocumentPosition 方法，它能一次性给出完整关系（前后、包含、断开等），比手动遍历祖先或兄弟节点更准确、高效。
用 compareDocumentPosition 判断文档顺序（谁在前谁在后）
调用 nodeA.compareDocumentPosition(nodeB) 返回一个数字，需用位运算提取含义：
-
检查是否 nodeA 在 nodeB 前面：用
& 2（即& Node.DOCUMENT_POSITION_PRECEDING），结果非零表示 nodeA 文档顺序靠前； -
检查是否 nodeA 在 nodeB 后面：用
& 4（即& Node.DOCUMENT_POSITION_FOLLOWING），结果非零表示靠后； -
注意排除包含干扰：父元素既 precedes 又 contains 子元素，若只想知道纯“线性顺序”（不考虑嵌套），应先排除
& 8（CONTAINS）和& 16（CONTAINED_BY）为真时的情况； - 返回值为
0表示两节点相同；返回值含& 1表示节点断开（如跨 iframe、未挂载 DOM 树）。
用 contains 快速判断是否为后代关系
如果只关心“nodeA 是否包含 nodeB（含自身）”，可用原生 contains()：
-
nodeA.contains(nodeB)返回 true 当且仅当 nodeB 是 nodeA 的后代，或 nodeA === nodeB； - 兼容性好（现代浏览器及 IE9+），但 Firefox 早期版本不支持，且无法区分“前/后”顺序；
- 适合做前置校验：若
nodeA.contains(nodeB)为 true，就无需再用compareDocumentPosition判断前后——因为包含关系已隐含结构层级，不参与线性文档顺序比较。
处理未挂载或跨文档节点的边界情况
未插入 DOM 树的节点、iframe 内外节点、影子根（Shadow DOM）中的节点，compareDocumentPosition 可能返回不可靠值（如 Chrome 返回 33，Firefox 返回 37）：
- 务必先确认两个节点都属于同一
document：可比对nodeA.ownerDocument === nodeB.ownerDocument； - 若节点尚未挂载（
nodeA.parentNode === null且不在document.body子树中），compareDocumentPosition的 PRECEDING/FOLLOWING 位无意义，此时应视为“位置未定义”； - 对 Shadow DOM 场景，需确保节点处于同一影子树上下文，否则行为未标准化，建议降级使用
getRootNode()辅助判断归属。
封装一个安全的位置比较函数
结合上述要点，可封装出健壮的比较工具：
- 先判等：
if (a === b) return 'same'; - 再判同文档：
if (a.ownerDocument !== b.ownerDocument) return 'disconnected'; - 再用
compareDocumentPosition提取关系，优先识别 CONTAINS / CONTAINED_BY，再看 PRECEDING / FOLLOWING； - 返回语义化字符串如
'preceding'、'following'、'contains'、'contained-by'、'disconnected'等，便于业务逻辑消费。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
