javascript - 如何在 MutationObserver 中添加的节点上使用 querySelectorAll

Question

我试图在 MutationObserver 中创建一个 querySelectorAll 函数，所以它就像调用 querySelectorAll 到新添加的元素。这样做的原因是它可以与其他现有代码一起使用。

如果不使用硬编码选择器和使用 if 语句，这被证明是很难的，我想到了以下所有失败的方法:

• 尝试使用添加节点的父节点的 querySelectorAll，但它包含的元素不是刚刚添加的。
• 使用添加的节点 querySelectorAll 函数并合并所有结果，但它不起作用，因为不包括添加的节点本身。
• 创建一个新元素并将所有添加的节点移动到它，并在该元素上调用 querySelectorAll，但是在 MutationObserver 运行后节点消失并且不得到补充。

有没有办法做到这一点，或者对我想出的其中一种方法进行一些修改以使其起作用？

Answer 1

我相信您知道，您的回调会收到一组 MutationRecord s，每个节点都有一个名为 addedNodes 的添加节点的 NodeList。

将它们转换为与选择器匹配的元素列表可能比理想情况下更复杂，但这是一种方法(参见评论):

function applySelector(selector, records) {
    // We can't create a NodeList; let's use a Set
    const result = new Set();
    // Loop through the records...
    for (const {addedNodes} of records) {
        for (const node of addedNodes) {
            // If it's an element...
            if (node.nodeType === 1) {
                // Add it if it's a match
                if (node.matches(selector)) {
                    result.add(node);
                }
                // Add any children
                addAll(result, node.querySelectorAll(selector));
            }
        }
    }
    return [...result]; // Result is an array, or just return the set
}

实例:

const ob = new MutationObserver(records => {
    const result = applySelector("span", records);
    console.log(`Got ${result.length} matches:`);
    for (const span of result) {
        console.log(span.id);
    }
});
const target = document.getElementById("target");
ob.observe(target, {childList: true});
target.insertAdjacentHTML(
    "beforeend",
    `<div>
      blah
      <span id="span1">span</span>
      blah
      <div>
        <span id="span2">lorem <span id="span3">ipsum</span></span>
      </div>
    </div>`
);

function addAll(set, list) {
    for (const entry of list) {
        set.add(entry);
    }
}
function applySelector(selector, records) {
    // We can't create a NodeList; let's use a Set
    const result = new Set();
    // Loop through the records...
    for (const {addedNodes} of records) {
        for (const node of addedNodes) {
            // If it's an element...
            if (node.nodeType === 1) {
                // Add it if it's a match
                if (node.matches(selector)) {
                    result.add(node);
                }
                // Add any children
                addAll(result, node.querySelectorAll(selector));
            }
        }
    }
    return [...result]; // Result is an array, or just return the set
}

<div id="target"></div>