Cómo obtener elementos con múltiples clases

133

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.

Nathan Prometheus
fuente

Respuestas:

182

En realidad es muy similar a jQuery:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

Joe
fuente
¿Qué hay de obtener un elemento con una sola clase, que es la especificada @Joe?
CodeGuru
1
como recuerdo las clases vienen sin "." document.getElementsByClassName ('class1 class2')
Misha Beskin el
2
En el enlace MDN dado, el punto no se usa antes de los nombres de clase en el parámetro getElements. Lo comprobé en Firefox y Chrome y funcionó sin puntos, pero no con puntos.
Gaurav Singh
38

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)");
Azul amargo
fuente
Esto es fantástico. Debería ser superior.
Hackstaar
36

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

document.querySelectorAll('.class1.class2');
filoxo
fuente
2
Eso no funciona, tiene que serlo document.querySelectorAll('.class1, .class2');
bazzlebrush
9
@bazzlebrush su selector capturaría elementos con .class1OR .class2, mientras que el anterior solo capturaría elementos con ambas clases y de hecho funciona. Vea el resultado de la consola de esta prueba: jsfiddle.net/0ph1p9p2
filoxo
Ok, mi mal, entendí mal lo que el OP quería hacer. Pero en mi opinión, un caso de uso más típico es querer seleccionar elementos que tengan clase o ambas, en cuyo caso mi ejemplo es lo que quieres.
bazzlebrush
12

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

guyaloni
fuente
1

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

Md. Abu Sayed
fuente
1

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

Gabriel Marques
fuente
0

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.

usuario2677034
fuente