Come ottenere elementi con più classi

Dì che ho questo:

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

Come seleziono questo divelemento?

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

Non funziona.

Lo so, in jQuery, lo è $('.class1.class2'), ma mi piacerebbe selezionarlo con JavaScript vanilla.

In realtà è molto simile a jQuery:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

AND (entrambe le classi)

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

OR (almeno una classe)

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

XOR (una classe ma non l'altra)

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

NAND (non entrambe le classi)

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

NOR (nessuna delle due classi)

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

querySelectorAll con selettori di classe standard funziona anche per questo.

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

Come ha detto @filoxo, puoi usare document.querySelectorAll .

Se sai che c'è un solo elemento con la classe che stai cercando, oppure ti interessa solo il primo, puoi usare:

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

BTW, mentre .class1.class2indica un elemento con entrambe le classi, .class1 .class2(notare lo spazio bianco) indica una gerarchia - e un elemento con classe class2che si trova all'interno di un elemento con classe class1:

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

E se vuoi forzare il recupero di un figlio diretto, usa >sign ( .class1 > .class2):

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

Per informazioni complete sui selettori:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

html

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

codice javascritp

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

Il metodo querySelectorAll () restituisce tutti gli elementi nel documento che corrispondono a uno o più selettori CSS specificati, come un oggetto NodeList statico.

L'oggetto NodeList rappresenta una raccolta di nodi. È possibile accedere ai nodi tramite numeri di indice. L'indice inizia da 0.

scopri anche di più su https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Grazie ==

Ok, questo codice fa esattamente ciò di cui hai bisogno:

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

Spero che sia d'aiuto! ;)

in realtà la risposta di @bazzlebrush e il commento di @filoxo mi hanno aiutato molto.

Avevo bisogno di trovare gli elementi in cui la classe poteva essere "zA yO" OR "zA zE"

Usando jquery seleziono prima il genitore degli elementi desiderati:

(un div con classe che inizia con 'abc' e stile! = 'display: none')

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

quindi i figli desiderati di quell'elemento:

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

funziona perfettamente! nota che non devi fare document.querySelector puoi come sopra passare in un oggetto preselezionato.