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

MDN Doc getElementsByClassName

Answer 2

带有标准类选择器的

querySelectorAll也适用于此。

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

Answer 3

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

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

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

BTW，而.class1.class2表示两个类的元素，.class1 .class2（注意空白）表示层次结构 - 和类class2的元素是内部带有类class1的en元素：

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

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

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

我需要找到课程所在的元素＆＃34; zA yO＆＃34; OR ＆＃34; zA zE＆＃34;

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

（一个以“＆＃39; abc＆＃39;和样式！=＆＃39;显示：无＆＃39;”开头的课程

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

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

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

完美无缺！请注意，您不必像上面那样传递document.querySelector传入预先选择的对象。

Answer 7

AND （两个类）

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

NAND （不是两个类）

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

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

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

Answer 8

const matches = document.querySelectorAll("div.note, div.alert");

know more

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

8 个答案: