從 DOM 中修改/刪除后恢復節點/元素

Question

我需要一種方法來檢測是否有任何 DOM 節點/元素已被刪除或修改，並立即將該元素恢復到之前的狀態。

每次在第一次運行后觸發 MutationObserver 時，我都嘗試“備份”body 節點並將 body.innerHTML 設置為其原始狀態，但這會導致瀏覽器崩潰。

有沒有什么快速的方法可以恢復被修改或刪除的元素？

Answer 1

這就是我所能帶來的（有點hacky，但它有效）。 單擊test或test #2以刪除節點： http : //codepen.io/zvona/pen/BowXaN?editors=001

HTML：

<div class='preserve'>
  <h1>There can be anything inside this</h1>
  <p>Some content</p>
</div>

<div class='preserve'>
  <p>Some more content</p>
</div>

JS：

var preserved = document.querySelectorAll('.preserve');
var config = { attributes: true, childList: true, characterData: true };

var createFragment = function(elem, i) {
  var frag = document.createElement('div');
  var id = 'id-'+ new Date().getTime() +'-'+ i;
  frag.setAttribute('id', id);
  elem.parentNode.insertBefore(frag, elem);
  elem.dataset.frag = id;
  observer.observe(elem.parentNode, config);
}

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (!mutation.addedNodes.length && mutation.removedNodes.length) {
      Array.prototype.forEach.call(mutation.removedNodes, function(elem) {
        var frag = document.querySelector('#'+ elem.dataset.frag);
        frag.parentNode.replaceChild(elem, frag);
        createFragment(elem, frag.id.split('-')[2]);
      });
    }
  });
});

Array.prototype.forEach.call(preserved, function(preserve, i) {
  createFragment(preserve, i);
});

如果您想保留所有節點（又名document.querySelectorAll('*'); ），那么我認為從性能的角度來看它變得非常繁重。

Answer 2

問題是記錄刪除的節點。

就我而言，我為文檔中的每個節點生成一個 xpath。 當childList觸發時，再次生成。

這樣我就可以知道刪除節點的xpath，並且可以使用xpath來恢復節點。

mutation.removedNodes.map((node) => {
  const xpath = node.xpath // which is generated each time `childList` triggered
})

希望能幫到你。