document.querySelector()按类名查询DOM元素失效，但按ID与getElementsByClassName()可正常运行

看起来你遇到的核心问题是元素加载时机和动态DOM渲染的问题，这在Gerrit这类依赖AJAX异步加载内容的页面里非常常见，我来帮你一步步梳理调试方向和解决方案：

首先，排查核心原因：元素是否在脚本执行时已存在？ #

你提到getElementsByClassName("gerritBody")能返回HTMLCollection，但elems[0]是undefined，大概率是因为你的脚本在元素还没被Gerrit的动态脚本渲染到页面上时就执行了。HTMLCollection是动态集合，但如果执行脚本时元素还未加载，它的length会是0，自然访问[0]就会得到undefined。

而ID选择器能生效，可能是因为#gerrit_body是页面初始HTML里就存在的容器，而gerritBody是后续动态添加的子元素。

调试步骤 #

1. 先验证选择器本身是否正确
   打开Gerrit页面的DevTools控制台（F12），手动运行：

   document.querySelectorAll('.gerritBody')
   

   如果控制台能返回正确的元素，说明选择器没问题，问题出在脚本执行时机；如果控制台也拿不到，那要检查：

   • 元素的类名是否有大小写错误（比如实际是GerritBody？）
   • 元素是否在Shadow DOM里（右键元素→检查，看是否有#shadow-root标记）

2. 检查扩展脚本的执行时机
   Chrome扩展的内容脚本默认可能在document_end阶段执行，这时候Gerrit的动态内容还没加载完成。你需要确保脚本在页面完全就绪后运行：

   • 在扩展的manifest.json里设置：

     "content_scripts": [
       {
         "matches": ["https://你的Gerrit域名/*"],
         "js": ["your-script.js"],
         "run_at": "document_idle"
       }
     ]
     

   • 或者在脚本里手动监听DOM加载完成事件：

     document.addEventListener('DOMContentLoaded', function() {
       const elems = document.querySelectorAll('.gerritBody');
       console.log('DOM加载完成后获取的元素：', elems);
     });
     

处理动态加载的元素（终极解决方案） #

Gerrit很多内容是通过AJAX异步加载的，即使等DOMContentLoaded也可能拿不到目标元素。这时候可以用MutationObserver监听DOM变化，直到目标元素出现：

// 创建观察者实例，监听DOM变化
const observer = new MutationObserver((mutations) => {
  const targetElems = document.querySelectorAll('.gerritBody');
  if (targetElems.length > 0) {
    console.log('成功找到gerritBody元素：', targetElems);
    // 在这里执行你的逻辑，比如操作元素
    observer.disconnect(); // 找到元素后停止监听，避免重复触发
  }
});

// 开始监听body的所有子元素变化
observer.observe(document.body, {
  childList: true,
  subtree: true, // 监听所有层级的子节点
  attributes: false
});

额外注意点 #

• 单引号和双引号在JS里除了嵌套场景外没有区别，所以这个不是问题根源
• getElementsByClassName返回的是动态集合，而querySelectorAll返回的是静态NodeList，两者的区别是动态集合会随DOM变化自动更新，但如果元素还没加载，两者都拿不到内容

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