Jak zdobyć elementy z wieloma klasami

136

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.

Nathan Prometheus
źródło

Odpowiedzi:

183

W rzeczywistości jest bardzo podobny do jQuery:

document.getElementsByClassName('class1 class2')

Dokument MDN getElementsByClassName

Joe
źródło
a co z otrzymaniem elementu z tylko jedną klasą, która jest określona @Joe
CodeGuru
1
jak pamiętam zajęcia przychodzą bez "." document.getElementsByClassName ('class1 class2')
Misha Beskin
2
W podanym łączu MDN kropka nie jest używana przed nazwami klas w parametrze getElements. Sprawdziłem to na Firefoxie i Chrome i działało bez kropek, ale nie z kropkami.
Gaurav Singh
42

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)");
Bitterblue
źródło
To jest fantastyczne. Powinien być top.
Hackstaar
37

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

document.querySelectorAll('.class1.class2');
filoxo
źródło
2
To nie działa, musi być document.querySelectorAll('.class1, .class2');
bazzlebrush
9
@bazzlebrush Twój selektor przechwyciłby elementy z .class1OR .class2, podczas gdy ten powyżej przechwyciłby tylko elementy z obiema klasami i faktycznie działa. Zobacz konsolowe wyniki tego testu: jsfiddle.net/0ph1p9p2
filoxo
Okej, źle, źle zrozumiałem, co chciał zrobić OP. Ale IMO bardziej typowym przypadkiem użycia jest chęć wybrania elementów, które mają jedną klasę lub obie, w takim przypadku mój przykład jest tym, czego chcesz.
bazzlebrush
12

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

guyaloni
źródło
1

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ę ==

Md. Abu Sayed
źródło
1

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

Gabriel Marques
źródło
0

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.

user2677034
źródło