No entiendo bien el DOM

BramSt · #1 (**permalink**) 09/07/2016, 21:01

Hola, estoy empezando con Javascript y el DOM, y se me está haciendo bastante lioso.

Veréis, he creado un pequeño código HTML para ir probando:

Código HTML:

Ver original<html>
    <head>
    
        
    </head>
    
    <body>
    
    
        <p>Hola qué tal</p>
        <div id="wrapper"><p>Bien</p></div>
 
 
        <script type="text/javascript">//pequeño js para ir probando
        var msg='';
        
        msg=document.childNodes[0].childNodes[2].childElementCount; <!--esto (el body) devuelve tres elementos. 
¿No deberían ser 2? El párrafo y el div... -->
        
        
        alert(msg);
        
        </script>
    </body>
    
 
    
</html>

En el comentario está una de mis dudas. Pensaría que quizá el tercer elemento es <script>, pero si lo saco del body (es decir, poniendo el código js después del body), me sigue contando tres elementos... Lo cuál me lleva a la siguiente duda:

He tratado de implementar ese código js en un .js aparte, para ver si así no me lo cuenta, de tal forma:

Código Javascript:

Ver originalvar msg='';
        
        msg=document.childNodes[0].childNodes[2].childElementCount; /*esto (el body) devuelve tres elementos. ¿No deberían ser 2? El párrafo y el Id... */
        
        
        alert(msg);

Es decir, que ya he probado quitando lo del script y enlazándolo desde el head... pero el .js no se me ejecuta, y mirando línea a línea, parece que es esta la que me da problemas:

Código Javascript:

Ver originalmsg=document.childNodes[0].childNodes[2].childElementCount;

Vaya que por algún motivo, desde un .js externo no se ejecuta...

Un saludo a todos y gracias.

matake · #2 (**permalink**) 10/07/2016, 03:25

Pues seguro que habran otros que te pueden aconsejar mejor que yo.

No he probado tu ejemplo pero teorico ... en la manera que esta pensado al cambiarle de lugar al script estas cambiando tambien la estructura del dom

Cita:

devuelve tres elementos.
¿No deberían ser 2?

Pues no deberian ser 2 porque el <script> que tienes despues del <div> tambien cuenta como elemento del DOM. Asi que es correcto si te da 3

Lo que te aconsejaria yo es de cambiar un poco la manera de apuntar a los elementos añadendo id-s por lo menos para algunos que consideras mas importantes e ir a ellos de manera mas segura con getElementById y solo emplear childNodes de vez en cuando para no poner tampoco id a cada elemento

mira unos ejemplos aqui
http://www.w3schools.com/js/js_htmldom_elements.asp

Luego otro consejo que creo que te va ayudar es en vez de alert() ... hacer cequeos con console.log() para ver los mensajes en la consola ( F12 o click derecho en la pagina y luego inspeccionar para que te salga la consola ) ... para otros navegadores buscar en los menus algo como Herramientas de desarollo

Espero servirte saludos

IsaBelM · #3 (**permalink**) 10/07/2016, 09:34

La primera duda no te preocupes. La importante es la segunda. Revisa estas dos ligas https://developer.mozilla.org/en-US/...MContentLoaded y https://developer.mozilla.org/en-US/...eb/Events/load

BramSt · #4 (**permalink**) 10/07/2016, 10:24

Cita:

Iniciado por matake

Pues seguro que habran otros que te pueden aconsejar mejor que yo.

No he probado tu ejemplo pero teorico ... en la manera que esta pensado al cambiarle de lugar al script estas cambiando tambien la estructura del dom

Pues no deberian ser 2 porque el <script> que tienes despues del <div> tambien cuenta como elemento del DOM. Asi que es correcto si te da 3

Lo que te aconsejaria yo es de cambiar un poco la manera de apuntar a los elementos añadendo id-s por lo menos para algunos que consideras mas importantes e ir a ellos de manera mas segura con getElementById y solo emplear childNodes de vez en cuando para no poner tampoco id a cada elemento

