Manipulando el DOM en JavaScript

---

¿Qué es el DOM?

El DOM (Document Object Model) es una interfaz de programación que representa la estructura de un documento HTML como un árbol de nodos. Cada elemento, atributo y texto en el documento es un nodo, lo que permite a los lenguajes de programación acceder y manipular el contenido y la estructura de la página.

¿Qué es getElementById?

Es un método del DOM que se utiliza para seleccionar un elemento HTML específico mediante su atributo *id. Este método devuelve una referencia al primer elemento que coincide con el id proporcionado, lo que permite manipular sus propiedades y métodos en JavaScript.

Ejemplo 1:

Usamos getElementById para seleccionar el elemento <div> con el id miDiv. Luego, cambiamos su contenido utilizando la propiedad textContent, actualizando el texto a “¡Hola, DOM!”. Esto muestra cómo manipular el contenido de un elemento del DOM de manera sencilla.

// Suponiendo que tenemos el siguiente HTML:
// <div id="miDiv">Hola, mundo!</div>

// Seleccionamos el elemento y cambiamos su contenido
let div = document.getElementById("miDiv");
div.textContent = "¡Hola, DOM!"; // Cambia el texto a "¡Hola, DOM!"

Ejemplo 2:

Para este ejemplo, al hacer clic en el botón, se actualiza el texto del párrafo para mostrar “¡Botón clicado!”, ilustrando cómo se pueden manejar eventos y manipular el contenido del DOM.

<!-- HTML -->
<button id="miBoton">Haz clic aquí</button>
<p id="mensaje"></p>

// JavaScript
let boton = document.getElementById("miBoton");
let mensaje = document.getElementById("mensaje");

boton.addEventListener("click", function() {
  mensaje.textContent = "¡Botón clicado!";
});

Selección de elementos

Se pueden seleccionar elementos del DOM utilizando métodos como getElementById, querySelector, y querySelectorAll, facilitando el acceso y la manipulación de nodos específicos.

Ejemplo 1: Usando el Método getElementById

En este ejemplo, se utiliza el método getElementById para seleccionar un elemento del DOM basado en su atributo id. Almacenamos el elemento en la variable div, y luego usamos textContent para acceder y mostrar su contenido en la consola. Este método es útil para acceder rápidamente a un solo elemento cuando se conoce su id.

<!-- HTML -->
<div id="miDiv">Hola, mundo!</div>

// JavaScript
let div = document.getElementById("miDiv");
console.log(div.textContent); // Imprime: "Hola, mundo!"

Ejemplo 2: querySelector y querySelectorAll

El selector querySelector selecciona el primer elemento que coincide con el selector CSS .item, permitiendo acceder a su contenido. Luego, querySelectorAll obtiene todos los elementos que coinciden, devolviendo una NodeList. Utilizamos forEach para recorrer esta lista y mostrar el contenido de cada elemento en la consola. Esto es útil para trabajar con múltiples elementos de manera eficiente.

<!-- HTML -->
<ul>
  <li class="item">Elemento 1</li>
  <li class="item">Elemento 2</li>
  <li class="item">Elemento 3</li>
</ul>

// JavaScript
let primerItem = document.querySelector(".item");
console.log(primerItem.textContent); // Imprime: "Elemento 1"

let todosLosItems = document.querySelectorAll(".item");
todosLosItems.forEach(item => {
  console.log(item.textContent); // Imprime todos los elementos de la lista
});

Modificar contenido HTML

Se puede cambiar el contenido de los elementos HTML usando propiedades como innerHTML para insertar HTML, textContent para texto puro, y setAttribute para modificar atributos.

Ejemplo 1: Usando innerHTML

innerHTML se utiliza para reemplazar el contenido del div con HTML. Esto permite insertar elementos HTML, lo que puede ser útil para dar formato al texto o agregar otros elementos dentro del contenedor.

<!-- HTML -->
<div id="miDiv">Texto original.</div>

// JavaScript
let div = document.getElementById("miDiv");
div.innerHTML = "<strong>Texto modificado con HTML.</strong>"; // Cambia el contenido a HTML

Ejemplo 2: Usando textContent

Aquí, textContent se usa para cambiar el texto del párrafo. A diferencia de innerHTML, este método asegura que solo se inserte texto puro, sin interpretar etiquetas HTML, lo que evita problemas de seguridad y mantiene el contenido simple.

<!-- HTML -->
  <p id="miParrafo">Este es un párrafo.</p>

// JavaScript
let parrafo = document.getElementById("miParrafo");
parrafo.textContent = "Este es el nuevo contenido del párrafo."; // Cambia el texto sin HTML

Estilos en el DOM

La manipulación de estilos se realiza a través de classList para agregar o eliminar clases, y style para modificar estilos en línea, permitiendo cambios dinámicos en la presentación de los elementos.

Ejemplo 1: Usando classList

Para este ejemplo, se usa classList.toggle() para alternar una clase en el elemento div cuando se hace clic en el botón. Esto permite cambiar su estilo dinámicamente, aplicando o quitando la clase “resaltado”, que podría definir estilos en CSS para resaltar el div.

<!-- HTML -->
  <button id="miBoton">Cambiar Estilo</button>
  <div id="miCaja" class="caja">¡Hola!</div>

// JavaScript
let boton = document.getElementById("miBoton");
let caja = document.getElementById("miCaja");

