5

我需要使用 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 更改。有没有办法在不每次检查整个文档的情况下实现我想要的？

4

1 回答 1

5

我不清楚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>

于 2015-01-08T16:07:03.780 回答