在节点/元素被修改/从DOM中删除后恢复节点/元素

Restore Node/Element after it has been modified/removed from DOM

本文关键字：元素 节点 删除 恢复 修改 DOM      更新时间：2023-09-26

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

我试图"备份"主体节点并设置主体。每次MutationObserver在第一次运行后被触发，innerHTML就会恢复到原来的状态，但是这会导致浏览器崩溃。

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

这是我所能想到的(有点粗糙，但它有效)。单击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('*');)，那么我认为从性能的角度来看，它变得非常沉重。

问题是记录被删除的节点

在我的示例中，我为文档中的每个节点生成xpath。触发childList时，重新生成

这样我就可以知道被删除节点的xpath，并且可以使用xpath来恢复该节点。

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

希望对你有所帮助

相关文章：