html怎么做compareDocumentPosition_html compareDocumentPosition节点位置比较-html教程-PHP中文网

compareDocumentPosition()用于判断两个节点在DOM树中的相对位置关系，返回位掩码整数：4表示前者在后者前，2表示前者在后者后，8表示后者包含前者，16表示前者包含后者，可组合使用位运算解析。

html怎么做comparedocumentposition_html comparedocumentposition节点位置比较

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 代表一种关系，可叠加：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

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——原生方法不可模拟，尤其涉及文档顺序时