mira unos ejemplos aqui
http://www.w3schools.com/js/js_htmldom_elements.asp

Luego otro consejo que creo que te va ayudar es en vez de alert() ... hacer cequeos con console.log() para ver los mensajes en la consola ( F12 o click derecho en la pagina y luego inspeccionar para que te salga la consola ) ... para otros navegadores buscar en los menus algo como Herramientas de desarollo

Espero servirte saludos

Gracias matake por responderme.

Pues sí me he imaginado que es el script, pero como si lo saco fuera del body me sigue contando tres elementos... y hacerlo en un .js externo ya digo que por algún motivo no me funciona.

Lo que no entiendo de los childNodes es, ¿para usar eso no te tienes que hacer un esquema de tu DOM para saber a qué nodo debes llamar? Mucho rollo en DOMs complejos, ¿no?

¿Cómo lo hacéis, iterando sobre el elemento con un for para saber cuál es, quizá?

Ya miraré lo del console.log(). Aon muchos métodos y cosas nuevas de repente

BramSt · #5 (**permalink**) 10/07/2016, 10:25

Cita:

Iniciado por IsaBelM

La primera duda no te preocupes. La importante es la segunda. Revisa estas dos ligas https://developer.mozilla.org/en-US/...MContentLoaded y https://developer.mozilla.org/en-US/...eb/Events/load

Muchísimas gracias, Isabel. Me pongo a mirar tu enlace.

IsaBelM · #6 (**permalink**) 10/07/2016, 13:22

A ver, el problema es que al embeber o externalizar el .js, los elementos aún no existen

BramSt · #7 (**permalink**) 10/07/2016, 14:00

Cita:

Iniciado por IsaBelM

A ver, el problema es que al embeber o externalizar el .js, los elementos aún no existen

Ah vale, por eso imagino que me está petando al hacer (desde el .js externo)

Código Javascript:

Ver originalvar msg=document.getElementById("p1").childNodes[0].nodeValue;

Pero sigo sin entenderlo, tras leer los links que me has pasado.

A ver, se supone que primero se ejecuta el DOMContentLoaded (que carga el HTML) y después el load, ¿no? (que carga lo demás).

Si yo hago un archivo.js con esto:

Código Javascript:

Ver originalfunction cargarLoDemas()
        {
            
            
            alert("cargar lo demás");
        
        }
        
        
        window.addEventListener("load",cargarLoDemas);
        
            function cargarDocumentoHtml()
        {
        
            alert("DOMContentLoaded, el HTML cargado");
        
        
        }
 
        document.addEventListener("DOMContentLoaded",cargarDocumentoHtml);

Y mi código HTML tiene lo siguiente:

Código HTML:

Ver original<html>
    <head>
    
        
 
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
 
 
        <script type="text/javascript" src="codigo.js"></script>
        
        
    </head>
    
    <body>
    
        
        
        <p>Hola qué tal</p>
        <div id="wrapper"><p id="p1">Bien</p></div><!--asas-->
        
        <script type="text/javascript" >
        
        var msg='';
        
        var msg=document.getElementById("p1").childNodes[0].nodeValue;
        
        alert(msg);
        
        
        </script>
    </body>
    
    
    
</html>

Primero se ejecuta lo que hay dentro del script que está en el body, y después el script que he externalizado en <head>.

No lo entiendo. Quizá sea que no es necesario llamar a los dos eventos, es decir, que ya son llamados cuando ejecuto el HTML de manera automática... pero es que aún en ese caso, sigo sin entender por qué no se me ejecuta la parte de código js que he puesto en el body si se me ocurre externalizarlo...

Por cierto, sigo utilizando el "alert()" porque el "console.log()" no me funciona...

Poco a poco me van quedando cosas claras, aunque por cada cosa que medio entiendo surgen tres dudas más... poco a poco XD

EDIT: Por cierto, una de las cosas por las que no me ejecutaba el .js anteriormente parece que era por la Codificación también.

Alexis88 · #8 (**permalink**) 10/07/2016, 14:43

