Javascript 如何获取具有多个类的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7184562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get elements with multiple classes
提问by Nathan Prometheus
Say I have this:
说我有这个：
<div class="class1 class2"></div>
How do I select this divelement?
我如何选择这个div元素？
document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]
That does not work.
那行不通。
I know that, in jQuery, it is $('.class1.class2'), but I'd like to select it with vanilla JavaScript.
我知道，在 jQuery 中，它是$('.class1.class2')，但我想用 vanilla JavaScript 选择它。
回答by Joe
It's actually very similar to jQuery:
它实际上与 jQuery 非常相似：
document.getElementsByClassName('class1 class2')
回答by filoxo
querySelectorAllwith standard class selectors also works for this.
带有标准类选择器的querySelectorAll也适用于此。
document.querySelectorAll('.class1.class2');
回答by Bitterblue
AND(both classes)
AND （两个类）
var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");
OR(at least one class)
或（至少一类）
var list = document.querySelectorAll(".class1,.class2");
XOR(one class but not the other)
XOR （一类但不是另一类）
var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");
NAND(not both classes)
NAND （不是两个类）
var list = document.querySelectorAll(":not(.class1),:not(.class2)");
NOR(not any of the two classes)
NOR （不是两个类别中的任何一个）
var list = document.querySelectorAll(":not(.class1):not(.class2)");
回答by guyaloni
As @filoxo said, you can use document.querySelectorAll.
正如@filoxo 所说，您可以使用document.querySelectorAll.
If you know that there is only one element with the class you are looking for, or you are interested only in the first one, you can use:
如果您知道您要查找的类只有一个元素，或者您只对第一个元素感兴趣，则可以使用：
document.querySelector('.class1.class2');
BTW, while .class1.class2indicates an element with bothclasses, .class1 .class2(notice the whitespace) indicates an hierarchy - and element with class class2which is inside en element with class class1:
顺便说一句，虽然.class1.class2表示具有两个类的元素，.class1 .class2（注意空格）表示层次结构 - 和具有 class 的元素，class2该元素位于具有 class 的 en 元素内class1：
<div class='class1'>
<div>
<div class='class2'>
:
:
And if you want to force retrieving a direct child, use >sign (.class1 > .class2):
如果您想强制检索直接子代，请使用>符号 ( .class1 > .class2)：
<div class='class1'>
<div class='class2'>
:
:
For entire information about selectors:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp
有关选择器的完整信息：https:
//www.w3schools.com/jquery/jquery_ref_selectors.asp
回答by Md. Abu Sayed
html
html
<h2 class="example example2">A heading with class="example"</h2>
javascritp code
脚本代码
var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";
The querySelectorAll() method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.
querySelectorAll() 方法将文档中与指定 CSS 选择器匹配的所有元素作为静态 NodeList 对象返回。
The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.
NodeList 对象表示节点的集合。可以通过索引号访问节点。索引从 0 开始。
also learn more about https://www.w3schools.com/jsref/met_document_queryselectorall.asp
还可以了解有关https://www.w3schools.com/jsref/met_document_queryselectorall.asp 的更多信息
== Thank You ==
==谢谢==
回答by Gabriel Marques
Okay this code does exactly what you need:
好的，这段代码完全符合您的需要：
HTML:
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:
JS：
function getElementMultipleClasses() {
var x = document.getElementsByClassName("class1 class2");
x[0].innerHTML = "This is the element you want";
}
getElementMultipleClasses();
Hope it helps! ;)
希望能帮助到你！;)
回答by user2677034
actually @bazzlebrush 's answer and @filoxo 's comment helped me a lot.
实际上@bazzlebrush 的回答和@filoxo 的评论对我帮助很大。
I needed to find the elements where the class could be "zA yO" OR"zA zE"
我需要找到类可以是“zA yO”或“zA zE”的元素
Using jquery I first select the parent of the desired elements:
使用 jquery 我首先选择所需元素的父级：
(a div with class starting with 'abc' and style != 'display:none')
（类以 'abc' 开头且样式为 != 'display:none' 的 div）
var tom = $('div[class^="abc"][style!="display: none;"]')[0];
then the desired children of that element:
然后是该元素的所需子项：
var ax = tom.querySelectorAll('.zA.yO, .zA.zE');
works perfectly! note you don't have to do document.querySelector you can as above pass in a pre-selected object.
完美运行！请注意，您不必执行 document.querySelector 您可以如上所述传入预先选择的对象。
