说我有这个:
<div class="class1 class2"></div>
如何选择此div
元素?
document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]
那行不通。
我知道在jQuery中是$('.class1.class2')
,但我想使用普通JavaScript进行选择。
它实际上与jQuery非常相似:
document.getElementsByClassName('class1 class2')
AND (both classes)
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)
var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");
NAND (not both classes)
var list = document.querySelectorAll(":not(.class1),:not(.class2)");
NOR (not any of the two classes)
var list = document.querySelectorAll(":not(.class1):not(.class2)");
querySelectorAll with standard class selectors also works for this.
document.querySelectorAll('.class1.class2');
As @filoxo said, you can use 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');
顺便说一句,虽然.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,您可以像上面那样传递预选对象。
文章标签:class , element , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!