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 回答