Question

I’m looking for a way to find which of two objects is the closest relation to a third object in terms of the DOM Tree order, not the pixels.

The two objects requiring comparison could appear anywhere on the DOM, relative to the object I wish to compare them with.

Answer 1

Assuming that object is Node then you can always use

Absolute position

/*
     compare each node in nodes to target. The node that's closest to target
     will be returned. closest is defined as absolute x,y distance between 
     the top, left corner of two nodes
*/
function whichIsCloser(nodes, target) {
    var rect = target.getBoundingClientRect()

    return nodes.reduce(function (prev, current) {
        var prevRect = prev.getBoundingClientRect(),
            currentRect = current.getBoundingClientRect(),
            prevDistance = Math.sqrt(
                Math.pow(prevRect.left - rect.left, 2) + 
                Math.pow(prevRect.top - rect.top, 2)
            ),
            currentDistance = Math.sqrt(
                Math.pow(currentRect.left - rect.left, 2) +
                Math.pow(currentRect.top - rect.top, 2)
            )

        return prevDistance < currentDistance ? prev : current
    })
}

dom tree position

Using iterativelyWalk

/*
     compare nodes to target. The node that's closest to target will be returned
     closest is defined as getting an array of all nodes in tree order and 
     returning the node who's index offset in the array wrt the target
     is the smallest.
*/
function whichIsCloser(nodes, target) {
    var allNodes = []
    iterativelyWalk(document.documentElement.childNodes, function (node) {
        allNodes.push(node)
    })
    return nodes.reduce(function (prev, current) {
        var prevDistance = Math.abs(allNodes.indexOf(prev) - allNodes.indexOf(target)),
            currentDistance = Math.abs(allNodes.indexOf(current) - allNodes.indexOf(target))

        return prevDistance < currentDistance ? prev : current
    })
}