Apuntes javascript

JavaScript lo resuelve todo... eventualmente.

Curso de JavaScript para Principiantes - Lección 9: Manipulación del DOM: Interactuando con la Web

¡Bienvenido a la novena lección! Hasta ahora, has aprendido a manejar variables, operadores, condicionales, bucles, funciones, arreglos y objetos en JavaScript. Ahora es el momento de hacer que tus páginas web cobren vida. El DOM (Document Object Model) es la herramienta que conecta JavaScript con el HTML y CSS de una página, permitiéndote cambiar texto, colores, estructuras y más, todo desde tu código. Si en PHP usas echo para generar HTML o manipulas datos para mostrarlos en una página, aquí verás cómo JavaScript lleva eso al siguiente nivel con interactividad en tiempo real.

¿Qué es el DOM?

El DOM es una representación de la estructura de una página web como un árbol de objetos. Cada elemento HTML (como un <div>, <p> o <button>) es un nodo en este árbol, y JavaScript puede acceder a esos nodos, modificarlos, añadir nuevos o eliminarlos.

Ejemplo mental: Imagina el DOM como un plano de una casa (la página web). Cada habitación (etiqueta HTML) tiene muebles (contenido, atributos, estilos), y JavaScript es como un decorador que puede entrar, mover cosas, pintar paredes o añadir nuevas habitaciones.

Conexión con PHP: En PHP, generas HTML dinámicamente en el servidor (por ejemplo, con un bucle foreach para mostrar una lista). En JavaScript, manipulas el HTML directamente en el navegador, después de que la página se ha cargado, para responder a acciones del usuario (como clics) o actualizar contenido sin recargar la página.

1. Accediendo al DOM

JavaScript proporciona métodos para seleccionar elementos del DOM, similares a cómo usarías un selector CSS o un ID en PHP para identificar un elemento.

