Как перебрать выбранные элементы с помощью document.querySelectorAll

Я пытаюсь использовать цикл для выбранных элементов, которые запрашиваются с document.querySelectorAll, но как?

Например, я использую:

var checkboxes = document.querySelectorAll('.check');
for( i in checkboxes) {
  console.log(checkboxes[i]);
}

Вывод:

<input id="check-1" class="check" type="checkbox" name="check">
<input id="check-2" class="check" type="checkbox" name="check">
<input id="check-3" class="check" type="checkbox" name="check">
<input id="check-4" class="check" type="checkbox" name="check">
<input id="check-5" class="check" type="checkbox" name="check">
<input id="check-6" class="check" type="checkbox" name="check">
<input id="check-7" class="check" type="checkbox" name="check">
<input id="check-8" class="check" type="checkbox" name="check">
<input id="check-9" class="check" type="checkbox" name="check">
<input id="check-10" class="check" type="checkbox" name="check" checked="">

10
item()
namedItem()

Моя проблема заключается в том, что в конце этот метод возвращает 3 дополнительных элемента. Как я могу правильно это сделать?

Ответы

Ответ 1

Цикл

for in не рекомендуется для массивов и объектов типа массива - вы понимаете, почему. Здесь может быть больше, чем просто индексированных по номеру элементов, например, свойство length или некоторые методы, но for in будет проходить через все из них. Используйте

for (var i = 0, len = checkboxes.length; i < len; i++) {
    //work with checkboxes[i]
}

или

for (var i = 0, element; element = checkboxes[i]; i++) {
    //work with element
}

Второй способ не может быть использован, если некоторые элементы массива могут быть ложными (не ваш случай), но могут быть более читабельными, поскольку вам не нужно использовать везде [].

Ответ 2

Хорошая альтернатива:

[].forEach.call(
    document.querySelectorAll('.check'),
    function (el) {
        console.log(el);
    }
);

но, как указано, вы должны использовать цикл for.

Ответ 3

Мой любитель использует оператор распространения, чтобы преобразовать его в массив, а затем использовать forEach для циклирования.

var div_list = document.querySelectorAll('div'); // returns NodeList
var div_array = [...div_list]; // converts NodeList to Array
div_array.forEach(div => {

// do something awesome with each div

});

Я код в ES2015 и использую Babel.js, поэтому не должно быть проблем с поддержкой браузера.

Ответ 4

С ES6 существует статический метод Array.from, чтобы воспользоваться преимуществами нестатических методов Array (forEach, map, filter,..):

Array.from(document.querySelectorAll('div')).forEach((element,index) =>

{

     // handle "element"

});

Другое, использование Array.from, поскольку querySelector предоставляет метод item:

var all=document.querySelectorAll('div');
// create range [0,1,2,....,all.length-1]
Array.from({length:all.length},(v,k)=>k).forEach((index)=>{
     let element=all.item(index);
});

Ответ 5

Похоже, что Firefox 50+, Chrome 51+ и Safari 10+ теперь поддерживают функцию .forEach для объектов NodeList. Примечание. .forEach не поддерживается в Internet Explorer, поэтому рассмотрите один из вышеперечисленных подходов, если требуется поддержка IE.

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => console.log(p));

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>