DOM Manipulation

Controla elementos HTML desde JavaScript con querySelector, innerHTML, classList y style.

📖

Teoría

El DOM (Document Object Model) es la representación en memoria de la página HTML. JavaScript puede leer y modificar cualquier elemento del DOM.

Métodos principales para seleccionar:

document.querySelector(selector) → primer elemento que coincide

document.querySelectorAll(selector) → todos los que coinciden

document.getElementById(id) → por id

Propiedades para modificar:

.textContent → solo texto (más seguro)

.innerHTML → HTML como string

.style.propiedad → estilos inline

.classList.add/remove/toggle → clases CSS

javascript

// Seleccionar
const titulo = document.querySelector("h1");
const boton = document.querySelector("#mi-btn");
const items = document.querySelectorAll(".item");

// Leer y escribir contenido
console.log(titulo.textContent);
titulo.textContent = "Nuevo título";
titulo.innerHTML = "Título con <strong>negrita</strong>";

// Estilos
titulo.style.color = "#4F8EF7";
titulo.style.fontSize = "2rem";

// Clases CSS
boton.classList.add("activo");
boton.classList.remove("inactivo");
boton.classList.toggle("visible"); // agrega si no tiene, quita si tiene
console.log(boton.classList.contains("activo")); // true

// Crear y agregar elementos
const nuevoItem = document.createElement("li");
nuevoItem.textContent = "Nuevo elemento";
document.querySelector("ul").appendChild(nuevoItem);

⚡

Ejercicio práctico

🎯 Tu misión

Crea una UI interactiva: un contador con botones de + y -, un campo de texto que muestra el texto en tiempo real, y un toggle de tema oscuro/claro. Todo con JavaScript puro.

Console

Los mensajes de console.log aparecerán aquí

Vista previa

←Capítulo anterior

Siguiente capítulo→