javascript - ejemplo - getelementsbytagname php
JavaScript: pasa por todos los elementos devueltos por getElementsByTagName (8)
Estoy intentando recorrer todos los elementos recuperados de getElementsByTagName("input") usando forEach. ¿Alguna idea de por qué esto no funciona en FF, Chrome o 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>
Debido a que la input no es una matriz, es HTMLCollection Utilizar un bucle for sería mejor.
Y dado que HTMLCollection s son objetos similares a una matriz, puede call Array#forEach en este como este
Array.prototype.forEach.call(input, ShowResults);
El motivo, esto no funciona es porque '' getElementsByTagName '' devuelve un objeto similar a una matriz en lugar de una matriz real. En caso de que no lo sepas, así es como se ven los dos:
var realArray = [''a'', ''b'', ''c''];
var arrayLike = {
0: ''a'',
1: ''b'',
2: ''c'',
length: 3
};
Por lo tanto, dado que los objetos similares a Array heredan de '' Object.prototype '' en lugar de '' Array.prototype '', esto significa que Array-like Objects no puede acceder a los métodos de prototipos comunes de Array como forEach (), push (), map (), filter () y slice ().
¡Espero que ayude!
En ES6 puede usar el operador de spread para convertir una colección Html en una matriz. vea esta pregunta ¿Por qué no puedo usar Array.forEach en una colección de elementos de Javascript?
input = [...input]
input.forEach(ShowResults)
Es porque la entrada es colección html. la colección html no tiene para cada uno.
puede convertirlo fácilmente en una matriz mediante Array.prototype.slice
ejemplo:
function ShowResults(value, index, ar) {
alert(index);
}
var input = document.getElementsByTagName("input");
alert(input.length);
input = Array.prototype.slice.call(input)
input.forEach(ShowResults);
HTMLCollections no tiene los mismos métodos que las matrices. Puede verificar esto haciendo una sugerencia en la consola de JavaScript de su navegador.
var elements = document.getElementsByClassName(''some-class'');
''forEach'' in elements;
Y la consola devolverá true si los elements (en este caso) tienen un método llamado para cada llamada.
Hice esto:
HTMLCollection.prototype.map = Array.prototype.map;
Ahora puede usar el mapa en cada HTMLCollection .
document.getElementsByTagName("input").map(
input => console.log(input)
);
Necesita convertir la lista de nodos a una matriz con esto:
<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>
o usar para bucle.
for(i = 0;i < input.length; i++)
{
ShowResults(input[i].value);
}
y cambiar la función ShowResults a:
function ShowResults(value) {
alert(value);
}
Yay, ES6:
const children = [...parent.getElementsByTagName(''tag'')];
children.forEach((child) => { /* Do something; */ });