web-dev-qa-db-fra.com

comment itérer sur HTMLCollection?

J'ai quelques éléments dans mon HTML avec la classe node-item, J'y accède dans mon composant en utilisant:

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

et quand je me connecte nodeItems cela me donne un HTMLCollection[] de longueur 4.

J'ai essayé de nombreuses façons mais je n'arrive toujours pas à répéter sur nodeItems:

1- premier essai:

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

essai de 2 secondes:

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

Et j'ai essayé l'itération de tableau et l'itération d'objet mais toujours undefined ou error. a également essayé:

let nodeItems = document.querySelector(selectors);

Mais mêmes problèmes.

6
Fateme Fazli

nodeItems est HTMLCollection, qui est un objet de type tableau.

Il est itérable dans les navigateurs modernes. Les itérateurs sont pris en charge avec downlevelIteration option de compilation activé, dans ce cas ce sera:

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

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

Les itérables peuvent être polyfilled dans les anciens navigateurs. core-js fournit polyfills pour les itérables DOM .

Sinon, nodeItems peut être converti en tableau et itéré comme d'habitude:

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

for (const c of nodeItems) {
  // ...
}
6
Estus Flask

Utilisez simplement Array.from(document.getElementsByClassName('node-item')) ou l'opérateur d'étalement [...document.getElementsByClassName('node-item')] et utilisez tout ce que vous utiliseriez sur un tableau.

En dehors de cela, vous pouvez également utiliser une boucle normale for

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

Vous pouvez utiliser l'opérateur d'étalement sur document.querySelectorAll pour avoir un tableau.

Voici un extrait:

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>

Doc: propagation

2
Eddie