Saltar al contenido

HTML getElementsByClassName devuelve HTMLCollection con una longitud de 0

Solución:

Eso es porque el getElementsByClassName devuelve un En Vivo colección. los length propiedad del objeto es 0 porque en ese momento no hay ningún elemento con ese className en el DOM. Dado que la consola muestra la representación en vivo de un objeto, muestra todos los elementos coincidentes cuando los elementos se agregan al DOM.

El analizador DOM analiza los documentos de arriba a abajo, cuando llega a una etiqueta, la analiza y agrega la representación DOM de la misma (una instancia de HTMLElement interfaz) al modelo de objetos de documento. Debe mover la etiqueta de secuencia de comandos al final de body etiquetar o escuchar DOMContentLoaded evento que se activa cuando el documento HTML inicial se ha cargado y analizado por completo.

Utilizando getElementsByClassName() devolverá todos los elementos con ese nombre de clase en un documento como NodeList. Este objeto representa una colección de nodos a los que se puede acceder mediante números de índice, que comienza en 0. Para acceder a los elementos de NodeList, deberá utilizar un bucle.

Cuando usted console.log(document.getElementsByClassName('gtableheader').length);
ves 0 porque cuando lo ejecutas no hay ningún elemento con clase gtableheader. Puede ver los elementos en la consola porque document.getElementsByClassName() devuelve una colección en vivo que se actualiza cuando se agregan los nuevos elementos.

Además, en el código que está utilizando y la longitud es 0, puede utilizar el siguiente código para acceder al nombre de la clase.

document.getElementsByClassName('gtableheader')[0].style.color="red";

Si desea acceder a todos los elementos de la clase, puede usar un bucle for.

var x = document.getElementsByClassName('gtableheader');
for (var i = 0; i < x.length; i++) {
    x[i].style.color = "red";
}

Más información: http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Usa esto para que funcione

window.addEventListener("load", function(event) {
    console.log(document.getElementsByClassName('gtableheader').length);
});
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *