拆分JS与HTML文件后NodeList无法正常访问的问题排查

问题根源 #

你在JS绑定DOMContentLoaded事件时犯了个关键错误：

document.addEventListener('DOMContentLoaded', setShelfChoice());

这里的setShelfChoice()是立即执行函数，不是传递函数引用给事件监听器。直接后果是：

• 脚本加载时（此时DOM大概率还没完全构建好），函数就立刻跑起来了，根本没等DOM加载完成
• 事件监听器实际绑定的是setShelfChoice()的返回值（也就是undefined），所以等DOM真的加载完时，不会触发任何预期操作

哪怕你控制台能看到NodeList里有元素，那也是因为浏览器解析到了元素标签，但还没完成表单元素的默认值初始化，所以el[0].value会返回undefined。

之前把JS放HTML底部能正常工作，是因为脚本执行时DOM已经完全构建，元素的属性也都初始化好了；拆分后不管是放head还是移到底部，只要事件绑定方式错了，就会出问题。

修复方法 #

1. 修正事件绑定方式 #

把函数调用改成传递函数引用，去掉括号就行：

document.addEventListener('DOMContentLoaded', setShelfChoice);

2. 优化选择器（可选） #

既然元素有唯一IDshelf_choice，用getElementById比getElementsByName更高效，还不用取索引：

function setShelfChoice() { 
  let el = document.getElementById('shelf_choice');
  console.log("el type: ", typeof(el), el);
  console.log("el value: ", el.value);
  // 后续逻辑也可以直接用el，不用el[0]
}

原理说明 #

1. DOMContentLoaded事件：这个事件在浏览器解析完HTML、构建好完整DOM树后触发，此时外部资源（比如图片、样式表）可能还没加载，但已经可以安全操作DOM元素了。
2. 函数引用与立即执行的区别：给addEventListener传不带括号的函数名，是把函数本身作为回调，等事件触发时再执行；加括号的话，会立刻执行函数，把返回值传给监听器（这里返回undefined，等于没绑定有效回调）。
3. 脚本加载时机的影响：放在head里的脚本会在DOM构建前执行，直接操作DOM要么找不到元素，要么元素属性没初始化；放在HTML底部的脚本，执行时DOM已经构建完成，所以之前能正常运行。

内容的提问来源于stack exchange，提问作者Meghan M.