Как перебрать HTMLCollection?

Question

У меня есть некоторые элементы в моем HTML с классом node-itemЯ обращаюсь к ним в своем компоненте, используя:

let nodeItems = document.getElementsByClassName('node-item');

и когда я вхожу nodeItems это дает мне HTMLCollection[] с длиной 4.

Я пробовал много способов, но до сих пор не могу повторить nodeItems:

1- первая попытка:

let bar = [].slice.call(nodeItems);
for (var g of bar){
    console.log(g); //gives me nothing
} 

2- вторая попытка:

for(let c of <any>nodeItems) {
    console.log(c); //gives me nothing
}

И я попробовал итерацию массива и итерации объекта, но все же undefined или же error, также попробовал:

let nodeItems = document.querySelector(selectors);

Но проблемы те же.

Answer 1

nodeItems является HTMLCollection, который является массивоподобным объектом.

Это повторяется в современных браузерах. Итераторы поддерживаются downlevelIteration опция компилятора включена, в этом случае это будет:

const nodeItems = document.getElementsByClassName('node-item');

for (const c of nodeItems) {
  // ...
}

Итерации могут быть заполнены в старых браузерах. core-js предоставляет полифилы для итераций DOM.

Иначе nodeItems можно преобразовать в массив и повторить как обычно:

const nodeItems = Array.from(document.getElementsByClassName('node-item'));

for (const c of nodeItems) {
  // ...
}

Answer 2

Просто используйте Array.from(document.getElementsByClassName('node-item')) или оператор распространения [...document.getElementsByClassName('node-item')] и использовать то, что вы бы использовали в массиве.

Кроме того, вы также можете использовать обычный for петля

let nodeItems = document.getElementsByClassName('node-item');
for (let i = 0; i < nodeItems.length; i++) {
    // access current element with nodeItems[i]
}

Answer 3

Вы можете использовать спред оператора на document.querySelectorAll иметь массив.

Вот фрагмент:

let nodeItems = [...(document.querySelectorAll('.class1'))];

for (var g of nodeItems) {
  console.log( g.innerHTML ); 
}

<div class='class1'>Text 1</div>
<div class='class1'>Text 2</div>
<div class='class1'>Text 3</div>

Док: Распространение