Manipulacion del DOM

El DOM (Document Object Model)

El DOM es una representacion en forma de arbol de tu pagina HTML. JavaScript puede acceder y modificar el DOM para crear paginas interactivas.

Seleccionando Elementos

// Por ID (retorna un elemento)
const encabezado = document.getElementById("encabezado");

// Por selector CSS (primer coincidencia)
const primerBoton = document.querySelector(".boton");
const primerParrafo = document.querySelector("p");

// Por selector CSS (todos los que coinciden)
const todosLosBotones = document.querySelectorAll(".boton");
const todosLosParrafos = document.querySelectorAll("p");

// Por clase (HTMLCollection)
const items = document.getElementsByClassName("item");

// Por etiqueta (HTMLCollection)
const divs = document.getElementsByTagName("div");

// Consejo: usa querySelector y querySelectorAll para todo

Modificando Contenido

const elemento = document.querySelector("#mi-elemento");

// Texto interno (solo texto)
elemento.textContent = "Nuevo texto";

// HTML interno (puede incluir etiquetas)
elemento.innerHTML = "<strong>Texto en negrita</strong>";

// HTML externo (reemplaza el elemento completo)
elemento.outerHTML = "<div id='nuevo'>Nuevo elemento</div>";

// Atributos
elemento.setAttribute("class", "destacado");
elemento.getAttribute("id");
elemento.removeAttribute("class");

// Acceso directo a atributos comunes
elemento.id = "nuevo-id";
elemento.className = "clase1 clase2";
elemento.src = "imagen.jpg"; // para <img>
elemento.href = "pagina.html"; // para <a>

Modificando Estilos

const elemento = document.querySelector(".caja");

// Estilos en linea (propiedad style)
elemento.style.backgroundColor = "blue";
elemento.style.fontSize = "20px";
elemento.style.display = "flex";

// Multiples estilos
Object.assign(elemento.style, {
  backgroundColor: "red",
  padding: "10px",
  borderRadius: "5px"
});

// Clases CSS (recomendado)
elemento.classList.add("activo");
elemento.classList.remove("inactivo");
elemento.classList.toggle("visible");
elemento.classList.contains("activo"); // true/false
elemento.classList.replace("viejo", "nuevo");

Creando y Eliminando Elementos

// Crear elemento
const nuevoDiv = document.createElement("div");
nuevoDiv.textContent = "Soy nuevo!";
nuevoDiv.className = "tarjeta";

// Agregar al DOM
const contenedor = document.querySelector("#contenedor");
contenedor.appendChild(nuevoDiv);

// Insertar en posicion especifica
contenedor.insertBefore(nuevoDiv, contenedor.firstChild);

// Metodos modernos
contenedor.prepend(nuevoDiv); // Al inicio
contenedor.append(nuevoDiv);  // Al final
nuevoDiv.before(otroElemento); // Antes de nuevoDiv
nuevoDiv.after(otroElemento);  // Despues de nuevoDiv

// Eliminar elemento
nuevoDiv.remove();
// O: contenedor.removeChild(nuevoDiv);

// Clonar elemento
const clon = nuevoDiv.cloneNode(true); // true = clon profundo

Navegando el DOM

const elemento = document.querySelector(".item");

// Padre
elemento.parentElement;
elemento.parentNode;

// Hijos
elemento.children;        // HTMLCollection de hijos elemento
elemento.childNodes;      // NodeList (incluye nodos de texto)
elemento.firstElementChild;
elemento.lastElementChild;

// Hermanos
elemento.previousElementSibling;
elemento.nextElementSibling;

// Buscar ancestro
elemento.closest(".contenedor"); // Primer ancestro que coincide