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

我有与选择一些DOM对象：为什么document.getElementsByClassName（“类名”）返回对象

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

而且另一个对象，当我试图

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

我的问题发生concat elems和collapsedElems with array concat（）方法

elems.concat(collapsedElems)

但返回类型getElementsByClassName()不是数组，实际上它是对象。我用typeof操作符在chrome控制台上检查过它。这对我来说似乎很奇怪，我该如何将这两组对象结合起来。？

来源

2015-03-31 semirturgay

查询方法查询其多元素返回存储元素相同的方法，阵列中的'''NodeList'''对象它不是一个数组。您需要将其转换为适当的数组才能使用Array方法。 – GillesC 2015-03-31 10:40:11

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

一个窍门是使用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

来源

2015-03-31 10:39:47

从MDN：

返回里面有所有的给定的类名称的所有子元素的数组状物体。在文档对象上调用时，将搜索包括根节点在内的完整文档。你也可以在任何元素上调用 getElementsByClassName（）;它将仅返回元素，这些元素是指定的类名的指定根元素的后代。

你可以试试这个：

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

来源

2015-03-31 10:40:05

它返回一个HTML Collection该做的事情，数组不（如获取实时更新当DOM改变）。

如果你想在这两个集合获取与元素的数组，然后你可以：

创建一个数组，然后遍历每个集合的每个成员推到它填充它（这将给你一个数组）或
使用document.querySelectorAll(".royal, .collapsed");（获得一个节点列表）

来源

2015-03-31 10:41:19 Quentin

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

回答

相关问题