Answers:
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)");
具有标准类选择器的querySelectorAll也适用于此。
document.querySelectorAll('.class1.class2');
document.querySelectorAll('.class1, .class2');
.class1
OR 捕获元素.class2
,而上面的选择器将仅捕获两个类的元素,并且实际上可以工作。请参阅此测试的控制台输出:jsfiddle.net/0ph1p9p2
正如@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
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的更多信息
==谢谢==
好的,这段代码完全可以满足您的需求:
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();
希望能帮助到你!;)
实际上@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,您可以像上面那样传递预选对象。