19

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

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

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

我想出的答案是：

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

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

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

4

6 回答 6

31

要连接节点列表，请使用将它们转换为数组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（jQuery 背后的选择器引擎）中的注释起始行#723

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

$("input, select, textarea, <other tags>")
于 2010-03-12T02:59:17.740 回答
7

使用ES6 扩展运算符，您可以做到

let arr = [...nodeList1, ...nodeList2];
于 2017-04-12T15:23:07.550 回答
3 
function mergeNodeLists(a, b) {
  var slice = Array.prototype.slice;
  return slice.call(a).concat(slice.call(b));
}

console.log( mergeNodeLists( inputs, selects ) ); // => [input, select]

于 2013-06-23T15:59:15.590 回答
2

如MDN 文档中所述，您还可以Array.from在支持它的浏览器上使用将 NodeList 转换为数组。

于 2018-01-11T23:07:01.233 回答
1 
var a1=document.getElementsByTagName('div'),
a2=document.getElementsByTagName('button');
a1=[].slice.call(a1, 0,a1.length).concat([].slice.call(a2, 0,a2.length))
于 2010-03-12T04:26:38.860 回答
0

我原以为会有比这更多的答案，无论如何我试了一下并想出了以下功能，尽管我不得不稍微敲一下头。

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));
于 2016-03-27T10:37:52.350 回答