为何JS中forEach代码在index.js失效但浏览器控制台可正常运行？

一、核心问题：DOM加载时机不匹配 #

你的index.js代码执行时，页面DOM还没完成渲染，document.getElementsByName('close-outline')获取到的是空集合，因此forEach没有执行任何绑定逻辑。而Chrome控制台是在页面完全加载后执行代码，此时DOM元素已经存在，所以能正常获取元素并绑定事件。

二、快速修复：确保DOM就绪后执行代码 #

有两种简单方式可以解决这个问题：

方式1：监听DOM加载完成事件 #

把你的JS代码包裹在DOMContentLoaded回调中，确保DOM渲染完成后再执行元素查询和事件绑定：

document.addEventListener('DOMContentLoaded', () => {
  const btnsDelete = document.querySelectorAll('[name="close-outline"]');
  const btnsDeleteArray = Array.from(btnsDelete);
  
  btnsDeleteArray.forEach(btn => {
    btn.addEventListener('click', e => {
      containerAllTasks.removeChild(e.target.parentNode);
      removeKeyByValue(e.target.parentNode.children[1].value);
      countAllItems();
    });
  });
});

方式2：调整script标签位置 #

将引入index.js的<script>标签移动到</body>标签的上方，让页面先渲染DOM元素，再加载执行JS代码：

<!-- 页面其他HTML内容 -->
<script src="index.js"></script>
</body>

三、进阶优化：选择器修正 + 事件委托（适配动态元素） #

1. 选择器优化：getElementsByName是为表单元素的标准name属性设计的，对于ion-icon这类自定义元素的name属性，使用document.querySelectorAll('[name="close-outline"]')的查询方式更可靠。
2. 事件委托解决动态元素问题：如果你的<li>是通过JS动态添加的（比如新增任务项），直接用forEach绑定的事件不会作用在新元素上。推荐使用事件委托，将事件绑定到父容器上，统一处理所有子元素的点击事件：

document.addEventListener('DOMContentLoaded', () => {
  // 绑定到li的父容器containerAllTasks上
  containerAllTasks.addEventListener('click', e => {
    // 判断点击的元素是否是关闭按钮
    if (e.target.matches('[name="close-outline"]')) {
      const liItem = e.target.parentNode;
      containerAllTasks.removeChild(liItem);
      removeKeyByValue(liItem.children[1].value);
      countAllItems();
    }
  });
});

这种方式不仅能兼容初始渲染的元素，后续动态添加的<li>也能正常触发关闭逻辑，同时减少了事件绑定的数量，性能更优。

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