boton.addEventListener("click", () => {
  caja.classList.toggle("resaltado"); // Alterna la clase "resaltado"
});

Ejemplo 2: Usando style

En este caso, se utiliza la propiedad style para cambiar el color de fondo de un div a rojo cuando se hace clic en el botón. Esto permite realizar cambios de estilo en línea, lo que puede ser útil para modificaciones rápidas y específicas sin necesidad de cambiar las clases de CSS.

<!-- HTML -->
<div id="miCaja" style="width: 100px; height: 100px; background-color: blue;"></div>
<button id="cambiarColor">Cambiar Color</button>

// JavaScript
let caja = document.getElementById("miCaja");
let boton = document.getElementById("cambiarColor");

boton.addEventListener("click", () => {
  caja.style.backgroundColor = "red"; // Cambia el color de fondo a rojo
});

Eventos más comunes en JavaScript

El manejo de eventos se logra con addEventListener, que permite ejecutar funciones en respuesta a eventos como click, input, y keydown, enriqueciendo la interactividad de la aplicación web.

Ejemplo 1: Evento click

En este ejemplo, se utiliza addEventListener para detectar el evento click en un botón. Cuando el botón es clickeado, se actualiza el contenido de un párrafo, mejorando la interacción del usuario con la página.

<!-- HTML -->
<button id="miBoton">Haz clic aquí</button>
<p id="mensaje"></p>

// JavaScript
let boton = document.getElementById("miBoton");
let mensaje = document.getElementById("mensaje");

boton.addEventListener("click", () => {
  mensaje.textContent = "¡Botón clickeado!"; // Muestra un mensaje al hacer clic
});

Ejemplo 2: Evento input

El evento input se usa para detectar cambios en un campo de texto. Cada vez que el usuario escribe, el contenido del párrafo se actualiza para reflejar lo que se está escribiendo, lo que proporciona una experiencia interactiva y en tiempo real.

<!-- HTML -->
<input type="text" id="miInput" placeholder="Escribe algo...">
<p id="resultado"></p>

// JavaScript
let input = document.getElementById("miInput");
let resultado = document.getElementById("resultado");

input.addEventListener("input", () => {
  resultado.textContent = "Escribiste: " + input.value; // Muestra lo que se escribe
});

Ejemplo 3: Evento change con un <select>

El evento change se activa cuando el usuario selecciona una opción de un menú desplegable. El párrafo se actualiza para mostrar la opción seleccionada, mejorando la interacción del usuario.

<!-- HTML -->
<select id="miSelect">
  <option value="">Selecciona una opción</option>
  <option value="opcion1">Opción 1</option>
  <option value="opcion2">Opción 2</option>
</select>
<p id="resultado"></p>

// JavaScript
let select = document.getElementById("miSelect");
let resultado = document.getElementById("resultado");

select.addEventListener("change", () => {
  resultado.textContent = `Seleccionaste: ${select.value}`; // Muestra la opción seleccionada
});

Ejemplo 4: Evento change con un <input> de tipo checkbox

Recordar que el evento change se utiliza para un checkbox. Cuando el usuario activa o desactiva la opción, el texto del párrafo se actualiza para reflejar si las notificaciones están activadas o desactivadas, haciendo la aplicación más informativa.

<!-- HTML -->
<input type="checkbox" id="miCheckbox">
<label for="miCheckbox">Activar notificaciones</label>
<p id="estado"></p>

// JavaScript
let checkbox = document.getElementById("miCheckbox");
let estado = document.getElementById("estado");

checkbox.addEventListener("change", () => {
  estado.textContent = checkbox.checked ? "Notificaciones activadas" : "Notificaciones desactivadas"; // Muestra el estado
});

Evento keydown

Este evento se activa cuando una tecla es presionada.

document.addEventListener("keydown", (event) => {
  console.log("Tecla presionada: " + event.key);
});

Evento mouseover

El evento mouseover que se activa cuando el cursor se mueve sobre un elemento.

div.addEventListener("mouseover", () => {
  console.log("Cursor sobre el div!");
});

Evento mouseout

El evento mouseout se activa cuando el cursor sale de un elemento.

div.addEventListener("mouseout", () => {
  console.log("Cursor fuera del div!");
});

Evento submit

El evento submit se activa cuando un usuario envía un formulario, ya sea haciendo clic en un botón de envío o presionando la tecla Enter. Este evento permite validar los datos antes de enviarlos, asegurando que la información sea correcta. Además, se puede prevenir el comportamiento predeterminado del formulario, como la recarga de la página, para manejar el envío de manera asíncrona con JavaScript.

form.addEventListener("submit", (event) => {
  event.preventDefault(); // Previene el envío real del formulario
  console.log("Formulario enviado!");
});

Evento onchange con un <input>

El evento onchange se activa cuando el contenido de un campo de entrada cambia y pierde el foco. En este ejemplo, el párrafo se actualiza para mostrar el texto ingresado por el usuario.

<input type="text" id="miInput" placeholder="Escribe algo...">
  <p id="resultado"></p>

// JavaScript
  let input = document.getElementById("miInput");
  let resultado = document.getElementById("resultado");

  input.addEventListener("change", () => {
      resultado.textContent = `Ingresaste: ${input.value}`; // Muestra el texto ingresado
  });