querySelectorAll: манипулирование узлами

Question

Насколько я понял, querySelector возвращает реальный изменяемый элемент, в то время как querySelectorAll возвращает ненасыщенный набор статических узлов.

Я хочу настроить стиль всех элементов в соответствии с конкретнымселектор.Он отлично работает для первого элемента с querySelector, но не для всех соответствующих элементов с querySelectorAll.Я думаю, это потому, что набор узлов не является живым.

Есть ли обходной путь?Или я что-то упустил?

Answer 1

Проблема в том, что querySelector возвращает один узел.querySelectorAll возвращает набор узлов (живость означает, что элементы в наборе не будут удалены, если вы обновите их).Вам нужно установить стиль для каждого из элементов, которые соответствуют, возможно, с помощью цикла - вы не можете просто установить свойство один раз для всех них.

Итак, вам, вероятно, нужно сделать что-то вроде этого:

var nodes = document.querySelectorAll('div.foo');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].style.color = 'blue';
}

Answer 2

это тоже будет работать ..

[].forEach.call(document.querySelectorAll('div.foo'), function (el) {
    el.style.color = 'blue';
});

Answer 3

Как описано в querySelectorAll: манипулирование узлами , но с возможностью заставить его работать, поскольку forEach работает только с массивами, а не с NodeLists:

Array.prototype.slice.call(document.querySelectorAll('div.foo')).forEach(function(el) {
    el.style.color = 'blue';
});