Introducción al DOM con JavaScript

@joanh (2024) CC BY 4.0

Introducción al DOM

El DOM (Document Object Model) es una interfaz de programación que representa la estructura de un documento HTML o XML en forma de árbol. Permite a JavaScript acceder, manipular y modificar el contenido y estructura de una página web de forma dinámica.

¿Qué es el DOM?

  • Definición: El DOM es una representación estructurada del documento HTML o XML.
  • Objetivo: Facilitar la manipulación de la página web con JavaScript.
  • Características:
    • Permite acceder y cambiar el contenido sin recargar la página.
    • Organiza los elementos HTML en un árbol jerárquico.

Ejemplo de Estructura DOM

Si tenemos un HTML básico:

<!DOCTYPE html>
<html>
  <head>
    <title>Mi Página Web</title>
  </head>
  <body>
    <h1>Bienvenidos</h1>
    <p>Este es un párrafo de ejemplo.</p>
  </body>
</html>

El navegador lo convierte en un árbol DOM similar a este:

  • html
    • head
      • title: “Mi Página Web”
    • body
      • h1: “Bienvenidos”
      • p: “Este es un párrafo de ejemplo.”

Selección de Elementos en el DOM

Para manipular un elemento, primero necesitamos seleccionarlo en JavaScript.

  1. document.getElementById(): Selecciona un elemento por su atributo id.
  2. document.querySelector(): Selecciona el primer elemento que coincide con un selector CSS.
  3. document.querySelectorAll(): Selecciona todos los elementos que coinciden con el selector CSS y devuelve una NodeList.
// Ejemplos de selección
const titulo = document.getElementById('titulo'); // Selección por id
const primerParrafo = document.querySelector('p'); // Selección por etiqueta
const items = document.querySelectorAll('.item'); // Selección por clase

> Nota: querySelectorAll devuelve una lista de nodos, lo que significa que podemos iterar sobre los elementos seleccionados.

Modificación de Contenido

Una vez seleccionado un elemento, se puede modificar su contenido de diversas formas:

  • innerText: Cambia solo el texto del elemento.
  • innerHTML: Cambia el HTML interno, lo que permite añadir etiquetas HTML.
// Modificación de contenido

titulo.innerText = 'Nuevo Título';
primerParrafo.innerHTML = 'Este es el <strong>nuevo contenido</strong>';

Nota: innerHTML permite insertar código HTML, pero úsalo con precaución para evitar inyecciones de código.

Creación y Eliminación de Elementos

JavaScript permite crear y eliminar elementos en el DOM:

  • document.createElement(): Crea un nuevo elemento HTML.
  • appendChild(): Añade un elemento como hijo de otro.
  • removeChild(): Elimina un elemento hijo.
// Creación de un nuevo párrafo
const nuevoParrafo = document.createElement('p');
nuevoParrafo.innerText = 'Párrafo añadido dinámicamente.';
document.body.appendChild(nuevoParrafo);

// Eliminación de un párrafo
document.body.removeChild(nuevoParrafo);

Eventos en el DOM

Los eventos son interacciones que pueden ocurrir en la página web, como click, mouseover, o submit. Podemos asociar estos eventos a funciones que se ejecutarán en respuesta.

Ejemplo de Evento click

const boton = document.getElementById('miBoton');
boton.addEventListener('click', function() {
  alert('¡Botón presionado!');
});

Consejo: addEventListener permite añadir múltiples eventos sin sobrescribir otros eventos previamente definidos.

Propiedades Útiles en el DOM

Algunas propiedades que facilitan la manipulación del DOM:

  • nodeType: Tipo de nodo (1 para elementos, 3 para texto).
  • nodeName: Nombre del nodo.
  • parentNode: Nodo padre.
  • childNodes: Lista de nodos hijos.
  • style: Permite modificar estilos CSS en línea.
// Ejemplo de propiedades
console.log(titulo.nodeName); // "H1"
console.log(titulo.parentNode); // <body>...</body>

Ejercicio Práctico: Manipulación de Elementos

  1. Crea un archivo HTML con una lista de tareas (<ul>) vacía y un botón de “Añadir tarea”.
  2. Usa JavaScript para añadir un nuevo elemento <li> a la lista cada vez que se haga clic en el botón.
  3. Modifica el estilo de cada tarea para alternar colores al hacer clic.

Solución en Código

// Variables
const lista = document.getElementById('listaTareas');
const boton = document.getElementById('addTarea');

// Función para añadir tareas
boton.addEventListener('click', () => {
  const tarea = document.createElement('li');
  tarea.innerText = 'Nueva Tarea';
  lista.appendChild(tarea);

  // Alternar color al hacer clic
  tarea.addEventListener('click', () => {
    tarea.style.color = tarea.style.color === 'blue' ? 'black' : 'blue';
  });
});

Recapitulación y consejos

  • El DOM permite estructurar el HTML como un árbol accesible para JavaScript.
  • Con JavaScript podemos seleccionar, modificar, crear y eliminar elementos.
  • Los eventos son claves para interactuar con el usuario de forma dinámica.

Referencias y Recursos Adicionales