javascript - 在不牺牲性能的情况下检测给定元素是否已从 DOM 中移除

Question

我有这些:

const element = this.getElementById("victim")

function releaseKraken(targetElement) {}

我希望当 element 从 DOM 中移除时调用该函数。

我可以想象这样的事情:

element.onRemove(() => releaseKraken(element))

我知道我需要 MutationObserver，但我找到的所有文档都集中在观察给定元素的子元素，而我需要观察元素本身。

UPD:问题How to detect element being added/removed from dom element? 专注于观察给定 parent 的 child 。我不想看 child 或 parent 。当从 DOM 中删除给定元素时，我想收到通知。不是 child 。而且我不想在给定元素的父级上设置观察器(除非这是唯一的选择)，因为这会影响性能。

UPD2:如果我在 document 上设置一个 MutationObserver，这将导致回调在每个 session 中被触发数千甚至数百万次，并且每次回调将不得不过滤大量已删除元素的列表，以查看它是否包含有问题的元素。这太疯狂了。

我需要像上面展示的那样简单的东西。我希望回调只被触发一次:当给定元素被删除时。

Answer 1

如您所说，MutationObserver 仅允许您检测元素的子元素何时被操作。这意味着您需要听取父级的意见并检查进行了哪些更改以查看目标元素是否已被删除。

function onRemove(element, callback) {
  const parent = element.parentNode;
  if (!parent) throw new Error("The node must already be attached");

  const obs = new MutationObserver(mutations => {
    for (const mutation of mutations) {
      for (const el of mutation.removedNodes) {
        if (el === element) {
          obs.disconnect();
          callback();
        }
      }
    }
  });
  obs.observe(parent, {
    childList: true,
  });
}

然后用你的例子代替

element.onRemove(() => releaseKraken(element));

你可以做到

onRemove(element, () => releaseKraken(element));

如果您所做的只是观察单个元素，这种方法应该非常快。虽然这看起来像是一个相当多的循环，但 removedNodes 很少有超过一个节点，除非有什么东西同时删除大量的兄弟节点，mutations 也会非常小。

你也可以考虑做

callback(el);

这会让你做

onRemove(element, releaseKraken);