假设我有这个:
<div class="class1 class2"></div>
如何选择这个div元素?
document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]
这是行不通的。
我知道,在jQuery中,它是$('.class1.class2'),但我想用香草JavaScript选择它。
假设我有这个:
<div class="class1 class2"></div>
如何选择这个div元素?
document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]
这是行不通的。
我知道,在jQuery中,它是$('.class1.class2'),但我想用香草JavaScript选择它。
它实际上非常类似于jQuery:
document.getElementsByClassName('class1 class2')
MDN文档getElementsByClassName
实际上@bazzlebrush的回答和@filoxo的评论对我帮助很大。
我需要找到类可以是“zA yO”或“zA zE”的元素
使用jquery,我首先选择所需元素的父元素:
(一个div,类以'abc'开头,style != 'display:none')
var tom = $('div[class^="abc"][style!="display: none;"]')[0];
然后是该元素的期望子元素:
var ax = tom.querySelectorAll('.zA.yO, .zA.zE');
作品完美!注意,你不需要做文档。querySelector可以像上面一样传入一个预先选择的对象。
正如@filoxo所说,您可以使用document.querySelectorAll。
如果你知道你要找的类只有一个元素,或者你只对第一个感兴趣,你可以使用:
document.querySelector('.class1.class2');
顺便说一下,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
html
<h2 class="example example2">A heading with class="example"</h2>
javascritp代码
var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";
querySelectorAll()方法以静态NodeList对象的形式返回文档中与指定CSS选择器匹配的所有元素。
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();
希望能有所帮助!;)
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)");