Javascript - cómo obtener los elementos con múltiples clases

Question

Decir que tengo esto:

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

¿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 vainilla.

Answer 1

En realidad es muy similar a jQuery:

document.getElementsByClassName('class1 class2') 

MDN Doc getElementsByClassName

Answer 2

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

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

Answer 3

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

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

usando jQuery que seleccionar en primer lugar a los padres de los elementos deseados:

(un div con clase que empiezan con 'abc' y el estilo = '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 a la perfección! tenga en cuenta que no tiene que hacer document.querySelector como puede pasar en un objeto preseleccionado.

Answer 4

Como dijo @filoxo, puede usar document.querySelectorAll.

Si sabe que sólo hay un elemento con la clase que busca, o que están interesados ​​sólo en la primera de ellas, se puede utilizar:

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

Por cierto, mientras .class1.class2 indica un elemento con ambos clases, .class1 .class2 (nótese el espacio en blanco) indica una jerarquía - y el elemento con la clase class2 que se encuentra dentro en elemento con la clase class1:

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

Y si desea forzar la recuperación de un niño directa, utilizar > signo (.class1 > .class2):

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

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