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


132

说我有这个:

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

如何选择此div元素?

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

那行不通。

我知道在jQuery中是$('.class1.class2'),但我想使用普通JavaScript进行选择。

Answers:


180

实际上,它与jQuery非常相似:

document.getElementsByClassName('class1 class2')

MDN文档getElementsByClassName


有关获取元素只有一个类,它是指定@Joe一个什么
CodeGuru

1
我记得上课时没有“。” document.getElementsByClassName('class1 class2')
Misha Beskin

2
在给定的MDN链接中,在getElements参数中的类名称之前不使用点。我在Firefox和chrome上都进行了检查,它没有点,但是没有点。
Gaurav Singh,

38

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

这是太棒了。应该在最前面。
Hackstaar

36

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

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

2
那行不通,应该是 document.querySelectorAll('.class1, .class2');
bazzlebrush

8
@bazzlebrush您的选择器将使用.class1OR 捕获元素.class2,而上面的选择器将仅捕获两个类的元素,并且实际上可以工作。请参阅此测试的控制台输出:jsfiddle.net/0ph1p9p2
filoxo

好的,我不好,我误会了OP想要做什么。但是IMO一个更典型的用例是要选择具有类或两者都有的元素,在这种情况下,我的示例就是您想要的。
bazzlebrush

12

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

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

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

顺便说一句,虽然.class1.class2表示同时具有两个类的元素,.class1 .class2(请注意空格)表示层次结构-并且具有类的class2元素位于具有class的en元素内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


1

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的更多信息

==谢谢==


1

好的,这段代码完全可以满足您的需求:

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

希望能帮助到你!;)


0

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

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

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

(一个以'abc'开头且样式为!='display:none'的类的div)

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

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

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

完美的作品!注意,您不必执行document.querySelector,您可以像上面那样传递预选对象。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.