Как оптимизировать запись querySelectorAll?

Question

У меня есть 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'); 

(на самом деле это не работает).

Заранее спасибо!

Answer 1

Использовать все oop.

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

Answer 2

.querySelectorAll() возвращает список узлов (коллекцию) элементов. Список узлов не имеет classList, элементы внутри него есть, поэтому вы должны сделать это для каждого элемента. Однако есть более простой способ, который состоит в том, чтобы провести l oop через коллекцию и воздействовать на каждый элемент в ней:

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'); 
  }
});