爲什麼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（「類名」）返回對象

回答

相關問題