Apuntes sobre Javascript

JavaScript lo resuelve todo... eventualmente.

Manipulación del DOM: Interactuando con la Web

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.

¿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.

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.";

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.

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