跨浏览器比较文档位置

Question

DOM4 compareDocumentPosition

我想实现compareDocumentPosition。Resig在这方面已经开了个好头。我把他的代码整理了一下

function compareDocumentPosition(other) {
    var ret = 0;
    if (this.contains) {
        if (this !== other && this.contains(other)) {
            ret += 16;
        }
        if (this !== other && other.contains(this)) {
            ret += 8;
        }
        if (this.sourceIndex >= 0 && other.sourceIndex >= 0) {
            if (this.sourceIndex < other.sourceIndex) {
                ret += 4;
            }
            if (this.sourceIndex > other.sourceIndex) {
                ret += 2;
            }
        } else {
            ret += 1;
        }
    } 
    return ret;
}

这适用于Element，但不适用于Text或DocumentFragment。这是因为IE8在这些节点上不提供.sourceIndex。(它没有给.contains，但我已经解决了这个问题)

如何有效地写入对应于DOCUMENT_POSITION_FOLLOWING和document_position_前款的+=4和+=2位?

对于额外的引用，这两个是按树序定义的，DOM4定义为

如果A和B在同一棵树中，并且A按树的顺序在B之前，则对象A位于对象B之前。

如果A和B在同一棵树中，并且A按树的顺序在B之后，则对象A在对象B之后。

树顺序为预先排序，深度优先遍历。

大多数现代浏览器都实现了这个功能(包括IE9)。所以你只需要在IE8中工作的东西(我不关心IE6/7，但如果它工作得很棒!)

Answer 1

function recursivelyWalk(nodes, cb) {
    for (var i = 0, len = nodes.length; i < len; i++) {
        var node = nodes[i];
        var ret = cb(node);
        if (ret) {
            return ret;
        }
        if (node.childNodes && node.childNodes.length) {
            var ret = recursivelyWalk(node.childNodes, cb);
            if (ret) {
                return ret;
            }
        }
    }
}
function testNodeForComparePosition(node, other) {
    if (node === other) {
        return true;
    }
}
function compareDocumentPosition(other) {
    function identifyWhichIsFirst(node) {
        if (node === other) {
            return "other";
        } else if (node === reference) {
            return "reference";
        }
    }
    var reference = this,
        referenceTop = this,
        otherTop = other;
    if (this === other) {
        return 0;
    }
    while (referenceTop.parentNode) {
        referenceTop = referenceTop.parentNode;
    }
    while (otherTop.parentNode) {
        otherTop = otherTop.parentNode;
    }
    if (referenceTop !== otherTop) {
        return Node.DOCUMENT_POSITION_DISCONNECTED;
    }
    var children = reference.childNodes;
    var ret = recursivelyWalk(
        children,
        testNodeForComparePosition.bind(null, other)
    );
    if (ret) {
        return Node.DOCUMENT_POSITION_CONTAINED_BY +
            Node.DOCUMENT_POSITION_FOLLOWING;
    }
    var children = other.childNodes;
    var ret = recursivelyWalk(
        children, 
        testNodeForComparePosition.bind(null, reference)
    );
    if (ret) {
        return Node.DOCUMENT_POSITION_CONTAINS +
            Node.DOCUMENT_POSITION_PRECEDING;
    }
    var ret = recursivelyWalk(
        [referenceTop],
        identifyWhichIsFirst
    );
    if (ret === "other") {
        return Node.DOCUMENT_POSITION_PRECEDING;
    } else {
        return Node.DOCUMENT_POSITION_FOLLOWING;
    }
}

我自己写的。我认为这个实现有bug，但它是我其他代码中的bug。

Answer 2

来自Raynos的答案是一个顶级的开始，但不能在盒子外运行。Node.*无法找到，.bind在IE8中不可用。

下面是准备在ie8中使用的代码:

function recursivelyWalk(nodes, cb) {
    for (var i = 0, len = nodes.length; i < len; i++) {
        var node = nodes[i];
        var ret = cb(node);
        if (ret) {
            return ret;
        }
        if (node.childNodes && node.childNodes.length) {
            var ret = recursivelyWalk(node.childNodes, cb);
            if (ret) {
                return ret;
            }
        }
    }
}
function testNodeForComparePosition(node, other) {
    if (node === other) {
        return true;
    }
}
var DOCUMENT_POSITION_DISCONNECTED = 1;
var DOCUMENT_POSITION_PRECEDING = 2;
var DOCUMENT_POSITION_FOLLOWING = 4;
var DOCUMENT_POSITION_CONTAINS = 8;
var DOCUMENT_POSITION_CONTAINED_BY = 16;
function compareDocumentPosition(thisNode, other) {
    function identifyWhichIsFirst(node) {
        if (node === other) {
            return "other";
        } else if (node === reference) {
            return "reference";
        }
    }
    var reference = thisNode,
        referenceTop = thisNode,
        otherTop = other;
    if (this === other) {
        return 0;
    }
    while (referenceTop.parentNode) {
        referenceTop = referenceTop.parentNode;
    }
    while (otherTop.parentNode) {
        otherTop = otherTop.parentNode;
    }
    if (referenceTop !== otherTop) {
        return DOCUMENT_POSITION_DISCONNECTED;
    }
    var children = reference.childNodes;
    var ret = recursivelyWalk(
        children,
        function(p) {
            (function() {
                var localOther = other;
                return testNodeForComparePosition(localOther, p);
            })();
        }
    );
    if (ret) {
        return DOCUMENT_POSITION_CONTAINED_BY +
            DOCUMENT_POSITION_FOLLOWING;
    }
    var children = other.childNodes;
    var ret = recursivelyWalk(
        children,
        function(p) {
            (function() {
                var localOther = reference;
                return testNodeForComparePosition(localOther, p);
            })();
        }
    );
    if (ret) {
        return DOCUMENT_POSITION_CONTAINS +
            DOCUMENT_POSITION_PRECEDING;
    }
    var ret = recursivelyWalk(
        [referenceTop],
        identifyWhichIsFirst
    );
    if (ret === "other") {
        return DOCUMENT_POSITION_PRECEDING;
    } else {
        return DOCUMENT_POSITION_FOLLOWING;
    }
}

你这样称呼它:

compareDocumentPosition(sourceElement, elementToTest)

(就像调用sourceElement.compareDocumentPosition(elementToTest))