如何訪問document.getElementsByClassName的屬性

我想檢查一個css類是否在DOM內部使用。所以，我有如何訪問document.getElementsByClassName的屬性

var x = document.getElementsByClassName('classname');

當我打印X個，我得到一個[對象節點列表]在頁面上存在是不類和類。是否有我可以訪問的x屬性？就像標籤名稱或其他東西一樣。如果有人能告訴我x的不同屬性以及我可以訪問它們的方式，那將是非常棒的。

謝謝:)

來源

2012-02-24 sharath

請注意，這是複數：

var x = document.getElementsByClassName('classname'); 
         ^

您需要遍歷x獲得的單個元素：

for (var i = 0; i < x.length; i++) { 
    var element = x[i]; 

    console.log(element); 
}

確保增加對後備支持Internet Exploder：http://ejohn.org/blog/getelementsbyclassname-speed-comparison/

來源

2012-02-24 05:08:27 Blender

或者如果你已經知道你只有一個具有該類的元素：'document.getElementsByClassName（'classname'）[0]'或考慮使用一個Id。請注意'getElementsByClassName'在IE 8及以下版本中不起作用 – Paulpro 2012-02-24 05:09:40

如果您只想檢查文檔中類別的存在，則還可以使用querySelector。

var x = document.querySelector('.classname');

它返回null如果沒有元素具有類，否則與類名的第一個元素。如果你想使用classname所有元素：

var x = document.querySelectorAll('.classname');

現在x是null如果類沒有在文檔中使用，否則Nodelist，含有classname類的所有元素，可以迭代的方式Blender顯示。例如，在該迭代中，您可以檢索元素tagName或其ID。像：

for (var i=0;i<x.lenght;(i=i+1)){ 
    console.log(x[i].id + ': ' + x[i].tagName); 
}

document.querySelector是所有現代瀏覽器上可用，並且IE 8版本及以上。

來源

2012-02-24 06:13:11 KooiInc

我幾乎總是使用document.querySelector（其中：「返回指定組選擇相匹配的文檔中的第一元素」），它返回一個元素對象和它的。

我不知道爲什麼，但我在Chrome的控制檯我寫的：

var img = document.getElementsByClassName('image__pic'); 
img[0]...

img[0]，儘管它高興所有腦幹，它不產生任何進一步的屬性/方法完成窗口中使用。就像沒有（即使我可以使用img [0]）。例如SRC）

在另一方面：

var imgq = document.querySelector('.image__pic')

給我的控制檯非常有用的自動完成：

至於它的瀏覽器支持it is phenomenal：

它的使用也不那麼棘手，因爲getElementsByClassName返回HTMLCollection，這是它自己的一個小野獸。

querySelector的另一個優點是其多功能性：任何類型的CSS選擇器都可以使用！

不利的一面，querySelector is a bit slower，但我認爲這是值得的。

來源

2015-10-14 21:40:01

如何訪問document.getElementsByClassName的屬性

回答

相關問題