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.
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) {
// ...
}
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]
}
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