在从 DOM 修改/删除后恢复节点/元素答案

【问题标题】：Restore Node/Element after it has been modified/removed from DOM在从 DOM 修改/删除后恢复节点/元素
【发布时间】：2015-10-16 07:19:36
【问题描述】：

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

每次 MutationObserver 在第一次运行后被触发但浏览器崩溃时，我都尝试“备份”主体节点并将 body.innerHTML 设置为其原始状态。

有没有什么快速的方法可以恢复被修改或删除的元素？

【问题讨论】：

如果移除了 DOM 元素，您将无法恢复它。您唯一能做的就是将其存储在变量中，然后从变量中检索 DOM 元素。但是一旦删除，它就消失了。
防止它们被删除不是更容易吗？
那么，我将如何防止它们被删除或修改？我需要这个的原因是为了防止通过浏览器的开发工具进行修改。

标签： javascript jquery dom mutation-observers mutation

【解决方案1】：

这就是我所能提供的（有点老套，但它有效）。点击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('*');），那么我认为从性能的角度来看它会变得非常沉重。

【讨论】：

【解决方案2】：

问题是记录被移除的节点。

在我的例子中，我为文档中的每个节点生成一个 xpath。当childList触发时，再次生成。

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

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

希望能帮到你。

【讨论】：