Javascript – 如何获得多个类的元素

说我有这个：

<div class="class1 class2"></div>

我如何select这个div元素？

 document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]

这是行不通的。我知道，在jQuery中，它是$('.class1.class2') ，但我想用香草JavaScript来select它。

它实际上非常类似于jQuery：

 document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

具有标准类select器的querySelectorAll也适用于此。

 document.querySelectorAll('.class1.class2');

其实@bazzlebrush的答案和@filoxo的评论帮了我很多。

我需要find类可能是“zA yO” 或 “zA zE”

使用jQuery我首先select所需元素的父级：

（一个以'abc'和style！='display：none'开头的div）

 var tom = $('div[class^="abc"][style!="display: none;"]')[0];

那么这个元素的理想孩子：

 var ax = tom.querySelectorAll('.zA.yO, .zA.zE');

完美的作品！注意你不必做document.querySelector，你可以像上面那样通过一个预先选定的对象。

正如@filoxo所说，你可以使用document.querySelectorAll 。

如果您知道只有一个元素在您正在寻找的类中，或者您只对第一个元素感兴趣，则可以使用：

 document.querySelector('.class1.class2');

顺便说一句，而.class1.class2表示一个元素有两个类， .class1 .class2 （注意空白）表示一个层次结构 – 和class class2元素，

 <div class='class1'> <div> <div class='class2'> : :

如果你想强制检索一个直接的孩子，使用> sign（ .class1 > .class2 ）：

 <div class='class1'> <div class='class2'> : :