[SOLUCIONADO] Duda al recoger atributos

#1 (**permalink**) 04/05/2014, 05:03

Hola, estoy siguiendo unos cursos de JavaScript y tengo una duda. En muchos ejemplos donde recogen un atributo de una etiqueta/elemento, muestran códigos como este:

ejercicios.js

Código Javascript:

Ver originalvar elemento = document.getElementById("enlace");
var direccion = elemento.href;
alert(direccion);

Código HTML:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Ejercicios JavaScript</title>
        <script src="js/ejercicios.js"></script>
    </head>

    <body>
        <a id="enlace" href="http://www.forosdelweb.com">Enlace</a>
    </body>
</html>

Resulta que eso no me funciona. Para que ese código funcione tengo que invocarlo antes por ejemplo poniéndolo en una función y llamándola desde el HTML con onclick (no me gusta poner JavaScript en el HTML, ya voy a buscar otras formas):

Código Javascript:

Ver originalfunction mostrarValorAtributo() {
    var elemento = document.getElementById("enlace");
    alert(elemento.href);
}

Código HTML:

<a id="enlace" href="http://www.forosdelweb.com" onclick="mostrarValorAtributo(); return false();">Enlace</a>

Bueno de esa forma funciona, poniéndolo en una función y llamándola después (sé que puedo ejecutar el código de varias maneras, sólo es un ejemplo), pero en todos lados muestran que con el primer código debería funcionar automáticamente, a mí al menos me parece lógico, porque algo como esto sí funciona:

var cadena = "Soy un string.";
alert(cadena);

No sé si es porque al DOM le trata de una manera diferente o por otra cosa que no estoy entendiendo bien. Ya probé con getAttribute y pasa lo mismo, también haciendo muchos cambios al código. Pero sólo pasa cuando recojo los atributos, con otras cosas del DOM funciona sin tener que llamarlo antes.

Edito: buscando un poco más encontré que se suele usar window.onload = function() {} para hacer funcionar el código cuando se carga la página. Aunque todavía no entiendo porqué en las mayorías de los tutoriales omiten eso. Todavía me quedaron algunas dudas de cómo funciona, mientras vaya explorando seguro voy a darme cuenta.

PHPeros · #2 (**permalink**) 04/05/2014, 07:22

Esto ocurre porque intentas obtener el elemento cuando todavía no se ha cargado.

La solución es utilizar el evento load, como aclaras al final, para ejecutar el script en el momento que la página ha cargado por completo.

PD: También se puede añadir al final del body.

#3 (**permalink**) 04/05/2014, 07:38

Gracias PHPeros! me iluminaste la mente xD como va a acceder a un elemento del DOM tiene que estar cargando anteriormente, me había olvidado. Ya entiendo perfectamente, fue sólo falta de atención.