找出节点在DOM树中的位置？

Question

我需要找出两个任意DOM节点出现的顺序。 现在，在开始编写自定义遍历代码之前，我想知道是否有任何简单的跨浏览器方法可以找到DOM节点的（可比较）位置。

例如

<div> <!-- pos. 1 -->
  <p> <!-- pos. 2 -->
    <span>foo</span> <!-- pos. 3 -->
    <span>bar</span> <!-- pos. 4 -->
  </p>
  <p> <!-- pos. 5 -->
    <span>foo</span> <!-- pos. 6 -->
    <span>bar</span> <!-- pos. 7 -->
  </p>
</div>

Answer 1

您尝试过Node.compareDocumentPosition()吗？它返回一个表示调用节点与作为参数传递的节点的关系的位掩码。之所以是位掩码，是因为它可能代表了多种可能的关系。

在这种情况下，您可以利用Node.DOCUMENT_POSITION_FOLLOWING确定两个节点的显示顺序（此代码段的结果将在呈现页面输出下方的控制台中）：

const foo1 = document.getElementById("foo1");
const foo2 = document.getElementById("foo2");

if (foo1.compareDocumentPosition(foo2) & Node.DOCUMENT_POSITION_FOLLOWING) {
  console.log("foo2 follows foo1");
} else {
  console.log("foo2 precedes foo1");
}

<div>
  <p>
    <span id="foo1">foo</span>
    <span>bar</span>
  </p>
  <p>
    <span id="foo2">foo</span>
    <span>bar</span>
  </p>
</div>

据caniuse报道，它得到了广泛的支持：