如何決定哪個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>