Question

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

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

Answer 1

您可以使用Node.compareDocumentPosition()来执行此操作

＆＃13;

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
}

＆＃13;

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

＆＃13;

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

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中做类似的事情，但它几乎没有效率

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: