Question

我正在尝试检查是否在DOM内部使用了css类。所以，我有

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

当我打印出x时，我得到一个[对象NodeList]用于页面上存在的类和不用的类。我可以访问x的属性吗？像标签名称或其他东西。如果有人能告诉我x的不同属性以及我可以访问它们的方式，那将会很棒。

谢谢：）

Answer 1

请注意它是复数：

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

您需要迭代x以获取各个元素：

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

  console.log(element);
}

Answer 2

如果您只想检查文档中是否存在类，也可以使用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及更高版本。

Answer 3

我几乎总是使用document.querySelector（其中：＆＃34;返回文档中与指定的选择器组匹配的第一个元素＆＃34; ），它返回一个元素对象并且它。

我不知道为什么，但在我的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，但我认为这是值得的。