如何优化 querySelectorAll 记录？答案

【问题标题】：How to optimize a querySelectorAll record?如何优化 querySelectorAll 记录？
【发布时间】：2020-04-13 21:44:14
【问题描述】：

我在下面有一个 js 代码。问题是 - 是否可以将这些行合二为一？

if (n === 6) {
    document.querySelectorAll('.dice#one .d_dot')[0].classList.remove('invisible');
    document.querySelectorAll('.dice#one .d_dot')[2].classList.remove('invisible');
    document.querySelectorAll('.dice#one .d_dot')[3].classList.remove('invisible');
    document.querySelectorAll('.dice#one .d_dot')[5].classList.remove('invisible');
    document.querySelectorAll('.dice#one .d_dot')[6].classList.remove('invisible');
    document.querySelectorAll('.dice#one .d_dot')[8].classList.remove('invisible');
  }

例如这样：

document.querySelectorAll('.dice#one .d_dot')[0, 2, 3, 5, 6, 8].classList.remove('invisible');

（实际上不起作用）。

提前谢谢你！

【问题讨论】：

你可以使用循环。

标签： javascript selectors-api queryselector

【解决方案1】：

使用循环。

var dice = document.querySelectorAll('.dice#one .d_dot');
[0, 2, 3, 5, 6, 8].forEach(index => dice[index].classList.remove('invisible'));

【讨论】：

有效！凉爽的！！非常感谢@Barmar！这仅适用于 ES6，因为使用了 '=>'？对吗？
正确。如果您需要旧版本的兼容性，您可以轻松地将其更改为 function(index)。
知道了！知道非常有用！谢谢！！

【解决方案2】：

.querySelectorAll() 返回元素的节点列表（集合）。节点列表没有classList，其中的元素有，因此您必须对每个元素都这样做。但是，有一种更简单的方法，就是遍历集合并作用于其中的每个元素：

let nums = [0, 2, 3, 5, 6, 8];
document.querySelectorAll('.dice#one .d_dot').forEach(function(item, index){
  if(nums.indexOf(index) > -1 ){
    item.classList.remove('invisible'); 
  }
});

【讨论】：

谢谢！看起来很有道理！