如何使用JavaScript确定哪个DOM元素是第一个

Question

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

两个元素可以是完全随机的，可以是兄弟节点，也可以是一个元素的祖先或后代。因此解决方案应该是一个函数，接受 2 个随机的 DOM 元素，并检查哪个在 DOM 层次结构中是第一个。

- Karol

---

你能展示一下你的HTML代码以及你尝试过的内容吗？ - Rayon

@RayonDabre 这个问题对我来说非常明确。 - Maximillian Laumeister

@Karol 使用索引 https://api.jquery.com/index/ - Frebin Francis

@FrebinFrancis 在处理兄弟元素时表现良好。当我将一个集合设置为body元素，并在两个元素上运行index()方法时，它们都返回 -1，因为它根本不知道这些元素的存在。我需要使用$('*')来作为集合，但这样做效率就会降低。 - Karol

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>

- adeneo