Javascript - 将多个NodeLists连接在一起

Question

我原本想要一种优雅的方式来模拟IE或旧浏览器中函数Array.concat()结果的getElementsByTagName功能,因为它似乎concat不受支持.只是,当然它是 - 返回的对象不支持它的原因是因为它不是一个Array.哎呀!

getElementsByTagName实际上返回一个NodeList.那么真正的问题是:什么是获取文档中所有表单元素的单个列表(输入,选择,文本区域,按钮)以循环遍历它们的好方法？不需要数组......单个NodeList也是完美的.

请注意,我使用IE6,因为这是企业内部网(尽管IE8很快).

我想出的答案是:

• 它变得更简单,并且可能更好地将代码放入一个单独的函数并使用不同的节点列表调用它三次,而不是担心将它们组合成一个的好方法.

• 我最终转而使用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>")

Answer 2

使用ES6 扩展运算符，您可以执行以下操作

let arr = [...nodeList1, ...nodeList2];