DOM加载完成后无法访问HTML Collection中下标元素的问题求助

核心错误：错误传递事件回调 #

你代码里的document.addEventListener("DOMContentLoaded", doThing());存在关键问题：你直接执行了doThing()并把返回值（undefined）传给了事件监听，而非传递函数本身。这导致doThing在DOM未完全就绪（甚至AgGrid还未开始渲染目标元素）时就提前执行，此时目标滚动容器还未被创建。

为何控制台显示集合有元素？ #

getElementsByClassName返回的是动态HTMLCollection，控制台展示的是该集合的实时状态——当你在控制台展开它时，AgGrid已经渲染出目标元素，所以能看到长度为1；但代码执行的瞬间，元素还未生成，因此scrollbarElements[0]返回undefined。

修复步骤 #

1. 修正事件监听的回调传递方式
   将doThing()改为doThing，确保函数在DOM加载完成后才被调用：

   const scrollbarElements = document.getElementsByClassName(
     "ag-body-horizontal-scroll-viewport"
   );
   
   const doThing = () => {
     console.log("All the elements:");
     console.log(scrollbarElements);
     console.log("Elements at the 0 position:");
     console.log(scrollbarElements[0]);
   };
   
   // 传递函数引用而非执行结果
   document.addEventListener("DOMContentLoaded", doThing);
   

2. 适配AgGrid的异步渲染逻辑
   即便DOM加载完成，AgGrid的表格元素是异步生成的，DOMContentLoaded触发时目标滚动容器可能仍未出现。更可靠的方式是使用AgGrid原生生命周期钩子或DOM变化监听：

   方案一：使用AgGrid的gridReady事件

   若能直接修改AgGrid配置，建议在表格渲染完成后再获取元素：

   const gridOptions = {
     // 其他表格配置
     onGridReady: () => {
       const scrollbarElement = document.querySelector(".ag-body-horizontal-scroll-viewport");
       console.log(scrollbarElement); // 此时可正确获取元素
     }
   };
   

   方案二：用MutationObserver监听元素出现

   若无法修改AgGrid配置，可监听DOM变化直到目标元素生成：

   const observer = new MutationObserver((mutations) => {
     const scrollbarElement = document.querySelector(".ag-body-horizontal-scroll-viewport");
     if (scrollbarElement) {
       console.log(scrollbarElement);
       observer.disconnect(); // 找到元素后停止监听
     }
   });
   
   // 监听body下所有DOM变化
   observer.observe(document.body, {
     childList: true,
     subtree: true
   });
   

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