Pregunta Cómo obtener elementos con múltiples clases


Digamos que tengo esto:

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

¿Cómo selecciono esto? div ¿elemento?

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

Eso no funciona.

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


75
2017-08-25 02:44


origen


Respuestas:


En realidad es muy similar a jQuery:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName


126
2017-08-25 02:47



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

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

14
2018-05-26 01:48



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 .class1.class2 indica un elemento con ambos clases, .class1 .class2 (observe el espacio en blanco) indica una jerarquía - y elemento con clase class2 que está adentro en elemento con clase class1:

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

Y si quiere forzar la recuperación de un niño directo, use > firmar (.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


3
2017-10-20 09:00



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.


0
2018-04-30 21:14



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 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 aprende más sobre https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Gracias ==


0
2017-07-18 05:50