Creación y eliminación de nodos en JavaScript
28/09/2017

Creación y eliminación de nodos en JavaScript

Programación y Diseño Web

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

Comparte en:

Grado Superior de Desarrollo de Aplicaciones informáticas en la Salle de Barcelona. Trabaja actualmente como desarrollador de aplicaciones para móviles, especialidad en videojuegos.

Mejores plataformas para crear un ecommerce
21/05/2020
Carlos Yañez

Mejores plataformas para crear un ecommerce

En el post de hoy veremos cuales son las plataformas de ecommerce más adecuadas para crear una tienda on-line para que, si estás interesado, puedas desarrollar tu pr...

Consejos para detectar un ciberataque
21/05/2020
Rubén Bellido

Consejos para detectar un ciberataque

Estamos en un momento de pleno auge digital, es por ello que también estamos en un punto que los ciberataques van en aumento exponencialmente y así lo demuestran dif...

claves web exito
09/05/2020
Carlos Yañez

6 consejos para hacer una web exitosa

En el post de hoy te daremos las claves para que tu web sea realmente exitosa. Veamos en qué apoyarnos para conseguir el éxito.