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

Question

首先，我的意思是一个元素的开始标记在 HTML 中比第二个元素的开始标记早。

2 个元素可以是完全随机的，可以是 sibling ，或者一个可以是另一个的祖先或后代。所以解决方案应该是一个函数，它接受 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

可以使用 index() 在 jQuery 中做类似的事情，但它不会那么高效

$.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>