使用纯javascript（无JQuery/第三方库），如何连接document.getElementsByTagName中的集合以在单个循环中迭代

我想做的是这样的：

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
}

var textareas=document.getElementsByTagName（“textarea”）；
var inputs=document.getElementsByTagName（“输入”）；
var selects=document.getElementsByTagName（“选择”）；
var concatenated=textareas.concat（输入）。concat（选择）；
for（var i=0；i

您可以使用ES6：

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

您可以使用ES6：

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

---

从ES6开始，您可以简单地将它们放入另一个阵列：

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

---

从ES6开始，您可以简单地将它们放入另一个阵列：

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

---

您可以使用

Array.prototype

在类似数组的对象上使用

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

---

您可以使用

Array.prototype

在类似数组的对象上使用

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个queryselector怎么样

<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 z=document.querySelectorAll（“输入，文本区域”）；
//现在z有了输入和文本区域
对于（i=0；i使用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 z=document.querySelectorAll（“输入，文本区域”）；
//现在z有了输入和文本区域
对于（i=0；我工作得很好，谢谢你闪电般的回复（<2分钟后我发布）。我对这一点相当陌生。我如何接受你的答案并给你无数分？@JohnDoe:你只能在提问15分钟后接受答案。工作得很好，谢谢你闪电般的回复（<2分钟后我发布）。我对这一点相当陌生。我如何接受你的答案并给你无数分？@JohnDoe：你只能在提出问题15分钟后接受答案。就我目前的尝试而言，我认为SLaks引起我注意并由lonesomeday澄清的扩展语法是最合适的。然而，我可以看到很多您的方法在其他方面的未来用途，非常感谢！@JohnDoe很高兴能提供帮助。在库之外了解javascript for real始终是一个好主意。这个网站有点过时，但在您探索我目前尝试的vanilla JS时仍然很有帮助，我想SLaks和cla引起了我的注意lonesomeday的rified是最合适的。但是，我可以看到你的方法在其他方面有无数的未来用途，所以非常感谢！@JohnDoe很乐意提供帮助。在库之外了解真实的javascript总是一个好主意。这个网站有点过时，但当你探索香草JS时仍然很有用。这个方法是最优雅的到目前为止，当反复执行时，似乎比spread和Array.prototype语法（至少在Firefox 58.0.2 64位中）运行得更快。我很高兴被告知其他语法，但我会在我的应用程序中实际使用您的解决方案。由于我是新来的，我不确定更改已接受答案的礼仪。到目前为止，其他答案在技术上最能回答问题（我应该换一种方式问——我不知道querySelectorAll）。单击我答案前面的勾号会将其更改为接受答案。如果这是您接受的答案，我知道如何更改接受的答案。但是，由于我是新来的，我不确定这是否违反规则（我现在正在研究）.根据此处提供的礼仪/规则/实践[]，我正在更改我已接受的答案，因为我发现您的解决方案是最优雅、最有帮助的，而且它的性能似乎更好。此方法是迄今为止提供的最优雅的方法，重复执行时，其运行速度似乎比spread和Array.prototype语法更快（至少在Firefox 58.0.2 64位中是这样）。我很高兴得知其他语法，不过我会在我的应用程序中实际使用您的解决方案。因为我是新来的，所以我不确定更改公认答案的礼仪。到目前为止，其他答案在技术上最能回答问题（我应该换一种方式问——我不知道querySelectorAll）。单击我答案前面的勾号会将其更改为接受答案。如果这是您接受的答案，我知道如何更改接受的答案。但是，由于我是新来的，我不确定这是否违反规则（我现在正在研究）.根据此处介绍的礼仪/规则/惯例[]，我正在更改我的公认答案，因为我发现您的解决方案最优雅、最有帮助，而且似乎效果更好。