Question

我有一些选择的dom对象：

 var elems = document.getElementsByClassName("royal") ;

还有另一个对象

var collapsedElems =  document.getElementsByClassName("collapsed");

当我尝试使用数组concat（）方法连接elems和collapsedElems时发生了我的问题

 elems.concat(collapsedElems)

但getElementsByClassName()的返回类型实际上不是数组宾语。我在带有typeof操作符的chrome控制台上检查了它。这对我来说似乎很奇怪我怎么能把这两组对象结合起来。？

Answer 1

它返回一个HTML Collection，它可以完成数组所没有的操作（比如在DOM更改时获取实时更新）。

如果你想获得一个包含两个集合中元素的数组，那么你可以：

创建一个数组，然后通过循环遍历每个集合并将每个成员推入其中来填充它（这将为您提供一个数组）或
使用document.querySelectorAll(".royal, .collapsed");（获取NodeList）

Answer 2

getElementsByClassName()返回一个HTMLcollection对象，它类似于一个数组，但实际上并不是一个数组，所以你不能使用返回的值调用数组方法。

一个hack就是使用Array的prorotype方法和.call() / .apply()来传递返回的对象作为上下文。

var elems = document.getElementsByClassName("royal") ;
var collapsedElems =  document.getElementsByClassName("collapsed");
var earray = Array.prototype.slice.call(elems, 0);
var concatenated = earray.concat.apply(earray, collapsedElems) ;
console.log(concatenated)

演示：Fiddle

Answer 3

来自MDN：

返回具有全部子元素的所有子元素的类数组对象给定的类名。在文档对象上调用时，完成搜索文档，包括根节点。你也可以打电话任何元素上的getElementsByClassName（）;它只返回元素它们是具有给定的指定根元素的后代班级名称。

你可以试试这个：

function getElementsByClassName(className) 
{
   if (document.getElementsByClassName) 
   { 
     return document.getElementsByClassName(className); 
   }
   else 
   { 
     return document.querySelectorAll('.' + className); 
   } 
 }

为什么document.getElementsByClassName（“className”）返回对象

3 个答案: