为何这段JavaScript代码无法在事件处理函数之外正常执行

• 最核心的诱因是DOM加载执行顺序不匹配：你直接在全局作用域同步运行这段代码时，浏览器还没完成对应DOM节点的渲染，document.querySelectorAll('.movement__row') 匹配不到任何元素，返回的是空NodeList，转成数组后forEach遍历不会执行，自然没有效果。
• 事件处理函数（比如DOMContentLoaded、点击事件、页面load事件等）触发时，页面DOM已经完成解析渲染，目标元素已经存在于DOM树中，所以代码可以正常执行。
• 额外可能场景：如果.movement__row是异步动态生成的元素（比如接口请求返回后才渲染、用户交互后才插入到页面），同步执行代码时元素还没被插入到DOM树，同样会匹配不到节点。

在你原有代码的前一行添加如下打印，确认执行时的节点匹配情况：

console.log('匹配到的元素数量：', document.querySelectorAll('.movement__row').length)

如果输出为0，即可确认是上述加载顺序问题。

1. 调整脚本放置位置：把这段JS代码放到<body>标签的最末尾，在所有DOM元素之后加载执行，确保查询时目标节点已经存在。
2. 包裹DOM加载完成回调：将代码放到DOMContentLoaded事件的回调函数中，浏览器会等DOM解析完全后自动执行这段逻辑：

document.addEventListener('DOMContentLoaded', () => {
  [...document.querySelectorAll('.movement__row')].forEach((row, i) => {
    console.log(i);
    if (i % 2 === 0) row.style.backgroundColor = 'orangered';
  });
});

3. 动态生成元素场景：如果目标元素是异步渲染生成的，将这段代码放在元素插入DOM的逻辑之后执行即可。

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