Curso de Javascript: Modificación del DOM

Introducción

Una de las características principales de JS es la de poder modificar la página HTML que está cargada en ese momento en pantalla. Este proceso de modificar el DOM (Document Object Model) tiene una serie de conceptos que tenemos que tener en cuenta:

Documento: el objeto document que hemos visto previamente que es el que nos almacena la información de la página que está cargada, podría decirse que este es el DOM, aunque sería simplificarlo mucho.
Elemento: El elemento es toda aquella etiqueta que hemos colocado en el documento, todos lo enlaces, las imágenes, los div, todos ellos son elementos. Lo primero que deberíamos saber es que dichos elementos tienen una estructura jerárquica, por lo que cualquier elemento salvo el html, tendrá padre y todos los elementos puede disponer de hijos. Al funcionar cómo un árbol podemos realizar las operaciones típicas de nodos en un árbol tales como el injerto, la poda y la substitución de una rama.
Atributos: características el objeto, dichos elementos pueden tener o no un valor por defecto asociado, hay veces que los podemos crear, modificar o eliminar de cada etiqueta o conjunto de etiquetas-elementos.
Nodos de texto: este tipo de nodos son especiales ya que no representan a una etiqueta sino a los textos que hay dentro de las etiquetas. Com por ejemplo los textos de un enlace (etiqueta a).
Eventos: los eventos son también atributos de los elementos y se pueden modificar como tales.

Injertos

A la hora de realizar un injerto es necesario saber en que punto del árbol se va a realizar el injerto, esto en el DOM implica saber cual va a ser el padre del elemento que vayamos a insertar.
Por otra parte necesitaremos crear el elemento antes de realizar el injerto, con todo lo que ello conlleve, es decir hay que construir la rama entera antes de generar el injerto.
El método principal de hacer un injerto es mediante el método appendChild, dicho método se ejecuta sobre el padre y admite como parámetro el objeto del elemento que queremos injertar.
Pongamos un ejemplo completo del proceso insertando un nuevo hijo al final de todos los hijos de un padre…

                //Creación de elementos

        var enlace=document.createElement(“a”);

        enlace.href=“http://www.google.es/”;

        enlace.id=“enlace”;

        var texto=document.createTextNode(“Enlace a google”);

        //montaje de la rama

        enlace.appendChild(texto);

       //Localización del injerto

        var padre=document.getElementById(“padre”);

        //montaje del injerto

        padre.appendChild(enlace);

Como pude verse en el ejemplo, un injerto tiene un proceso:

Creación de los elementos y los nodos de texto como variables
modificación de las propiedades del elemento a insertar
Montaje de la rama con los appendChild
localización del punto del injerto, es decir el padre donde vamos a injertar el hijo
ejecución del método appendChild en el padre indicando que hijo queremos insertar

Es un proceso un poco laborioso pero efectivo a la hora de insertar nuevos nodos y elementos. En este caso al usar el appendChild insertamos un hijo, que sería el último hijo dentro del nodo padre, por lo que se mostraría al final, o después de todos los hermanos del nuevo nodo.

Injerto antes de un hermano

Al igual que con appendChild insertamos un hijo, como el último de la lista, nos puede llegar a interesar insertarlo antes de otro hermano, en este caso necesitamos dos localizadores, uno el del padre y otro el del hermano para así saber el punto exacto dentro del árbol donde queremos realizar la inserción. Veamos un ejemplo…

                //inserción de un hermano

        var enlace3=document.createElement(“a”);

                //modificando las propiedades del elemento

        enlace3.href=“http://www.google.es/”;

        enlace3.id=“enlace3”;

        var texto3=document.createTextNode(“un enlace”);

                //montando la rama

        enlace3.appendChild(texto3);

                //insertando el elemento

                var enlace_en_dom=document.getElementById(“enlace”);

        document.getElementById(“padre”).insertBefore(enlace3,enlace_en_dom);

En este caso utilizamos el método insertBefore sobre el objeto padre, mediante el id=”padre” y lo intentamos introducir antes del elemento con el id=”enlace”. De esta manera el nuevo hijo que insertamos será hijo de padre y hermano de “enlace” pero estará colocado antes de “enlace”.

Reemplazar un hijo

Hay aveces que puede interesar substituir un hijo, es decir eliminar un hijo y realizar un injerto de otro, pero en JS este proceso es sencillo es simplemente substituir un contenido por otro a nivel de elemento. Veamos un ejemplo

                //reemplazar un hijo

        var enlace4=document.createElement(“a”);

        enlace4.href=“http://www.google.es/”;

        enlace4.id=“enlace3”;

        var texto4=document.createTextNode(“un enlace”);

        enlace4.appendChild(texto3);

        var enlace3_en_dom=document.getElementById(“enlace3”);

        document.getElementById(“padre”).replaceChild(enlace3,enlace3_en_dom);

Comp puede verse es como los anteriores ejemplos salvo porque utilizamos en método replaceChild sobre le padre y le indicamos en el primer parámetro el objeto del elemento que queremos insertar y en el segundo parámetro el objeto que queremos reemplazar. Muy simple 🙂
Este sencillo método permite realizar un swapping o intercambio de contenido en la página.

Eliminar una rama, poda

Hay veces que tenemos que eliminar una rama entera de la página, un contenido completo, un div es el caso típico. Además es mucho más simple, porque lo único que necesitamos localizar es el nodo hijo de la rama a eliminar y el padre de dicho hijo. Veamos el ejemplo…

                //eliminación de una rama

        var enlace2_en_dom=document.getElementById(“enlace2”);

        document.getElementById(“padre”).removeChild(enlace2_en_dom);

En este caso se trata de eliminar toda la rama de lo que incluya el elemento cuyo id=”enlace2″, localizando también el padre. Muy simple 🙂

Este obra está bajo una licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 España.

Relacionado

Comments

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.