Cómo obtener elementos con múltiples clases

Digamos que tengo esto:

¿Cómo selecciono este elemento div ?

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

Eso no funciona.

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

En realidad es muy similar a jQuery:

 document.getElementsByClassName('class1 class2') 

MDN Doc getElementsByClassName

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 está interesado en la primera, puede usar:

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

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

 
: :

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

 
: :

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

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 elemento primario 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 en un objeto preseleccionado.

html

 

A heading with class="example"

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

De acuerdo, este código hace exactamente lo que necesita:

HTML:

 
nothing happens hear.
This element will receive yout code.
nothing happens hear.

JS:

 function getElementMultipleClasses() { var x = document.getElementsByClassName("class1 class2"); x[0].innerHTML = "This is the element you want"; } getElementMultipleClasses(); 

¡Espero eso ayude! 😉