如何访问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的属性

回答

相关问题