使用MutationObserver自动回调无预期结果，是否MutationRecord不完整？

你遇到的这个问题其实很典型，核心原因有两个：DOM变动的时机问题，加上代码里的一个小错误导致调试日志不准。

第一个问题：错误的属性判断逻辑 #

先看你代码里的这类判断：

if (r.target.attributes["data-testid"] === "issue-table--body") {
    console.debug("Target is 'issue-table--body'")
}

element.attributes["data-testid"]返回的是一个Attr对象，不是字符串！直接和字符串比较永远不会成立，所以这些调试日志根本不会触发。正确的写法应该用getAttribute()：

if (r.target.getAttribute("data-testid") === "issue-table--body") {
    console.debug("Target is 'issue-table--body'")
}

同样的，所有判断node.attributes["data-testid"]的地方都要改成node.getAttribute("data-testid")，这会让你的调试日志更准确，帮你定位问题。

第二个问题：MutationObserver的触发时机 #

这是你核心困惑的根源：为什么回调里查不到，手动在控制台就能查到？

MutationObserver的回调是同步触发的——也就是说，当浏览器刚把节点添加到DOM树，但还没来得及解析它的子节点、完成渲染时，回调就执行了。此时你遍历addedNodes，父节点虽然存在，但它内部的<tr>元素可能还没被插入到DOM中（比如页面是通过JS动态插入的HTML字符串，浏览器还没完成解析）。

而当你手动在控制台执行查询时，已经过了浏览器的渲染周期，所有子节点都已经就绪，所以能查到预期的18个<tr>。

解决办法：延迟查询，等待DOM完成渲染 #

最简单的修复方式是用requestAnimationFrame把你的查询逻辑延迟到浏览器下一次渲染前执行，此时所有子节点都已经被解析并插入到DOM中了。修改你的Observer回调：

new MutationObserver(function callback(mutationRecords) {
    console.debug("-----------------------------------------------")
    console.debug("Mutation observed. Logging mutation records ...")
    console.debug(mutationRecords)

    // 延迟到下一次渲染周期再处理
    requestAnimationFrame(() => {
        searchRecord(mutationRecords)
    })

}).observe(document, {
    attributes: false,
    childList: true,
    subtree: true,
})

另外，你还可以在遍历addedNodes时，先检查节点是否已经连接到DOM树（虽然大部分情况下addedNodes已经连接，但保险起见）：

if (node instanceof HTMLElement && node.isConnected) {
    // 执行查询逻辑
}

进阶优化：精准监听目标父节点 #

如果知道目标<tr>的父节点是tbody[data-testid='issue-table--body']，你可以把Observer的监听目标从document改成这个父节点（当它出现后），这样能减少不必要的回调触发，提高性能：

// 先找到目标tbody，或者先监听document直到它出现
const targetBody = document.querySelector("tbody[data-testid='issue-table--body']");
if (targetBody) {
    new MutationObserver(searchRecord).observe(targetBody, {
        childList: true,
        subtree: true
    });
} else {
    // 如果初始不存在，先监听document直到它出现
    const observer = new MutationObserver((mutations) => {
        const body = document.querySelector("tbody[data-testid='issue-table--body']");
        if (body) {
            observer.disconnect();
            new MutationObserver(searchRecord).observe(body, {
                childList: true,
                subtree: true
            });
        }
    });
    observer.observe(document, { childList: true, subtree: true });
}

这样你的回调只会在目标tbody内部有节点变动时触发，更高效也更精准。

总结 #

1. 修复属性判断逻辑，用getAttribute()代替直接访问attributes对象
2. 用requestAnimationFrame延迟查询，确保子节点已经完全插入DOM
3. （可选）精准监听目标父节点，减少不必要的回调触发

按照这个方法修改后，你应该就能在回调中正确捕获到那18个<tr>元素了。

内容的提问来源于stack exchange，提问作者Daniel