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.

Nota: Evita innerHTML con datos que provengan del usuario. Si insertas texto sin validar directamente en el HTML, un usuario malicioso puede inyectar código JavaScript (ataque XSS). Para texto sin etiquetas, usa siempre textContent.

En la próxima lección: eventos, para que la página reaccione a clics, teclas, envíos de formularios y otras acciones del usuario.

TOP