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

Question

假设有这样一个例子：

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

我该如何选择这个div元素？

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

那样做不起作用。

我知道在 jQuery 中是 $('.class1.class2')，但我想使用纯 JavaScript 来选择它。

- Nathan Prometheus

Answer 1

AND (两个类都满足)

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

OR (至少一个类别)

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)");

- Bitterblue

---

太棒了，应该排在首位。 - Hackstaar

var list = document.querySelector('.remove_fields.dynamic, .remove_fields.existing') 根据条件获取 element，如果其中一个组合存在，则获取它，但如果两个组合都存在，则不获取。 - Ahmad hamza

非常好的回答和简洁的帮助，谢谢！ - Piotr

我只是想在其他答案之外添加一些内容。如果您想选择特定标签类型（例如<img>）的元素，这些元素属于多个类，则可以按以下格式在querySelectorAll()中指定标签名称以及类名：document.querySelectorAll("tagname.class1.class2.class3")。 - letterphile

Answer 2

实际上，它与jQuery非常相似：

document.getElementsByClassName('class1 class2')

MDN文档 getElementByClassName

- Joe

---

获取只有一个指定类的元素，这个类是由@Joe指定的，怎么做呢？ - CodeGuru

据我记得，类名应该没有"."。document.getElementsByClassName('class1 class2')。 - Misha Beskin

在给定的 MDN 链接中，在 getElements 参数中，类名前没有使用点。我在 Firefox 和 Chrome 上检查了这一点，它可以在没有点的情况下工作，但是有点的情况下不能工作。 - Gaurav Singh

Answer 3

使用标准类选择器的querySelectorAll同样也适用于此。

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

- filoxo

---

那样行不通，需要使用 document.querySelectorAll('.class1, .class2');。 - bazzlebrush

@bazzlebrush你的选择器将会选取具有.class1或.class2类名的元素，而上面的选择器只会选取同时具备这两个类名的元素，并且它确实可以工作。请查看此测试的控制台输出：https://jsfiddle.net/0ph1p9p2/ - filoxo

好的，我的错，我误解了OP想要做什么。但是在我看来，更典型的用例是希望选择具有类或两者都具有的元素，在这种情况下，我的示例就是您想要的。 - bazzlebrush

Answer 4

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

如果您知道只有一个带有所需类的元素，或者您只对第一个元素感兴趣，则可以使用：

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

顺便提一下，.class1.class2 表示具有 两个 类的元素，而 .class1 .class2（注意空格）表示层次结构 - 具有 class class1 的元素内部的带有 class class2 的元素：

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

如果你想强制检索一个直接的子元素，可以使用>符号 (.class1 > .class2)：

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

要了解有关选择器的全部信息：
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

- guyaloni

Answer 5

Okay this code does exactly what you need:

HTML:

<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>

JS:

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

希望能帮到你！;)

- Gabriel Marques

Answer 6

html

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

javascritp代码

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

querySelectorAll() 方法返回文档中与指定 CSS 选择器匹配的所有元素，作为一个静态 NodeList 对象。

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

还可以了解更多 https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== 谢谢 ==

- Md. Abu Sayed

Answer 7

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

我需要找到类可以是“zA yO”或者“zA zE”的元素。

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

（一个class以'abc'开头且style！='display:none'的div）

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

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

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

非常完美！请注意，您不必使用document.querySelector，您可以像上面那样传递一个预先选择的对象。

- user2677034