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();
}

但这并没有真正起作用。我的猜测是＆＃34; newNode＆＃34;实际上并不是对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>

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

1 个答案: