使用纯 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>
我想做的是这样的:
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>