如何在不将元素替换为其克隆的情况下断开匿名 MutationObserver 与文档元素的连接？

Question

在制作一个应该更改多个文档元素属性的 tampermonkey 脚本时，我遇到了一个使用事件侦听器来防止对该属性进行任何更改的站点。为了应对这种行为，我可以用它们的克隆替换元素，如下所示：

const map = new Map();

function read() {
    for (let image of [...document.getElementsByTagName('img')]) {
        const clone = image.cloneNode(/* with children */true);
        // TODO: modify the clone
        map.set(image, clone);
    }
}

read();

function write() {
    for (let [image, clone] of map) {
        image.parentNode.replaceChild(clone, image);
    }
}

write();

map.clear();

但是这个方法有一个问题：浏览器（Chrome71）在运行结束时会重新计算样式，如果元素数量很大（10个元素 - 没有抖动，100个）有时会抖动布局元素 - 垃圾）。我尝试使用请求的动画帧修改写入函数中的循环：

window.requestAnimationFrame(document.replaceChild.bind(image.parentNode, clone, image));

但它仍然会影响布局。试图在循环中插入暂停：

async function write() {
  for (let [image, clone] of map) {
    await new Promise(window.requestAnimationFrame);
    image.parentNode.replaceChild(clone, image);
  }
}

没有变化。尝试将元素数组分成小块并操作每个块，但浏览器最终仍然懒惰地重新计算样式并扰乱布局。因此，我可以使用以下内容删除每个事件侦听器，而不是用它的克隆替换每个元素：

for (let image of [...document.getElementsByTagName('img')]) {
  const listeners = getEventListeners(image);
  for (let event_type in listeners) {
    for (let event of listeners[event_type]) {
      image.removeEventListener(event.type, event.listener, event.useCapture);
    }
  }
}

虽然这解决了问题，但仍然存在问题：如果站点不使用事件侦听器，而是使用 MutationObserver 来防止修改文档元素怎么办？有没有办法删除 MutationObserver 而不用其克隆替换文档元素？

虽然我知道修改很多元素的属性仍然会强制浏览器重排，但我的问题仍然存在。

Answer 1

无法断开匿名 MutationObserver 的连接，但这并不意味着没有其他解决方案。

我相信您不需要更改页面上的全部 link。
您只需要拦截 one link 用户将尝试关注的内容。

请参阅下面的代码段。

我们想要更改 href 属性并且它被观察者捕获：

// anonymous observer:
(new MutationObserver(function(mutationsList, observer) {
  for (var mutation of mutationsList) {
    if (
      mutation.type == 'attributes' &&
      mutation.target.href !== 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png'
    ) {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
      mutation.target.href = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png'
    }
  }
}))
.observe(
  document.querySelector('html'), {
    attributes: true,
    subtree: true
  }
);

document.querySelectorAll('a').forEach(function(a) {
  a.href = 'https://yastatic.net/www/_/x/Q/xk8YidkhGjIGOrFm_dL5781YA.svg';
});

<a href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">Google</a>

为避免这种情况，将事件侦听器设置为 link 并在 click 上更改 location.href（或打开新选项卡或 window）而不是更改 a.href:

// anonymous observer:
(new MutationObserver(function(mutationsList, observer) {
  for (var mutation of mutationsList) {
    if (
      mutation.type == 'attributes' &&
      mutation.target.href !== 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png'
    ) {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
      mutation.target.href = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png'
    }
  }
}))
.observe(
  document.querySelector('html'), {
    attributes: true,
    subtree: true
  }
);

document.querySelectorAll('a').forEach(function(a) {
  a.addEventListener('click', function(e) {
    e.preventDefault();
    location.href = 'https://yastatic.net/www/_/x/Q/xk8YidkhGjIGOrFm_dL5781YA.svg';
  });
});

<a href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">Google</a>

如何在不将元素替换为其克隆的情况下断开匿名 MutationObserver 与文档元素的连接？

How to disconnect anonymous MutationObserver from document element without replacing element with its clone?

javascript

mutation-observers