无法访问HTMLCollection索引子节点的问题排查

问题 #

我尝试通过以下函数遍历getElementsByClassName返回的HTMLCollection。控制台输出首行显示该HTMLCollection包含图片子节点，但最后两行显示通过索引访问返回undefined，调用.item(0)返回null。请问我的函数哪里出错导致无法读取子节点？

static get_bitmap_promises(id, rows_pers_letter, columns_per_letter) {
    let _images = document.getElementsByClassName(id + "-font-image");
    console.log(_images);
    console.log(_images.item(0));
    console.log(_images[0]);
}

控制台输出：

HTMLCollection []0: img.welcome-test-font-image1: img.welcome-test-font-image2: img.welcome-test-font-image3: img.welcome-test-font-image4: img.welcome-test-font-image5: img.welcome-test-font-image6: img.welcome-test-font-image7: img.welcome-test-font-image8: img.welcome-test-font-image9: img.welcome-test-font-image10: img.welcome-test-font-image11: img.welcome-test-font-image12: img.welcome-test-font-image13: img.welcome-test-font-image14: img.welcome-test-font-image15: img.welcome-test-font-imagelength: 16[[Prototype]]: HTMLCollection

keyframesDomObj.js:86 null

keyframesDomObj.js:87 undefined

原因与解决办法 #

• 核心原因：动态集合特性+代码执行时机过早
  getElementsByClassName返回的是动态HTMLCollection——控制台打印的集合视图是异步更新的，会展示当前最新的DOM状态，但你调用item(0)和[0]时，目标图片元素还没加载到DOM里，所以返回null和undefined。

• 解决办法

  1. 确保DOM加载完成后执行代码
     把函数调用放在DOMContentLoaded事件回调中，或者直接放在页面所有DOM元素之后执行：

     document.addEventListener('DOMContentLoaded', () => {
         YourClassName.get_bitmap_promises('welcome-test', 你的行参数, 你的列参数);
     });
     

  2. 改用静态集合替代动态集合
     使用document.querySelectorAll返回静态NodeList，它不会随DOM变化动态更新，能稳定获取代码执行时的DOM状态：

     let _images = document.querySelectorAll('.' + id + "-font-image");
     

     之后_images[0]或_images.item(0)都能正常获取元素，而且NodeList支持forEach直接遍历，操作更便捷。

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