Question

考虑包含多个元素的网页。在MutationObserver上定义body将触发DOM中每次更改的回调。

在以下示例中：

<body>
  <div>[some content...]</div>
  <div>[some content...]</div>
  <div id='special'>[]</div>

  <script>
    function onMutation(objects, instance) { ... }

    const body = document.querySelectorAll("body")[0];
    const special = document.getElementById("special");
    //MutationObserverInit options
    const moi = { childList: true, attributes: true, subtree: true };
    //create a new mutation observer
    const mo = new MutationObserver(onMutation);
    //start observing
    mo.observe(body, moi);
  </script>
</body>

即使onMutation元素发生更改，也会调用#special函数。但是，在特定情况下，例如许多动态内容经常变化，浏览器的速度不明，观察#special元素会对性能产生严重影响。无论这样做的原因如何，可能需要忽略特定元素的特定突变。

如何（有效地）从观察到的节点列表中“排除”特定元素（或更多）？在上面的示例中，除#special元素外，必须遵守页面中的所有元素。通过使用不同选项调用同一元素上的observe函数，可以覆盖特定元素的行为，但在子元素observe上调用#special时，此方法不起作用。 }）已经指定了观察的元素（body）。

我目前看到以下方法，每个方法都有各自的问题/缺点：

选择页面中除#special之外的所有元素，然后单独观察 =＆gt;当页面中有许多其他元素和/或布局结构复杂（元素层次结构）导致复杂的选择器时不切实际
过滤回调中的元素 =＆gt;虽然可以检查回调内部是否应该执行逻辑，但仍然会调用回调（可能很多）不需要的元素。

如何从观察中排除特定元素

0 个答案: