Cómo obtener elementos con múltiples clases

Digamos que tengo esto:

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

¿Cómo selecciono este divelemento?

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

Eso no funciona.

Sé que, en jQuery, lo es $('.class1.class2'), pero me gustaría seleccionarlo con JavaScript de vainilla.

En realidad es muy similar a jQuery:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

Y (ambas clases)

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

O (al menos una clase)

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

XOR (una clase pero no la otra)

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

NAND (no ambas clases)

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

NOR (no cualquiera de las dos clases)

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

querySelectorAll con selectores de clase estándar también funciona para esto.

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

Como dijo @filoxo, puedes usar document.querySelectorAll.

Si sabe que solo hay un elemento con la clase que está buscando, o si solo le interesa el primero, puede usar:

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

Por cierto, mientras .class1.class2indica un elemento con ambas clases, .class1 .class2(observe el espacio en blanco) indica una jerarquía, y un elemento con clase class2que está dentro de un elemento con clase class1:

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

Y si desea forzar la recuperación de un hijo directo, use >sign ( .class1 > .class2):

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

Para obtener información completa sobre los selectores:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

html

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

código javascritp

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

El método querySelectorAll () devuelve todos los elementos en el documento que coinciden con un selector (es) CSS especificado, como un objeto NodeList estático.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

también aprenda más sobre https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Gracias ==

Bien, este código hace exactamente lo que necesitas:

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

¡Espero eso ayude! ;)

en realidad la respuesta de @bazzlebrush y el comentario de @filoxo me ayudaron mucho.

Necesitaba encontrar los elementos donde la clase podría ser "zA yO" O "zA zE"

Usando jquery, primero selecciono el padre de los elementos deseados:

(un div con clase que comienza con 'abc' y style! = 'display: none')

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

entonces los hijos deseados de ese elemento:

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

¡funciona perfectamente! tenga en cuenta que no tiene que hacer document.querySelector, como puede pasar anteriormente en un objeto preseleccionado.