javascript-检测给定元素已从DOM中删除而不会影响性能

我有这些：

const element = this.getElementById("victim")

function releaseKraken(targetElement) {}

我希望从DOM中删除元素时调用该函数.

我可以想象这样的事情：

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

我知道我需要MutationObserver,但是我发现的所有文档都集中在观察给定元素的孩子,而我需要观察元素本身.

UPD：问题How to detect element being added/removed from dom element?

的重点是看给定父母的孩子.我不想看孩子或父母.我想从DOM中删除给定元素时收到通知.不是孩子.而且我不想在给定元素的父对象上设置观察者(除非这是唯一的选择),因为这会影响性能.

UPD2：如果我在文档上设置MutationObserver,这将导致每个会话触发回调数千次甚至数百万次,并且每次回调将不得不过滤大量已删除元素以查看其是否包含一个问题.那太疯狂了.

我需要像上面显示的简单的东西.我希望回调仅被触发一次：给定元素被删除时.

解决方法:

如您所说,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));

如果您正在做的只是观看单个元素,则此方法应该足够快.尽管看起来像是一个不错的循环,但是removeNodes可能不止一个节点是非常罕见的,除非有东西一次全部删除大量兄弟姐妹,否则变异也将非常小.

您也可以考虑做

callback(el);

这会让你做

onRemove(element, releaseKraken);