javascript - 检测 DOM 元素顺序的变化

Question

我有以下代码:

<div>
  <span>Random text</span> 
  <span style="color: red">Random text</span>
</div>

并且，使用代码，我有 50% 的机会更改 div 中元素的顺序。

$(document).ready(function() {
  var initial = $("div"); //This might not be ok

  if (new Date() % 2) //50% chance to randomize order 
    randomizeOrder();

  var after = $("div"); //Also this might not be ok
  //Detect if the order of spans changed
  if (after != initial) //Definitely won't work
    console.log("Order changed");
})

function randomizeOrder() {
  var lastElement = $("div span").last();
  $(lastElement).insertBefore($("div span").first());
}

这个例子过于简单化了。订购是由用户使用第三方库完成的，它不会告诉我订单是否真的改变了，只告诉我它何时开始和结束。

如何检测 DOM 元素的顺序是否真的改变了？我在其中的信息无法使用，因为它可能与示例中的信息完全相同。

Fiddle

Answer 1

如果你想检查 DOM 中的变化，你可以使用 MutationObserver:

$(document).ready(function() {
  var initial = $("div"); //This might not be ok

  if (new Date() % 2) {
    randomizeOrder();
  }
  
});

function randomizeOrder() {
  var lastElement = $("div span").last();
  $(lastElement).insertBefore($("div span").first());
}

var target = document.getElementById('id1');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  var changed = false;
  mutations.forEach(function(mutation) {
    // You can check the actual changes here
  });
  console.log('Dom Changed');
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1">
  <span>Random text</span> 
  <span style="color: red">Random text</span>
</div>

MutationObserver 使您能够检查特定元素中的 DOM 更改，而无需对更改 DOM 的代码提出任何要求。