Find out position of node in DOM tree? - dom

Question

I need to find out in which order two arbitrary DOM nodes appear.
Now before I start to write custom traversal code, I was wondering if there is any simple and cross browser way to find out a (comparable) location of a DOM node.
E.g.
<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

Have you tried Node.compareDocumentPosition()? It returns a bitmask representing the calling node's relationship to the node passed as an argument. The reason it's a bitmask is because it may represent more than one of the possible relationships.
In this case, you can utilize Node.DOCUMENT_POSITION_FOLLOWING to determine the order in which two nodes appear (the result of this snippet will be in the console below the rendered page output):
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>
It's widely supported, as reported by caniuse: