4

Buenas,

Quería seleccionar con JS los elementos no por el ID, sino por la class, dado que es una estructura que se repite varias veces en el código y me obligaría a crear ID distintas para cada vez que se repite la estructura. He probado con esto:

<div id="seccion_logro_mensajes" class="seccion_logro">
    <div id="total_mensajes" class="imagen_logro">
         <img src="" alt="">
    </div>
<div id="info_logro">
    <div class="tracking_logro">
        <p>Numéro de mensajes</p>
        <p><?php echo $total_mensajes ?>/1.000</p>
    </div>
    <div class="tracking_logro">
       <p><i>Logro desbloqueado al <?php echo ($total_mensajes/1000)*100 ?>%</i></p>
    </div>
    <div class="progreso_logro">
       <div class="fondo_logro">
           <div id="barra_logro_mensajes">

           </div>
       </div>
    </div>
</div>
</div>

La única id que tendría que usar sería barra_logro_mensajes porque varía para cada caso. Pensaba que podía usar getElementsByClass pero no me funciona. No sé si hay alguna otra forma para escoger esos elementos y evitar crear una id distinta para cada caso.

1 respuesta 1

8

Para seleccionar todos los elementos de una clase particular el método es:

document.getElementsByClassName("tracking_logro");

Esto devolverá una colección con todos los elementos que tengan la clase tracking_logro. Nota: Si se quieren traer todos los elementos que cumplan con 2 clases, se pueden pasar ambas como parámetros, separados por un espacio.


También existe una alternativa:

document.querySelectorAll(".tracking_logro");

En este caso el parámetro del método es un selector CSS. Con lo cual, se puede acceder a un mayor número de elementos.

Nota: En ambos casos, no se restringe el uso desde el elemento document. Sino que puede pasarse cualquier otro elemento y buscar entre sus hijos.


Diferencias para los curiosos:

  • getElementsByClassName devuelve un HTMLCollection de elementos vivos. Mientras que querySelectorAll devuelve un NodeList de elementos estáticos.

Esto se puede ilustrar en el siguiente ejemplo:

Dado el html:

<div class="elemento"></div>
<div class="elemento"></div>
<div class="elemento"></div>
<div class="elemento"></div>

Entonces, desde js:

let estaticos = document.querySelectorAll(".elemento");
let vivos = document.getElementsByClassName("elemento");

estaticos[1].className = "diferente";    //Mutando la Clase
vivos[2].className = "ladilla-feliz";    //Mutando la Clase

estaticos.length; // -> 4
vivos.length;     // -> 2!

La lista de elementos estáticos sigue manteniendo referencia a todos los elementos de la lista a pesar que algunos ya no cumplan con ser de la clase elemento.

Mientras que la lista de elementos vivos, solo mantiene referencia a los elementos que siguen manteniendo la clase.

  • querySelectorAll devuelve una lista que permite ser iterada usando forEach().

 

document.querySelectorAll(".elemento").forEach(
  elemento => console.log("Funciona!")         // ->  Funciona! x4
);
document.getElementsByClassName("elemento").forEach(
  elemento => console.log("No :(")            //  ->  forEach is not a function..
);
  • querySelectorAll es soportado desde IE 8, aunque en él solo pueden usarse selectores CSS 2.0.
2
  • ¡Muchas gracias! Lo único que no consigo coger el width de los elementos del ejemplo. He probado con document.getElementsByClassName("tracking_logro").width;, document.getElementsByClassName("tracking_logro").style.width; y document.getElementsByClassName("tracking_logro").offsetWidth; y nada
    – user27826
    el 2 abr. 2017 a las 11:47
  • El método devuelve un Array con todos los elementos. Al hacer por ejemplo ".style", lo estarías haciendo sobre el elemento Array, no sobre el elemento HTML. Deberías recorrer el Array y acceder a la propiedad del elemento 1 por 1. Como nota adicional, no podrás acceder al width del elemento si antes no le pusiste algún valor por css, salvo uses otro método: window.getComputedStyle
    – Francute
    el 2 abr. 2017 a las 11:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.