如何确定哪个DOM元素首先使用JavaScript

Question

首先,我的意思是HTML中的一个元素的开始标记早于第二个元素的开始标记.

2个元素可以是完全随机的,可以是兄弟姐妹,或者可以是另一个元素的上升或后代.所以解决方案应该是一个带有2个随机DOM元素的函数,并检查哪个是DOM层次结构中的第一个.

Answer 1

你可以Node.compareDocumentPosition()用来做那件事

var node1  = document.getElementById('test1');
var node2  = document.getElementById('test2');

if ( node1.compareDocumentPosition(node2) & Node.DOCUMENT_POSITION_FOLLOWING ) {
    // node 1 comes before node2
} else {
    // node 2 comes before node1
}

<div id="test1"></div>
<div id="test2"></div>

它返回位掩码值,告诉您第一个节点相对于第二个节点的位置

1  = DOCUMENT_POSITION_DISCONNECTED
2  = DOCUMENT_POSITION_PRECEDING
4  = DOCUMENT_POSITION_FOLLOWING
8  = DOCUMENT_POSITION_CONTAINS
16 = DOCUMENT_POSITION_CONTAINED_BY
32 = DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC

可以在jQuery中使用类似的东西index(),但它不会那么高效

$.fn.comesBefore = function(elem) {
    var all = $('*');
    return all.index(this) < all.index($(elem));
}



var node1 = $('#test1');
var node2 = $('#test2');

var result = node1.comesBefore(node2); // false, node1 comes after node2

document.body.innerHTML = result;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div id="test2"></div>
</div>
<div id="test1"></div>