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

Question

我最初要求一种优雅的方式来模拟 IE 或旧版浏览器中的 getElementsByTagName 函数结果的 Array.concat() 功能，因为看起来不支持 >concat。只是，当然是这样——返回的对象不支持它的原因是因为它不是Array。哎呀！

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

请注意，我使用的是 IE6，因为这是用于公司内部网（不过很快就会使用 IE8）。

我想出的答案是：

• 将代码放入一个单独的函数中并使用不同的节点列表调用它三次，而不用担心如何将它们塞到一起，这会变得更简单，并且性能可能会更好一个。

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

更新：差不多 2 年后，我只会使用 jQuery 并完成它！

Answer 1

var a1=document.getElementsByTagName('div'),
a2=document.getElementsByTagName('button');
a1=[].slice.call(a1, 0,a1.length).concat([].slice.call(a2, 0,a2.length))

Answer 2

我本以为会有比这更多的答案，无论如何，我尝试了一下并提出了以下函数，尽管我不得不稍微敲一下头。

function group_elements(element, tags) {
   var elements = element.getElementsByTagName('*');
   var results  = [];
   for ( var i = 0; i < elements.length; ++i ) {
      if ( tags.indexOf(elements[i].nodeName.toLowerCase()) > -1 ) {
         results.push(elements[i]);
      }
   }
   return results;
}


var form  = document.getElementById('form');
var tags = ['input', 'select'];
console.log(group_elements(form, tags));

Answer 3

要连接节点列表，请使用 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 4

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

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

Answer 5

function mergeNodeLists(a, b) {
  var slice = Array.prototype.slice;
  return slice.call(a).concat(slice.call(b));
}

console.log( mergeNodeLists( 输入, 选择 ) ); // => [输入、选择]

Answer 6

正如 MDN 文档 中所述，您还可以使用 < a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from" rel="nofollow noreferrer">Array.from< /a> 在支持它的浏览器上将 NodeList 转换为数组。