如何获取具有多个类的元素

Question

说我有这个:

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

如何选择此div元素？

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

这不起作用.

我知道,在jQuery中,它是$('.class1.class2'),但我想用vanilla JavaScript选择它.

Answer 1

它实际上与jQuery非常相似:

document.getElementsByClassName('class1 class2')

Answer 2

AND （两个类）

var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");

或 （至少一类）

var list = document.querySelectorAll(".class1,.class2");

XOR （一类但不是另一类）

var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");

NAND （不是两个类）

var list = document.querySelectorAll(":not(.class1),:not(.class2)");

NOR （不是两个类别中的任何一个）

var list = document.querySelectorAll(":not(.class1):not(.class2)");

这是太棒了。应该是顶级的。 (10认同)
我只是想在其他答案中添加一些内容。如果要选择特定标记类型的元素，例如属于多个类的“<img>”，那么您可以按照以下格式“document.querySelectorAll”在“querySelectorAll()”中指定标记名称和类名称(“标签名.class1.class2.class3”)` (2认同)

Answer 3

带有标准类选择器的querySelectorAll也适用于此.

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

@bazzlebrush您的选择器将使用`.class1`或`.class2`捕获元素,而上面的那个只捕获具有*两个*类的元素,并且确实可以工作.请参阅此测试的控制台输出:https://jsfiddle.net/0ph1p9p2/ (5认同)
这是不行的,它需要`document.querySelectorAll(" class1的,.class2' .);` (2认同)

Answer 4

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

如果您知道您正在寻找的课程只有一个元素,或者您只对第一个元素感兴趣,您可以使用:

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

BTW,while .class1.class2表示具有两个类的元素.class1 .class2(注意空白)表示层次结构 - 和带有类的元素,class2该元素位于带有类的en元素内class1:

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

如果要强制检索直接子项,请使用>sign(.class1 > .class2):

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