使用 MutationObserver 时，DOM 中似乎不存在 ChildNode

Question

我正在尝试使用 MutationObserver 来观察 DOM 中的变化，但似乎我无法访问“大”子节点。我已经使用 subtree 和 childList 值配置了观察者。据我了解，使用 MutationObserver 不可能获取添加的 childList 或更改的整个 DOM 树，它所做的只是观察更改。相反，您应该使用 getElementById。

我尝试在观察到更改后使用 getElementById 在 DOM 中查找相关的“父”节点，然后抓取所有子节点。尽管我仍然没有得到子节点的命中。

我假设“父”节点首先插入到 DOM 上，然后将子节点插入到“父”节点上，尽管由于某种原因这些事件不会在观察者中触发。

我怀疑我可能需要在观察变化时更新 MutationObserver 的目标，然后不断使用 getElementById 并爬取这些节点。

知道为什么这些子节点不可观察，和/或如何解决这个问题吗？

此致。

MutationObserver 的代码

function createObserver() {
    const documentBody = document.body;

    // callback function to execute when mutations are observed
    const observer = new MutationObserver(mutationRecords => {
        let addedNodes = []

        for (const mut of mutationRecords) {

            let arr = Array.prototype.slice.call(mut.addedNodes)
            arr = arr.filter(node => popupTagNames.includes(node.tagName)); // Keep only selected tags

            if (arr.length == 0) return; // don't keep empty

            addedNodes = addedNodes.concat(arr)

            let el = document.getElementById(addedNodes[0].id);

            // Crawler
            inspectNode(el)
        }


    })

    const config = { attributes: true, childList: true, subtree: true, characterData: true }
    observer.observe(documentBody, config)
}

Answer 1

让我们通过记录属于 #qc-cmp2-container 元素的添加节点来进行调查：

new MutationObserver(mutations => {
  const parent = document.getElementById('qc-cmp2-container');
  if (parent) console.log(...mutations.flatMap(m =>
    [...m.addedNodes].filter(n => parent.contains(n)).map(n => n.cloneNode(true))));
}).observe(document, {subtree: true, childList: true});

我们将看到几个单独的调用：

1. 主 #qc-cmp2-container 及其空子元素
2. 包含许多子元素和文本的内部 div
3. 两个添加额外的内部元素

最节省资源的解决方案是使用超快速 getElementById 检查等待父级，然后切换到观察父级：

function waitForId(id, callback) {
  let el = document.getElementById(id);
  if (el) {
    callback(el);
  } else {
    new MutationObserver((mutations, observer) => {
      el = document.getElementById(id);
      if (el) {
        observer.disconnect();
        callback(el);
      }
    }).observe(document, { subtree: true, childList: true });
  }
}

waitForId('qc-cmp2-container', parent => {
  new MutationObserver((mutations, observer) => {
    // do something
  }).observe(parent, { subtree: true, childList: true });
});