Javascript 如何遍历从getElementsByTagName返回的所有元素_Javascript_Arrays_Foreach_Getelementsbytagname

Javascript 如何遍历从getElementsByTagName返回的所有元素

javascript arrays

Javascript 如何遍历从getElementsByTagName返回的所有元素,javascript,arrays,foreach,getelementsbytagname,Javascript,Arrays,Foreach,Getelementsbytagname,我试图使用forEach循环遍历从getElementsByTagName（“input”）重新运行的所有元素。你知道为什么这在FF、Chrome或IE中不起作用吗 <html> <head> </head> <body> <input type="text" value="" /> <input type="text" value="" /> <

我试图使用forEach循环遍历从

getElementsByTagName（“input”）

重新运行的所有元素。你知道为什么这在FF、Chrome或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>


函数显示结果（值、索引、ar）{
警报（索引）；
}
var input=document.getElementsByTagName（“输入”）；
警报（输入长度）；
input.forEach（ShowResults）；

您需要使用以下命令将节点列表转换为数组：

<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>

我们为什么需要这样做？
JavaScript中的某些对象看起来像数组，但它们不是数组。这通常意味着它们具有索引访问和长度属性，但没有任何数组方法。示例包括特殊变量参数、DOM节点列表和字符串。类数组对象和泛型方法提供了使用类数组对象的提示。

2019年10月7日更新
现在使用ES6，您可以使用
[…inputList].forEach
或
数组。从（inputList）
这是因为输入是html集合。html集合没有forEach
您可以轻松地将其逐数组转换为array.prototype.slice
例如：

function ShowResults(value, index, ar) { alert(index); } var input = document.getElementsByTagName("input"); alert(input.length); input = Array.prototype.slice.call(input) input.forEach(ShowResults);

因为
输入
不是数组，它是使用
for
循环会更好
由于
HTMLCollection
s是类似于数组的对象，您可以像这样对其进行
array#forEach

Array.prototype.forEach.call(input, ShowResults);

HTMLCollections没有与数组相同的方法。您可以通过在浏览器的javascript控制台中提示来检查这一点

var elements = document.getElementsByClassName('some-class'); 'forEach' in elements;

如果
elements
（在本例中）有一个名为
forEach
的方法要调用，控制台将返回
true
。
在ES6中，您可以使用
spread
操作符将HtmlCollection转换为数组。看到这个问题了吗
耶，ES6：

const children = [...parent.getElementsByTagName('tag')]; children.forEach((child) => { /* Do something; */ });

这不起作用的原因是“getElementsByTagName”返回类似数组的对象，而不是实际数组。如果您不知道，以下是它们的样子：-

var realArray = ['a', 'b', 'c']; var arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
因此，由于类数组对象继承自“Object.prototype”而不是“Array.prototype”，这意味着类数组对象无法访问常见的数组原型方法，如forEach（）、push（）、map（）、filter（）和slice（）
希望有帮助
我这样做了：

HTMLCollection.prototype.map = Array.prototype.map;
现在，您可以在每个
HTMLCollection
上使用map

document.getElementsByTagName("input").map( input => console.log(input) );

getElementsByTagName
返回一个
HTMLCollection
，该集合没有
forEach
方法。但是，有一个简单的调整，允许您在不创建中间数组的情况下使用
forEach
进行迭代：使用
querySelectorAll
querySelectorAll
返回一个
NodeList
，现代浏览器有一个
NodeList.prototype。forEach
方法：

document.querySelectorAll（'input'）） .forEach（（输入）=>{ console.log（输入值）； }); 如果可以使用ES2015，可以使用Array.from（）将getElementsByTagName（）返回的HTMLCollection 转换为实际数组。如果将第11行更改为以下内容，其余代码将按原样工作： var input = Array.from(document.getElementsByTagName("input")); 我试图使用这个：我在表单上有超过1000个隐藏的输入字段。在这种情况下，哪种选择最有效？它们都是相同的。你可以随意使用任何你想要的。对于Array.prototype.slice.call（input）你可以使用速记[].slice.call（input）。我想你忘了让我在For循环中。没有forEach 的基本原理：现在在ES6节点列表中有forEach ，但HTMLCollection仍然没有。不幸的是，getElementsByTagName 返回HTMLCollection。考虑使用<代码> QueRealStudioLo.<代码>是否有一个错误消息？这是一个非常好的解释性解决方案，感谢ES6中的NodeList可以使用<代码>前缀，但不使用HTMLCyto.getElementsByTagName 返回HTMLCollection，而querySelectorAll返回NodeList。 HTMLCollection.prototype.map = Array.prototype.map; document.getElementsByTagName("input").map( input => console.log(input) ); var input = Array.from(document.getElementsByTagName("input"));