Creación y eliminación de nodos en JavaScript

Creación y eliminación de nodos en JavaScript

Ya conocemos Javascript, un lenguaje de programación web del cual hemos hablado en varias ocasiones. Lo hemos mencionado para realizar pequeños trozos de código que nos hagan una funcionalidad muy concreta. Pero nunca lo hemos usado para modificar algún elemento del cuerpo de la página web, más conocido como el DOM. Javascript es un lenguaje que también puede ser útil con esa finalidad, creando o eliminando nodos del DOM al reaccionar a ciertos eventos. Hoy quiero hablar de este asunto y ver cómo podemos hacerlo, una tarea bastante sencilla. Vamos a ver qué es exactamente el DOM, los nodos, los eventos y un par de ejemplos en código extraídos y comentados de W3C, la página de documentación más grande del desarrollo web. Vamos allá.

Nota: Me gustaría mencionar que hablaremos con un poco más de propiedad del código, de modo que es necesario una comprensión básica de programación en Javascript.

Modificación del DOM con Javascript

Antes de nada, ¿qué es el DOM? Se conoce con ese nombre la estructura de etiquetas que conforman la página web, es decir todas las etiquetas p, el head, el body, etc, eso es el DOM. Como podéis ver es algo que ya conocemos, hemos trabajado con ello y lo hemos mencionado. Pero la pregunta es ¿para que querría yo modificar esa estructura? Muy sencillo: páginas dinámicas. No siempre vamos a querer que la página se muestre tal cual la tenemos en mente de buenas a primeras y un ejemplo muy claro es una validación para poder enviar un formulario. Para proteger nuestro servidor de recibir información de un formulario en masa necesitamos establecer una protección. Esa protección podría ser una casilla que el usuario debe marcar, de lo contrario el botón “enviar” no aparece. Eso es modificar el DOM, ya que hay un botón que debe ser visible en función de lo que ocurra en el cuerpo. Esto se logra con Javascript, o con alguna biblioteca que ya está preparada para hacer eso, como JQuery.

Ahora que ya sabemos qué es el DOM, ¿qué son los nodos? Un nodo en el DOM es cualquier etiqueta del cuerpo, como un párrafo, el mismo body o incluso las etiquetas de una lista. Con Javascript podemos modificar estas etiquetas con el uso de eventos. Un evento es una consecuencia a alguna acción, como un clic, pasar el ratón por encima de un elemento o incluso al refrescar la página. Todas estas acciones tienen reacciones, y esto es lo que se le conoce como eventos, o event en el código.

“Muy bien Albert, pero ¿como trabajamos con esto? Queremos ver código” Tranquilos, lectores y lectoras, yo os muestro código. Vamos a ver un ejemplo sencillo extraído de W3C. Tenemos varias maneras de crear elementos para el DOM, pero os quiero mostrar createElement y createTextNode. Ambos con nombres muy autodescriptivos indican la creación de un elemento en el primero y de un texto en el segundo. Observemos el siguiente código:

var para = document.createElement("p");

var node = document.createTextNode("This is new.");

para.appendChild(node);

Vemos que siempre debemos hacer referencia al documento con document. Esto es importante, porqué de lo contrario Javascript no sabrá de que estamos hablando. Siempre hay la misma estructura:

document.tipoDeMetodo(“parámetro”);

Donde parámetro es lo que va a recoger dicho método. Es decir, si usamos el método para crear un elemento nuevo, como es el caso de la primera línea, le podemos pasar la etiqueta “p” para crear un párrafo nuevo. Pero, un momento, hemos creado una variable llamada “para”. ¿Con qué finalidad? Simple, gracias a “appendChild”, que funciona del mismo modo, le estamos incrustando el texto que tenemos guardado en “node”. El resultado de todo esto es un párrafo con un texto que mostrará por pantalla “This is new”. Podéis ver y probar el ejemplo en este enlace

Eliminación de elementos

Podríamos creer que el proceso de eliminación es complicado y que debemos escribir varias líneas de código, como hemos hecho para crear. Pero en realidad no. Es un proceso más corto:

  1. Recoger el identificador del elemento
  2. Usar la propiedad “removeChild”

var parent = document.getElementById("div1");

var child = document.getElementById("p1");

parent.removeChild(child);

Analicemos el código. Recogemos previamente el elemento por id y lo guardamos en la variable “parent”. Seguidamente recogemos otro elemento y lo guardamos en “child”. Hay que mencionar que este segundo elemento debe ser hijo (child) del primero, el cual es el padre (parent). Finalmente usamos la propiedad “removeChild”, pasando el nombre del hijo como argumento, para poder eliminarlo. Bastante sencillo, ¿verdad? Podéis probar el código en el siguiente enlace

En conclusión, podemos ver que con Javascript podemos hacer prácticamente de todo con el DOM en realidad, es un lenguaje que ha cambiado radicalmente como interactuamos con la web, tanto a nivel de usuario como de desarrollo. De modo que os recomiendo meteros de lleno con este lenguaje.

Curso relacionado: Curso Superior de Creación y Desarrollo de Páginas Web