javascript – 从DOM修改/删除后恢复节点/元素

2023年3月31日 449次阅读

我需要一种方法来检测是否已删除或修改任何DOM节点/元素,并立即将该元素恢复到之前的状态.

我尝试“备份”正文节点,并在每次第一次运行后触发MutationObserver时将body.innerHTML设置为其原始状态但是会导致浏览器崩溃.

是否有任何快速方法来恢复已修改或删除的元素？

最佳答案 这就是我可以带来的(有点hacky,但它的工作原理).单击测试或测试#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(‘*’);),那么从性能的角度来看,我认为它变得非常沉重.

点赞