El evento DOMContentLoaded se dispara cuando ha terminado de cargar el modelo de objetos del documento, es decir, los elementos HTML que haya, mas no los subrecursos incluidos (fotos, vídeos, audio, frames). Cuando colocas el script al final de todo, este se ejecuta luego de que los elementos ubicados antes han cargado precisamente porque se encuentra después de ellos, lo cual no quiere decir que se hayan disparado los eventos DOMContentLoaded o load.

Para tener esto más claro, puedes utilizar el evento readystatechange, mismo que se dispara cada vez que cambia el estado de carga del documento:

Código Javascript:

Ver originaldocument.addEventListener("readystatechange", function(){
    switch (this.readyState){
        case "loading":
            console.log("El documento está cargando");
            break;
        case "interactive":
            console.log("El DOM ha terminado de cargar, pero no los subrecursos");
            break;
        case "complete":
            console.log("El DOM y los subrecursos han terminado de cargar");
            break;
    }
}, false);

Como puedes apreciar, la propiedad readyState es la que contiene al estado de carga del documento, habiendo tres cuya descripción se encuentra en los mensajes que se muestran por cada caso. Cabe señalar que, el segundo estado, equivale al evento DOMContentLoaded; y el tercero, al evento load.

Y para utilizar la consola del navegador, tan solo necesitas ingresar al cuadro de herramientas para desarrolladores de tu navegador web, al cual puedes acceder a través del menú de opciones del mismo o, si usas Chrome, Firefox o IE/Edge, pulsando la tecla F12 y buscando la opción "Console" o "Consola" en el cuadro que se desplegará.

BramSt · #9 (**permalink**) 10/07/2016, 15:26

Aaaaaaaaaaaaaaaah coño que esos eventos se disparan CUANDO TERMINAN de cargar lo que tienen que cargar. Así sí.

Comprendido también lo de console.log()

Ahora sólo me queda tratar de investigar la relación lógica de lo que me dice Isabel entre estos dos eventos y por qué no se me ejecuta un .js externo.

Muchas gracias alexis88 a ti también.

BramSt · #10 (**permalink**) 15/07/2016, 01:03

Cita:

Iniciado por IsaBelM

La primera duda no te preocupes. La importante es la segunda. Revisa estas dos ligas https://developer.mozilla.org/en-US/...MContentLoaded y https://developer.mozilla.org/en-US/...eb/Events/load

Coooooño creo que ya lo voy pillando... voy poniendo estas cosas por si en el futuro alguien novato como yo se encuentra con los mismos problemas.

el tema es, como dices, que JS no puede actuar con unos elementos que aún no existen, y por eso el .js externo no se ejecuta si no "disparamos" ese JS cuando se termine de cargar la página, no?

Así que lo que habría que hacer es algo así, si queremos que cargue un .js externo:

Código Javascript:

Ver original//archivoExterno.js:
 
 
function funcionCodigoACargar()
{
 
//aquí va el código JS
 
}

Y luego:

Código HTML:

Ver original<html>
    <head>
    
        
 
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
 
 
        <script type="text/javascript" src="rutaArchivoExterno.js"></script><!--NO OLVIDAR ESTO-->
        
        
    </head>
    
    <body onload="funcionEjemploCarga()"><!--CUANDO SE DISPARA EL EVENTO LOAD, EJECUTAMOS LA FUNCION QUE CONTIENE NUESTRO CODIGO JS-->
    
        
        
        <p>Hola qué tal</p>
        <div id="wrapper"><p id="p1">Bien</p></div>
        
        
    </body>
    
    
    
</html>

¿Es así la cosa?

Parece que así, porque ahora se ejecuta XD

Alexis88 · #11 (**permalink**) 15/07/2016, 01:48

Así es, BramSt. Como el navegador interpreta el código de arriba hacia abajo, ya sea que hayas escrito el código directamente en el documento o se encuentre en un archivo externo y, en cualquiera de ambos casos, lo colocaste antes de los elementos que deseas afectar, si no controlas su accionar hasta que haya cargado el DOM, no surtirá efecto.