为什么 document.getElementsByClassName("className") returns 对象

Question

我选择了一些 dom 个对象：

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

还有另一个对象

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

当我尝试使用数组 concat() 方法连接元素和折叠元素时出现了我的问题

 elems.concat(collapsedElems)

但是 getElementsByClassName() 的 return 类型实际上不是数组目的。我在 chrome 控制台用 typeof 运算符检查了它。我怎么能把这两组对象结合起来，这对我来说似乎很奇怪。？

Answer 1

getElementsByClassName() returns an HTMLcollection 类似于数组但不是真正数组的对象，因此您不能使用返回值调用数组方法。

一个 hack 是使用 Array 的原型方法和 .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 2

来自MDN：

Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

你可以试试这个：

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

Answer 3

它 returns 一个 HTML Collection 做数组做不到的事情（例如当 DOM 改变时获得实时更新）。

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

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

为什么 document.getElementsByClassName("className") returns 对象

why document.getElementsByClassName("className") returns object

javascript

dom