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

假设我有这个：

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

这是行不通的

---

我知道，在jQuery中，它是

$（'.class1.class2'）

，但我想用香草JavaScript来选择它。

它实际上与jQuery非常相似：

document.getElementsByClassName('class1 class2')

使用标准的类选择器也适用于此

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

---

实际上，@bazzlebrush的回答和@filoxo的评论对我帮助很大

我需要找到类可以是“zayo”或“zaze”的元素

使用jquery，我首先选择所需元素的父元素：

（一个div，其类以'abc'开头，样式为！='display:none'）

然后，该元素所需的子元素：

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

---

很好用！注意，您不必执行document.querySelector，您可以如上所述传入一个预选对象。

正如@filoxo所说，您可以使用

document.querySelector all

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

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

顺便说一句，虽然

.class1.class2

表示一个包含两个类的元素，

.class1.class2

（注意空格）表示一个层次结构，并且元素包含class

class2

，它位于包含class

class1

的en元素内：

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

有关选择器的完整信息：
html

querySelectorAll（）方法将文档中与指定CSS选择器匹配的所有元素作为静态节点列表对象返回。

节点列表对象表示节点的集合。可以通过索引号访问节点。索引从0开始。

还要了解更多关于

---

==谢谢==

好的，这段代码正好满足您的需要：

HTML:

希望能有帮助！；）

和（两个班级）

或（至少一个类别）

XOR（一个类而不是另一个）

NAND（不是两个类）

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

---

这不起作用，它需要是

document.querySelectorAll（'.class1.class2'）

@bazzlebrush您的选择器将捕获具有

.class1

或

.class2

的元素，而上面的选择器将仅捕获具有这两个类的元素，并且实际上有效。查看这个测试的控制台输出：好吧，我的错，我误解了OP想要做什么。但在我看来，一个更典型的用例是要选择具有类或两个类的元素，在这种情况下，我的示例就是您想要的。如何只使用一个类来获取元素，即指定的@Joeas，因为我记得这些类在给定的MDN链接中没有“document.getElementsByClassName（'class1 class2'），getElements参数中的类名前不使用点。我在firefox和chrome上都查过了，它没有点，但没有点。这太棒了。应位于顶部。

var list=document.querySelector（'.remove_fields.dynamic，.remove_fields.existing'）

以获取

元素，前提是该元素存在任何组合，但不同时存在这两种组合。非常好的答案和简明的帮助，谢谢！
document.querySelector('.class1.class2');

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

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

<h2 class="example example2">A heading with class="example"</h2>

var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";

<div class="class1">nothing happens hear.</div>

<div class="class1 class2">This element will receive yout code.</div>

<div class="class1">nothing happens hear.</div>

function getElementMultipleClasses() {
    var x = document.getElementsByClassName("class1 class2");
    x[0].innerHTML = "This is the element you want";
}
getElementMultipleClasses();

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

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

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

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

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