JavaScript: boucle à travers tous les éléments retournés de getElementsByTagName
j'essaie de boucler tous les éléments retranchés de getElementsByTagName("input") en utilisant forEach. Une idée de pourquoi cela ne fonctionne pas en FF, Chrome ou IE?
<html>
<head>
</head>
<body>
<input type="text" value="" />
<input type="text" value="" />
<script>
function ShowResults(value, index, ar) {
alert(index);
}
var input = document.getElementsByTagName("input");
alert(input.length);
input.forEach(ShowResults);
</script>
</body>
</html>
8 réponses
vous devez convertir le nodelist en tableau avec ceci:
<html>
<head>
</head>
<body>
<input type="text" value="" />
<input type="text" value="" />
<script>
function ShowResults(value, index, ar) {
alert(index);
}
var input = document.getElementsByTagName("input");
var inputList = Array.prototype.slice.call(input);
alert(inputList.length);
inputList.forEach(ShowResults);
</script>
</body>
</html>
ou utiliser pour boucle.
for(i = 0;i < input.length; i++)
{
ShowResults(input[i].value);
}
et changer la fonction ShowResults en:
function ShowResults(value) {
alert(value);
}
Yay, ES6:
const children = [...parent.getElementsByTagName('tag')];
children.forEach((child) => { /* Do something; */ });
parce que input n'est pas un tableau, c'est HTMLCollection
Utiliser une boucle for serait mieux.
et depuis HTMLCollection s sont des objets de type tableau vous pouvez call Array#forEach sur elle comme ceci
Array.prototype.forEach.call(input, ShowResults);
c'est parce que l'entrée est une collection html. la collection html n'a pas de forEach.
vous pouvez facilement le convertir en tableau par Tableau.prototype.tranche
exemple:
function ShowResults(value, index, ar) {
alert(index);
}
var input = document.getElementsByTagName("input");
alert(input.length);
input = Array.prototype.slice.call(input)
input.forEach(ShowResults);
la raison, cela ne fonctionne pas est parce que ' getElementsByTagName " retourne un objet de type tableau plutôt qu'un tableau réel. Si vous n'êtes pas au courant, voici à quoi ils ressemblent tous les deux: -
var realArray = ['a', 'b', 'c'];
var arrayLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
ainsi, puisque les objets de type tableau héritent de ' objet.prototype 'au lieu de' tableau.prototype ', cela signifie que les objets de type tableau ne peuvent pas accéder aux méthodes de prototype des tableaux courants. comme forEach(), push(), map(), filter(), et slice().
Espère que ça aide!
HTMLCollections n'a pas les mêmes méthodes que les tableaux. Vous pouvez vérifier cette chose par ce basculement dans la console javascript de votre navigateur.
var elements = document.getElementsByClassName('some-class');
'forEach' in elements;
et la console retournera true si elements (dans ce cas) a une méthode appelée forEach à appeler.
dans ES6 vous pouvez utiliser l'opérateur spread pour convertir une collection HTML en tableau. voir la question pourquoi ne puis-je pas utiliser Array.un aperçu d'une collection D'éléments Javascript?
input = [...input]
input.forEach(ShowResults)
j'ai fait ceci:
HTMLCollection.prototype.map = Array.prototype.map;
vous pouvez maintenant utiliser la carte sur chaque HTMLCollection .
document.getElementsByTagName("input").map(
input => console.log(input)
);