如何将指定类下元素的tabindex设为-1并解决代码失效问题

你写的代码存在两处逻辑问题，导致修改不生效：

• document.querySelector() 仅返回匹配选择器的第一个DOM元素，不是NodeList集合，本身没有forEach方法，代码运行到这一步就会抛出类型错误，后续属性修改逻辑根本不会执行
• 你的代码是直接给.app-container-grid容器本身设置tabindex，没有查找容器内部携带tabindex属性的子元素，和实际需求完全不匹配

// 选中页面所有类名为app-container-grid的容器
document.querySelectorAll('.app-container-grid').forEach(grid => {
  // 查找当前容器内所有tabindex属性值为0的子元素
  grid.querySelectorAll('[tabindex="0"]').forEach(targetEl => {
    // 修改tabindex值为-1，两种写法二选一即可
    targetEl.setAttribute('tabindex', '-1');
    // targetEl.tabIndex = -1;
  })
})

验证修改效果时，可以打开浏览器开发者工具的Elements面板，查看对应元素的属性值，也可以在遍历逻辑中加console.log(targetEl)打印选中的元素，确认命中范围是否符合预期。

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