Métodos principales para seleccionar elementos:

  • document.getElementById(id): Selecciona un elemento por su id.
  • document.querySelector(selector): Selecciona el primer elemento que coincida con un selector CSS (como .clase, #id, o etiqueta).
  • document.querySelectorAll(selector): Selecciona todos los elementos que coincidan con un selector CSS, devolviendo una lista.

Ejemplo práctico: Supongamos que tienes este HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Mi Página</title>
</head>
<body>
  <h1 id="titulo">¡Bienvenido!</h1>
  <p class="texto">Este es un párrafo.</p>
  <button id="boton">Haz clic</button>
</body>
</html>

Puedes seleccionar elementos con JavaScript:

// Seleccionar por ID
let titulo = document.getElementById("titulo");
console.log(titulo); // Imprime: <h1 id="titulo">¡Bienvenido!</h1>

// Seleccionar por clase con querySelector
let parrafo = document.querySelector(".texto");
console.log(parrafo); // Imprime: <p class="texto">Este es un párrafo.</p>

// Seleccionar todos los botones
let botones = document.querySelectorAll("button");
console.log(botones); // Imprime: NodeList [ <button id="boton">Haz clic</button> ]

2. Modificando Elementos del DOM

Una vez que seleccionas un elemento, puedes cambiar su contenido, estilos, atributos o estructura.

Cambiar contenido

  • element.textContent: Cambia el texto de un elemento (solo texto, sin HTML).
  • element.innerHTML: Cambia el contenido HTML de un elemento (puedes incluir etiquetas).

Ejemplo:

let titulo = document.getElementById("titulo");
titulo.textContent = "¡Hola, mundo!"; // Cambia el texto del <h1>

let parrafo = document.querySelector(".texto");
parrafo.innerHTML = "Este es un <strong>nuevo</strong> párrafo.";

Conexión con PHP: Esto es como usar echo "<p>Nuevo texto</p>"; en PHP, pero en JavaScript ocurre en el navegador y no requiere recargar la página.

Cambiar estilos

Puedes modificar estilos CSS usando la propiedad style.

Ejemplo:

let titulo = document.getElementById("titulo");
titulo.style.color = "blue";
titulo.style.fontSize = "24px";

Nota: Los nombres de propiedades CSS con guiones (como font-size) se escriben en camelCase (fontSize) en JavaScript.

Cambiar atributos

  • element.getAttribute(nombre): Obtiene el valor de un atributo.
  • element.setAttribute(nombre, valor): Cambia el valor de un atributo.

Ejemplo:

let boton = document.getElementById("boton");
boton.setAttribute("disabled", "true"); // Deshabilita el botón
console.log(boton.getAttribute("id")); // Imprime: boton

3. Creando y Eliminando Elementos

Puedes añadir nuevos elementos al DOM o eliminar los existentes.

Crear un elemento

  • document.createElement(tagName): Crea un nuevo elemento HTML.
  • element.appendChild(nodo): Añade un elemento como hijo de otro.

Ejemplo:

let nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "¡Soy un párrafo nuevo!";
document.body.appendChild(nuevoParrafo); // Añade al <body>

Eliminar un elemento

  • element.remove(): Elimina el elemento.

Ejemplo:

let parrafo = document.querySelector(".texto");
parrafo.remove(); // Elimina el párrafo

4. Ejemplo Realista: Lista de Tareas Dinámica

Vamos a crear una lista de tareas donde puedas añadir elementos desde JavaScript, algo que podrías comparar con un formulario en PHP que genera una lista en el servidor.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Lista de Tareas</title>
</head>
<body>
  <h1>Mis Tareas</h1>
  <ul id="lista-tareas"></ul>
  <input type="text" id="nueva-tarea">
  <button id="agregar">Agregar Tarea</button>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

// Seleccionar elementos
let inputTarea = document.getElementById("nueva-tarea");
let botonAgregar = document.getElementById("agregar");
let lista = document.getElementById("lista-tareas");

// Función para añadir una tarea
function agregarTarea() {
  let texto = inputTarea.value;
  if (texto) {
    let nuevaTarea = document.createElement("li");
    nuevaTarea.textContent = texto;
    lista.appendChild(nuevaTarea);
    inputTarea.value = ""; // Limpia el input
  }
}

// Ejecutar la función cuando se haga clic en el botón
botonAgregar.onclick = agregarTarea;

Cómo funciona:

  • El usuario escribe una tarea en el <input>.
  • Al hacer clic en el botón, se crea un nuevo <li> con el texto y se añade a la <ul>.
  • El input se limpia para la próxima tarea.

Conexión con PHP: En PHP, podrías hacer algo similar generando una lista <ul> con un bucle foreach desde una base de datos. Aquí, JavaScript lo hace en el navegador, sin necesidad de enviar datos al servidor.

5. Buenas Prácticas

  1. Selecciona elementos específicamente: Usa IDs o clases para evitar afectar elementos no deseados.
  2. Valida entradas: Antes de modificar el DOM (como añadir una tarea), verifica que los datos sean válidos (por ejemplo, que el input no esté vacío).
  3. Mantén el código organizado: Usa funciones para separar la lógica de manipulación del DOM.
  4. Evita abusar de innerHTML: Puede ser inseguro si usas datos no validados (por ejemplo, entrada de usuarios); prefiere textContent para texto puro.
  5. Prueba en un entorno real: Usa JSFiddle o un archivo HTML local para ver los cambios en la página.

Ejercicios Prácticos

  1. Cambiar texto dinámicamente:

    • Crea un HTML con un <h1> y un <button>.
    • Usa JavaScript para que, al hacer clic en el botón, el texto del <h1> cambie a "¡Texto nuevo!".

  2. Cambiar estilos:

    • Crea un HTML con un <div> y un <button>.
    • Al hacer clic en el botón, cambia el color de fondo del <div> a rojo y el tamaño de fuente a 20px.

  3. Añadir elementos:

    • Crea un HTML con una <ul> vacía y un <button>.
    • Al hacer clic en el botón, añade un nuevo <li> con el texto "Nueva tarea" a la lista.

  4. Mini app de notas:

    • Crea un HTML con un <input>, un <button> y un <div> vacío.
    • Al hacer clic en el botón, toma el texto del <input> y crea un nuevo <p> dentro del <div> con ese texto.
    • Asegúrate de limpiar el <input> después de añadir la nota.

Instrucción: Prueba estos ejercicios en JSFiddle o en un archivo HTML local con un <script>. Por ejemplo:

<h1 id="titulo">Prueba</h1>
<script>
  document.getElementById("titulo").textContent = "¡Cambiado!";
</script>

Para la Próxima Lección

En la Lección 10, exploraremos eventos, que te permitirán responder a acciones del usuario, como clics, teclas presionadas o movimientos del ratón. Esto hará que tus páginas sean aún más interactivas. ¡Sigue practicando la manipulación del DOM con los ejercicios de hoy para estar listo!

TOP