Manipulación del DOM con JavaScript

Introducción

Bienvenido al laboratorio de manipulación del DOM con JavaScript. El Document Object Model (DOM) es una interfaz de programación para documentos web. Representa la página de tal manera que los programas pueden cambiar la estructura, el estilo y el contenido del documento. Cuando se carga una página web, el navegador crea un DOM de la página, que es una estructura de objetos similar a un árbol.

En este laboratorio, aprenderá a usar JavaScript para interactuar con el DOM. Practicará la selección de elementos, el cambio de su contenido, la modificación de sus atributos y la creación y adición dinámica de nuevos elementos a la página. Estas son habilidades fundamentales para crear aplicaciones web interactivas y dinámicas.

Al finalizar este laboratorio, usted será capaz de:

• Seleccionar un elemento del DOM usando su ID.
• Cambiar el contenido de un elemento.
• Establecer atributos de un elemento.
• Crear un nuevo elemento.
• Añadir un nuevo elemento al documento.

¡Empecemos!

Seleccionar elemento por ID con getElementById

En este paso, aprenderá a seleccionar un elemento HTML utilizando su ID único. El método document.getElementById() es una de las formas más comunes de acceder a un elemento específico en el DOM.

Primero, localice el archivo script.js en el explorador de archivos en el lado izquierdo del WebIDE. Haga clic en él para abrirlo en el editor. El script de configuración ya ha creado este archivo para usted.

Ahora, agregue el siguiente código a script.js. Este código seleccionará el elemento div con el ID main-content y lo almacenará en una variable llamada contentDiv. Luego, registraremos este elemento en la consola para verificar que lo hemos seleccionado correctamente.

const contentDiv = document.getElementById("main-content");

console.log(contentDiv);

Después de agregar el código, guarde el archivo script.js. Para ver el resultado, haga clic en la pestaña "Web 8080" en la parte superior de la interfaz. No verá ningún cambio visual en la página en sí, pero podrá ver la salida de console.log. Para hacer esto, abra las herramientas de desarrollador del navegador (generalmente puede hacerlo haciendo clic derecho en la página y seleccionando "Inspeccionar", luego navegando a la pestaña "Consola"). Debería ver el elemento div de HTML registrado en la consola.

Cambiar contenido de texto con innerHTML

En este paso, modificará el contenido del elemento que seleccionó. La propiedad innerHTML le permite obtener o establecer el contenido HTML dentro de un elemento. Es una forma potente de cambiar dinámicamente lo que se muestra en su página web.

Continúe editando el archivo script.js. Debajo del código que escribió en el paso anterior, agregue la siguiente línea. Esto cambiará el texto dentro del div que seleccionamos.

const contentDiv = document.getElementById("main-content");

// Esta línea es nueva
contentDiv.innerHTML = "¡El contenido ha sido cambiado por JavaScript!";

console.log(contentDiv);

Asegúrese de guardar el archivo script.js. Ahora, vuelva a la pestaña "Web 8080" y actualice la página. Debería ver que el texto dentro del cuadro ha cambiado de "Este es el contenido original." a "¡El contenido ha sido cambiado por JavaScript!".

Establecer atributo con el método setAttribute

En este paso, aprenderá a cambiar los atributos de un elemento, como el href de un enlace o el src de una imagen. Para este propósito se utiliza el método setAttribute(). Este toma dos argumentos: el nombre del atributo a establecer y el valor que se asignará a ese atributo.

Nuestro archivo index.html contiene un enlace (<a> tag) con el ID labex-link. Cambiemos su atributo href para que apunte al sitio web de LabEx.

Agregue el siguiente código a su archivo script.js.

// Seleccionar el elemento de enlace
const link = document.getElementById("labex-link");

// Establecer su atributo href
link.setAttribute("href", "https://labex.io");

Su archivo script.js completo debería verse ahora así:

const contentDiv = document.getElementById("main-content");
contentDiv.innerHTML = "The content has been changed by JavaScript!";
console.log(contentDiv);

// Seleccionar el elemento de enlace
const link = document.getElementById("labex-link");

// Establecer su atributo href
link.setAttribute("href", "https://labex.io");

Guarde el archivo, cambie a la pestaña "Web 8080" y actualice. Ahora, si pasa el cursor sobre el enlace "LabEx", debería ver en la barra de estado de su navegador que apunta a https://labex.io. Al hacer clic en él, se intentará navegar a esa página.

Crear nuevo elemento con createElement

En este paso, creará un elemento HTML completamente nuevo desde cero utilizando JavaScript. Esto es una parte fundamental de la construcción de interfaces dinámicas, donde podría necesitar agregar nuevos elementos a una lista, mostrar nuevos mensajes, etc. El método document.createElement() se utiliza para crear un elemento especificado por un nombre de etiqueta (tag name).

Creemos un nuevo elemento de párrafo (<p>). Agregue el siguiente código al final de su archivo script.js.

// Crear un nuevo elemento de párrafo
const newParagraph = document.createElement("p");

// Establecer su contenido
newParagraph.innerHTML = "Este es un nuevo párrafo creado con JavaScript.";

// Añadir una clase para el estilo
newParagraph.className = "new-element";

En este punto, el elemento ha sido creado en la memoria del navegador, pero aún no es visible en la página. Hemos creado el elemento, establecido su contenido usando innerHTML y asignado una clase CSS para que se estilice de acuerdo con nuestro archivo style.css. En el siguiente paso, aprenderá cómo agregar este nuevo elemento al documento.

Añadir elemento hijo con appendChild

En este paso final, agregará el elemento que creó en el paso anterior a la página web. El método appendChild() añade un nodo (un elemento) como el último hijo de un elemento padre.

Primero, necesitamos seleccionar el elemento padre donde queremos colocar nuestro nuevo párrafo. Nuestro index.html tiene un div con el ID container para este propósito. Luego, usaremos appendChild() para agregarle nuestro newParagraph.

Agregue el siguiente código al final de script.js.

// Obtener el elemento contenedor
const container = document.getElementById("container");

// Añadir el nuevo párrafo al contenedor
container.appendChild(newParagraph);

Su archivo script.js completo ahora debería contener todo el código de los pasos anteriores. Guarde el archivo y actualice la pestaña "Web 8080". Ahora debería ver el nuevo párrafo estilizado aparecer debajo del enlace en su página.

¡Felicitaciones! Ha manipulado con éxito el DOM para cambiar contenido, establecer un atributo y crear y mostrar dinámicamente un nuevo elemento.

Resumen

En este laboratorio, ha aprendido las técnicas fundamentales para manipular el Modelo de Objeto del Documento (DOM) con JavaScript. Estas habilidades son esenciales para crear páginas web dinámicas e interactivas.

Ha practicado con éxito:

• Seleccionar elementos del DOM usando document.getElementById().
• Cambiar el contenido de un elemento usando la propiedad innerHTML.
• Modificar los atributos de un elemento con el método setAttribute().
• Crear nuevos elementos HTML en memoria con document.createElement().
• Añadir elementos recién creados a la página web usando appendChild().

Al combinar estos métodos, puede construir interfaces de usuario complejas que responden a las acciones del usuario y muestran datos dinámicamente. ¡Bien hecho por completar este laboratorio!