Ordering DOM elements

Question

Given two DOM elements, say a and b, how can we determine which comes first in the document?

I'm implementing drag and drop for a set of elements. And the elements can be selected in any order, but when they are dragged, these elements need to be moved in the "correct" order.

Answer 1

I think the easiest way is to give them both something common that can be easily looked up. For instance, if they both have the same name attribute, you can use getElementsByName, which will return a collection of the elements in the order they appear in the document:

var els = document.getElementsByName("myName");

Here els[0] would contain the first element of the document, els[1] would contain the second.

Using selectors, you could achieve the same thing by using the combining , selector separator:

var els = document.querySelectorAll("#el1, #el2");

The only downside is that querySelectorAll() is only supported by newer browsers (so IE6/7 are ruled out). The alternative is to use a framework like jQuery:

var els = $("#el1, #el2");

Answer 2

Your logical method is extremely inefficient. You are attempting to count every node in the DOM tree and then find the position of two of those nodes and make a determination of their position relative to each other.

It would be far more efficient to determine the position of a node relative to a parent or grandparent node and then use that relationship as your basis of comparison instead of a simple count.

Answer 3

What you're looking for is compareDocumentPosition. PPK has browser compatibility details and John Resig has a version for IE.