MutationObserver能否在突变之前做出改变？

Question

我需要使用mutationobserver来阻止DOM-Change。

我有（过去）以下代码来阻止特定的更改：

document.bind("DOMSubtreeModified", function() {
   document.find('.Xx.xJ:Contains("wham")').closest("[jsmodel='XNmfOc']").hide();
});

由于性能原因，我不想检查任何dom-change上的完整文档，只是添加了内容，所以我改为现在（现在）：

 var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            [].slice.call(mutation.addedNodes).forEach(function (addedNode) {
               StartFilter(addedNode);                    

            });
        });
    });

    observer.observe(document, {
        childList: true,
        subtree:true,
        characterData:true,
        attributes:true        
    });

function StartFilter(newNode) {
   $(newNode).find('.Xx.xJ:Contains("wham")').closest("[jsmodel='XNmfOc']").hide();
}

但这并没有真正起作用。 我的猜测是“newNode”实际上并不是对DOM-Element的引用。 （选择器有效， "$(newNode).find('.Xx.xJ:Contains("wham")').closest("[jsmodel='XNmfOc']")"返回一个元素“。

我没有找到任何方法/属性来拒绝MutationObserver中的dom-change。 有没有办法实现我想要的东西而不是每次检查整个文件？

Answer 1

我不清楚突变观察者返回的NodeList是否是“实时”的，因为该列表中节点的更改会立即反映在DOM上。 但这没关系，因为你只是用它来创建jQuery包装集。 您上面的基本代码按预期工作（请参阅下面的简化代码段），这意味着还有其他东西阻止您的hide()调用按预期工作。

我最好的理解是你无法拦截和阻止对DOM的更改 - MutationObserver在相关变异发生后被触发。 这意味着你不是在打断或拦截突变，而是对它做出反应。 在您的情况下，这可能会导致意外的“闪烁”行为，因为添加然后删除节点。 在这种情况下，更好的解决方案是默认情况下将新添加的节点设置为隐藏，然后添加类/样式以显示它们或从突变观察器过滤器中的DOM中删除它们。

 var container = document.querySelector('.container'); var addNodeButton = document.querySelector('#add'); var addNodeWithHideButton = document.querySelector('#addWithHide'); var makeAddNode = function(includeHide) { return function() { var p = document.createElement('p'); var s = document.createElement('span'); var msg = 'Appended at ' + new Date().getTime(); if (includeHide) { msg += ' (hide)'; } var t = document.createTextNode(msg); s.appendChild(t); p.appendChild(s); container.appendChild(p); console.log('appended::', p); }; }; var makeNode = makeAddNode(false); var makeNodeWithHidden = makeAddNode(true); addNodeButton.addEventListener('click', makeNode); addNodeWithHideButton.addEventListener('click', makeNodeWithHidden); var toArray = function() { return [].slice.call(arguments); }; var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { toArray(mutation.addedNodes).forEach(function (addedNode) { StartFilter(addedNode); }); }); }); observer.observe(document, { childList: true, subtree:true, characterData:true, attributes:true }); function StartFilter(newNode) { var $n = $(newNode); console.log('$n::', $n); $n.find('span:contains(hide)').fadeOut(1500); // $(newNode).find('.Xx.xJ:Contains("wham")').closest("[jsmodel='XNmfOc']").hide(); } 

 .container { width: 80%; border: 1px solid green; padding: 1rem; margin: 1rem auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="add">Add node without "hide"</button> <button id="addWithHide">Add node with "hide"</button> <div class="container"></div>