如何获取具有多个类的元素

说我有这个：

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

如何选择此div元素？

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

那行不通。

我知道在jQuery中是$('.class1.class2')，但我想使用普通JavaScript进行选择。

它实际上与jQuery非常相似：

document.getElementsByClassName('class1 class2')

MDN文档getElementsByClassName

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，您可以像上面那样传递预选对象。

本文地址：http://javascript.askforanswer.com/ruhehuoqujuyouduogeleideyuansu.html
文章标签：class , element , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载