使用纯 javascript(无 JQuery/3rd-party 库),如何连接 document.getElementsByTagName 中的集合以在单循环中迭代

Using pure javascript (no JQuery/3rd-party libraries), how to concatenate collections from document.getElementsByTagName to iterate in single loop

我想做的是这样的:

var textareas = document.getElementsByTagName("textarea");
var inputs = document.getElementsByTagName("input");
var selects = document.getElementsByTagName("select");

var concatenated = textareas.concat(inputs).concat(selects);

for(var i = 0; i < concatenated.length; i++) {
   //Do something on each concatenated[i] item
}

你可以使用 ES6:

const concatenated = [...textareas, ...inputs, ...selects];

从 ES6 开始,您可以简单地 spread 将它们放入另一个数组中:

var concatenated = [...textareas, ...inputs, ...selects];

您可以使用 Array.prototype 在 array-like 对象上使用 Array 方法。在这种情况下,您可以创建一个小的辅助函数来调用 slice 您的集合,将它们变成数组:

function toArray(collection){ return Array.prototype.slice.call(collection, 0) }

因此您的查询结构如下:

var textareas = toArray(document.getElementsByTagName("textarea"));

然后,您可以自由使用 concat 加入他们。

更好的是,您可以使用 document.querySelectorAll 首先获取它们,然后遍历它们:

var concatenated = document.querySelectorAll('textarea, input, select')

使用 1 个查询选择器如何

<textarea value= "The DOM is very useful." />
<input class="intro" value='This example demonstrates the method' />

<script>
var z = document.querySelectorAll("input, textarea");

//now z has input and textarea

for(i=0;i<z.length;i++)
{ 

    alert( z[i]);
}
</script>