假设我有这个:

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

如何选择这个div元素?

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

这是行不通的。

我知道,在jQuery中,它是$('.class1.class2'),但我想用香草JavaScript选择它。


当前回答

好的,这段代码完全符合你的需要:

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

希望能有所帮助!;)

其他回答

好的,这段代码完全符合你的需要:

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

希望能有所帮助!;)

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

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

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

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

==谢谢你

它实际上非常类似于jQuery:

document.getElementsByClassName('class1 class2')

MDN文档getElementsByClassName