Javascript 在节点/元素被修改/从DOM中删除后恢复该节点/元素
我需要一种方法来检测是否有任何DOM节点/元素被删除或修改,并立即将该元素恢复到以前的状态 我尝试“备份”body节点,并在第一次运行后每次启动MutationObserver时将body.innerHTML设置为其原始状态,但这会使浏览器崩溃Javascript 在节点/元素被修改/从DOM中删除后恢复该节点/元素,javascript,jquery,dom,mutation-observers,mutation,Javascript,Jquery,Dom,Mutation Observers,Mutation,我需要一种方法来检测是否有任何DOM节点/元素被删除或修改,并立即将该元素恢复到以前的状态 我尝试“备份”body节点,并在第一次运行后每次启动MutationObserver时将body.innerHTML设置为其原始状态,但这会使浏览器崩溃 有没有什么快速的方法来恢复被修改或删除的元素?这是我能提供的全部(有点粗糙,但它可以工作)。单击test或test#2删除节点: HTML: 如果您想保留所有节点(akadocument.querySelectorAll(“*”);),那么从性能的角度来
有没有什么快速的方法来恢复被修改或删除的元素?这是我能提供的全部(有点粗糙,但它可以工作)。单击
test
或test#2
删除节点:
HTML:
如果您想保留所有节点(aka
document.querySelectorAll(“*”);
),那么从性能的角度来看,它会变得非常沉重。问题是记录删除的节点
在我的例子中,我为文档中的每个节点生成一个xpath。当触发childList
时,再次生成
这样我就可以知道被删除节点的xpath,并可以使用xpath来恢复节点
mutation.removedNodes.map((节点)=>{
const xpath=node.xpath//每次触发'childList'时生成
})
希望对您有所帮助。如果删除DOM元素,则无法还原它。唯一可以做的就是将其存储在变量中,然后从变量中检索DOM元素。但一旦被删除,它就消失了。阻止它们被删除不是更容易吗?那么,我该如何防止它们被删除或修改呢?我之所以需要它,是为了防止通过浏览器的开发工具进行修改。
<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>
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);
});