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