MutationObserver无法识别带有role="grid"的元素，无法触发回调修正ARIA属性

我特别理解这种没法碰源码，只能靠MutationObserver做无障碍修复的窘境——之前我也遇到过类似的场景，折腾了好一阵才找到问题所在。针对你的情况，我梳理了几个最可能的原因，以及对应的解决办法：

1. 目标元素在Observer启动前就已经存在于DOM中 #

MutationObserver只会监听它启动之后的DOM变化，如果那个带role="grid"的元素是页面加载完成时就已经渲染好的，Observer根本不会触发回调——因为没有发生"新增节点"或"属性变化"的事件。

解决办法：在启动Observer之后，手动执行一次全DOM扫描，把已经存在的role="grid"元素先修正掉：

// 新增一个递归检查并修复的函数
function fixGridRoles(node) {
  if (node.nodeType !== Node.ELEMENT_NODE) return;
  
  // 检查当前节点的role
  if (node.getAttribute('role') === 'grid') {
    node.setAttribute('role', 'table');
    console.log(`修复了元素的role属性：${node.id || node.className}`);
  }
  
  // 递归检查所有子节点
  Array.from(node.children).forEach(child => fixGridRoles(child));
}

// 启动Observer之前/之后，先扫描一次整个页面
fixGridRoles(document.body);

// 然后再启动你的Observer
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

2. ChildList回调只检查了新增节点本身，没递归遍历子元素 #

如果你的role="grid"元素是被包裹在一个新增的容器节点里（比如先添加一个父div，里面已经包含了grid元素），那你的代码只会检查这个父容器的role，不会深入到它的子节点里，自然找不到目标元素。

解决办法：把刚才写的fixGridRoles函数用到ChildList的回调里，对每个新增节点递归检查：

// 修改你原有的childList分支逻辑
else if (mutation.type === 'childList') {
  for (const node of mutation.addedNodes) {
    // 直接调用递归修复函数，覆盖当前节点和所有子节点
    fixGridRoles(node);
  }
}

3. 原代码里的console.log有潜在错误 #

在ChildList分支的console.log中，你用到了mutation.attributeName，但当mutation类型是childList时，这个属性是undefined，会导致日志输出异常，甚至可能影响后续代码执行（虽然你包了try-catch，但还是建议修正）。可以改成针对新增节点的日志，比如放在fixGridRoles函数里的日志格式就很合适。

额外验证点 #

• 确认你的Observer确实是在DOM加载完成后启动的（比如放在DOMContentLoaded事件里），避免因为页面还没渲染就启动Observer，导致遗漏早期的节点变化。
• 可以在浏览器控制台手动执行document.querySelectorAll('[role="grid"]')，看看能不能找到目标元素，确认元素确实存在且选择器正确。

按照上面的修改，应该就能覆盖绝大多数场景，把所有role="grid"的元素都修正为role="table"了。

备注：内容来源于stack exchange，提问作者FiveProcessWise