Jak zdobyć elementy z wieloma klasami

Powiedz, że mam to:

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

Jak wybrać ten divelement?

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

To nie działa.

Wiem, że w jQuery tak jest $('.class1.class2'), ale chciałbym to wybrać za pomocą waniliowego JavaScript.

W rzeczywistości jest bardzo podobny do jQuery:

document.getElementsByClassName('class1 class2')

Dokument MDN getElementsByClassName

AND (obie klasy)

var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");

LUB (co najmniej jedna klasa)

var list = document.querySelectorAll(".class1,.class2");

XOR (jedna klasa, ale nie druga)

var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");

NAND (nie obie klasy)

var list = document.querySelectorAll(":not(.class1),:not(.class2)");

NOR (nie żadna z dwóch klas)

var list = document.querySelectorAll(":not(.class1):not(.class2)");

W tym przypadku działa również querySelectorAll ze standardowymi selektorami klas.

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

Jak powiedział @filoxo, możesz użyć document.querySelectorAll.

Jeśli wiesz, że w klasie, której szukasz, jest tylko jeden element lub interesuje Cię tylko ten pierwszy, możesz użyć:

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

BTW, while .class1.class2wskazuje element z obiema klasami, .class1 .class2(zwróć uwagę na białą spację) wskazuje na hierarchię - i element z klasą, class2który znajduje się wewnątrz elementu en z klasą class1:

<div class='class1'>
  <div>
    <div class='class2'>
      :
      :

A jeśli chcesz wymusić pobranie bezpośredniego dziecka, użyj >znaku ( .class1 > .class2):

<div class='class1'>
  <div class='class2'>
    :
    :

Pełne informacje na temat selektorów:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

html

<h2 class="example example2">A heading with class="example"</h2>

kod javascritp

var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";

Metoda querySelectorAll () zwraca wszystkie elementy w dokumencie, które pasują do określonego selektora CSS, jako statyczny obiekt NodeList.

Obiekt NodeList reprezentuje kolekcję węzłów. Dostęp do węzłów można uzyskać za pomocą numerów indeksu. Indeks zaczyna się od 0.

dowiedz się również więcej o https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Dziękuję ==

OK, ten kod robi dokładnie to, czego potrzebujesz:

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

Mam nadzieję, że to pomoże! ;)

właściwie odpowiedź @bazzlebrush i komentarz @filoxo bardzo mi pomogły.

Musiałem znaleźć elementy, w których klasa mogłaby być „zA yO” LUB „zA zE”

Używając jquery najpierw wybieram rodzica żądanych elementów:

(element div z klasą zaczynającą się od „abc” i stylem! = „display: none”)

var tom = $('div[class^="abc"][style!="display: none;"]')[0];                   

następnie pożądane dzieci tego elementu:

var ax = tom.querySelectorAll('.zA.yO, .zA.zE');

działa świetnie! zauważ, że nie musisz robić document.querySelector, możesz jak powyżej przekazać wstępnie wybrany obiekt.