Javascript - 将多个节点列表连接在一起

Question

我最初是在寻求一种优雅的方式来模拟 Array.concat() getElementsByTagName 的结果的功能在 IE 或更旧的浏览器中运行，因为似乎 concat不支持。只是，当然是——返回的对象不支持它的原因是因为它不是 Array .哎呀!
getElementsByTagName实际上返回一个 NodeList .那么，真正的问题是:获取文档中所有表单元素(输入、选择、文本区域、按钮)的单个列表以循环遍历它们的好方法是什么？不需要数组...单个 NodeList也会很完美。

请注意，我使用的是 IE6，因为这是用于公司 Intranet(不过很快会使用 IE8)。

我想出的答案是:

将代码放入一个单独的函数并使用不同的节点列表调用 3 次变得更简单，并且性能可能更好，而不是担心将它们组合在一起的好方法。

我最终转而使用 MooTools(经过几个小时阅读所有不同框架的比较)。所以现在，获取我想要的项目数组非常简单。我建议使用这样的 javascript 框架，而不是人们绞尽脑汁试图找出做事的最佳方式。当然，我完全赞成实际学习原始语言(这就是为什么我推迟使用框架这么久的原因)，但这并不总是让事情顺利进行的最快方式，这在企业中通常同样重要就像提高编码员的语言能力一样。

更新:差不多 2 年后，我将只使用 jQuery 并完成它!

Answer 1

要连接节点列表，请使用 Array.prototype.slice.call 将它们转换为数组然后正常连接它们。

var a = Array.prototype.slice.call(document.getElementsByTagName("p")),
    b = Array.prototype.slice.call(document.getElementsByTagName("div"))

var c = a.concat(b);

编辑: (回应您的评论)

如果您只有几种类型的元素，这没关系，但性能会随着您进行的 DOM 调用次数而降低。做 document.getElementsByTagName('*') 可能会更好更快，遍历列表并选择具有所需 nodeName 的元素.

要记住的另一件事是 Array.prototype.slice上面使用的方法可能不适用于所有浏览器。查看 sizzle.js 中的评论起始行#723 (jQuery 背后的选择器引擎)

当然，最好使用像 jQuery 这样的库来处理所有令人头疼的问题。你可以简单地做:

$("input, select, textarea, <other tags>")