1
  • Buenas, resulta que estoy haciendo unas prácticas con HTML y el método document.getElementsByTagName no funciona como espero. Se supone que este metodo retorna una HTMLColletion, la cual a pesar de no ser un arreglo, es iterable como uno, sin embargo cuando trato de iterar el HTMLCollection retornado, me da resultados inesperados, veamos:

Código:

 'use strict';
    let body = document.getElementsByTagName('body'); // por qué no funciona como se espera el getElementByTagName
    console.log(body)

-Este codigo retorna lo que se podría esperar ...

Resultado:

HTMLCollection { length: 0 }

Sin embargo, si lo trato de iterar pasa lo siguiente ...

Codigo:

 'use strict'; let body = document.getElementsByTagName('body')[0]; 
 console.log(body)

Resultado:

null

  • Por otro lado, si iteramos usando el método .item(0), en lugar de retornar null retorna undefined. Por otro lado, en la consola, todo funciona como espero. ¿A qué se debe este comportamiento?
1
  • A mi me funciona bien, no soy capaz de reproducir tu error. Míralo en este enlace.
    – masterguru
    Commented el 3 oct. 2022 a las 10:14

1 respuesta 1

4

Seguramente tengas tu código javascript en tu código HTML antes de la etiqueta body:

<html>
 ...
<script> // tu código </script>
...
<body>
</body>
</html>

Los navegadores interpretan el HTML de manera secuencial: en este caso se carga el Javascript, se ejecuta y después se procesa el body:

<script>
   console.log("buscando antes", document.getElementById("despues"));
</script>

<div id="despues"></div>

<script>
   console.log("buscando después", document.getElementById("despues"));
</script>

Soluciones:

  • Añadir el código después del body.

  • Hacer que el código se ejecute cuando la página termine de ejecutarse:

window.addEventListener('load', (event) => {
  // tu código
});
  • Si tu código Javascript está en un fichero externo (es decir, en lugar de añadir el código en el propio HTML estás usando el atributo src), puedes usar el atributo defer para indicar que la ejecución se realice después de procesar todo el HTML:
<script src="miFichero.js" defer></script>
4
  • Agrego adicionalmente que tambien podrias Incluir tu Codigo Al Final del cierre del body </body> asi se ejecutara el script al final.. Lo correcto seria esperar al Evento LOAD o OnLoad del body para ejecutarlo.. Otra opcion es crear una custom function y cargarla en el evento.. <body onLoad="customFunction()"> </body> Pero esto ya casi no se usa
    – kromander
    Commented el 3 oct. 2022 a las 10:20
  • 2
    También puedes agregar defer al elemento script para que se ejecute luego de leer todo el HTML. <script defer></script>
    – Mateo
    Commented el 3 oct. 2022 a las 12:21
  • @Mateo Correcto, lo añado a la lista de soluciones Commented el 3 oct. 2022 a las 12:22
  • Aunque quizá conviene hacer la diferencia entre la carga de window y la carga del DOM, no es lo mismo y puede que en algunos contextos baste con escuchar la carga del DOM. Revisar esta pregunta puede ser interesante en ese sentido.
    – A. Cedano
    Commented el 19 oct. 2022 a las 20:22

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.