如何获取多个类的元素

Question

假设我有这个：

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

如何选择这个 div 元素？

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

那是行不通的。

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

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

Answer 2

它实际上与 jQuery 非常相似：

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

Answer 3

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

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

Answer 4

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

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

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

BTW，而 .class1.class2 表示带有 < 的元素em>两个类，.class1 .class2（注意空格）表示一个层次结构 - 类class2的元素位于类的元素内>class1：

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

如果你愿意的话要强制检索直接子级，请使用 > 符号 (.class1 > .class2)：

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

有关选择器的完整信息：
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

Answer 5

好的，这段代码正是您所需要的：

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

希望它有帮助！ ;)

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

== 谢谢 ==

Answer 7

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

我需要找到类可能为“zA yO”OR“zA zE”的元素

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

类以“abc”开头的 div 和style != 'display:none')

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

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

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

完美运行！请注意，您不必执行 document.querySelector 您可以像上面一样传递预先选择的对象。