Манипулировать элементами querySelectorAll без зацикливания на NodeList

Question

С помощью jQuery можно использовать addClass / removeClass / toggleClass методы манипулирования классами.

Мы можем делать подобные вещи с помощью новых нативных методов Node - используя classList - но есть одна проблемная ситуация, когда нам нужно выполнить манипуляции с набором элементов.

Как бы выглядел метод, который абстрагирует цикл, поэтому нам не нужно преобразовывать NodeList, возвращаемый querySelectorAll, в Array и forEach это каждый раз вручную?

например:

const tableRows = [...document.querySelectorAll('table tbody tr')];
tableRows.forEach((element) => {
  // do stuff for every element here
});

Мое решение этого было

Array.prototype.addClass = function (className) {
  this.forEach((element) => {
    element.classList.add(className);
  });
};

Array.prototype.removeClass = function (className) {
  this.forEach((element) => {
    element.classList.remove(className);
  });
};

но добавление методов в прототип не является хорошей идеей.

Answer 1

Даже с jQuery - под капотом, он делает то же самое.
У объекта jQuery есть список всех элементов DOM, и когда вы вызываете метод объекта jQuery, он перебирает все элементы DOM и вызывает этот конкретный метод для элемента DOM.

Проверьте это, например:
https://github.com/jquery/jquery/blob/master/src/attributes/classes.js#L29

В конце концов - это то же самое.

Обратите внимание, что jQuery делает больше вещей, поэтому, если вы смотрите на эффективность - возможно, код, который вы напишете, будет немного более эффективным (в случае, если вы говорите о циклическом просмотре списка элементов для добавления / удаления классов).