Узнать положение узла в дереве DOM?

Question

Мне нужно выяснить, в каком порядке появляются два произвольных узла DOM. Теперь, прежде чем я начну писать собственный код обхода, мне было интересно, есть ли какой-нибудь простой и кроссбраузерный способ узнать (сопоставимое) местоположение узла DOM.

* 1003 Е.Г. *

<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 :