JavaScript
Explica cómo representar, consultar y modificar documentos con el DOM, crear nodos y actualizar la interfaz evitando trabajo innecesario.
El es un modelo de objetos que representa un documento como un árbol de nodos.
<main>
<h1>Products</h1>
<button>Save</button>
</main>Representación conceptual:
Document
└─ html
└─ body
└─ main
├─ h1
└─ buttonDocument: entrada al documento.Node: base para elementos, texto, comentarios y otros nodos.Element: nodo que representa una etiqueta.HTMLElement: elemento HTML con capacidades adicionales.const button = document.querySelector("button");
button instanceof Element; // true
button instanceof HTMLElement; // true en HTMLconst app = document.getElementById("app");
const button = document.querySelector(
"[data-action='save']",
);
const items = document.querySelectorAll(".item");querySelector retorna el primer match o null.
querySelectorAll retorna una NodeList estática.
if (!button) {
throw new Error("Save button was not found");
}No uses una aserción mental de que el elemento siempre existe; el documento y el momento de ejecución forman parte del contrato.
document.querySelectorAll(".item");Devuelve normalmente una colección estática.
document.getElementsByClassName("item");Devuelve una HTMLCollection viva que refleja cambios posteriores.
Las colecciones vivas pueden cambiar mientras las recorres y producir resultados inesperados.
element.parentElement;
element.children;
element.firstElementChild;
element.nextElementSibling;Para nodos generales:
node.parentNode;
node.childNodes;
node.firstChild;children contiene elementos; childNodes también puede incluir texto y comentarios.
const card = button.closest("[data-card]");
button.matches("button.primary");closest busca desde el elemento hacia sus ancestros. Es especialmente útil en delegación de eventos.
const item = document.createElement("li");
item.className = "product-item";
item.textContent = product.name;Insertar:
list.append(item);
list.prepend(item);
reference.before(item);
reference.after(item);
reference.replaceWith(item);Un nodo solo puede ocupar un lugar del árbol. Insertarlo en otro sitio lo mueve.
const fragment = document.createDocumentFragment();
for (const product of products) {
const item = document.createElement("li");
item.textContent = product.name;
fragment.append(item);
}
list.append(fragment);El fragmento permite preparar un grupo sin insertarlo elemento por elemento. No garantiza por sí solo que cualquier código sea rápido; el patrón reduce trabajo observable sobre el documento.
element.textContent = userInput;Trata el valor como texto. Suele ser la opción correcta para información no confiable.
Refleja texto renderizado y puede necesitar consultar estilos y layout. Su semántica es visual, no solo estructural.
element.innerHTML = markup;Parsea HTML. Insertar texto no confiable puede producir XSS.
No uses innerHTML únicamente por comodidad. Construye nodos o utiliza una política de sanitización confiable cuando realmente necesitas HTML.
<input value="initial">input.getAttribute("value");
input.value;El atributo representa el valor declarado; la propiedad puede reflejar el estado actual del control.
input.setAttribute("disabled", "");
input.disabled = true;Para boolean attributes, la presencia del atributo comunica verdadero; disabled="false" continúa presente.
<button data-product-id="product-1"></button>button.dataset.productId;dataset expone strings. Convierte y valida cuando necesitas números, booleanos u otras estructuras.
element.classList.add("active");
element.classList.remove("active");
element.classList.toggle("active", isActive);
element.classList.contains("active");Cambiar clases suele separar mejor comportamiento y presentación que escribir múltiples estilos inline.
element.style.width = "200px";Solo refleja estilos inline.
const styles = getComputedStyle(element);
styles.width;Consulta el resultado calculado y puede forzar trabajo de estilo o layout si se combina con escrituras pendientes.
Peligroso:
for (const item of items) {
item.style.width = `${item.offsetWidth + 10}px`;
}Alternar lecturas geométricas y escrituras puede obligar al navegador a recalcular repetidamente.
Agrupa lecturas y después escrituras cuando el rendimiento sea relevante.
const rect = element.getBoundingClientRect();Entrega coordenadas respecto al viewport en ese momento. Scroll, zoom, fuentes y layout pueden cambiar el resultado.
Para observar visibilidad o tamaño, APIs como IntersectionObserver y ResizeObserver suelen expresar mejor la necesidad que consultar constantemente en scroll.
const formData = new FormData(form);Los controles tienen propiedades como value, checked, files y validación nativa. No confíes únicamente en el DOM; el servidor debe validar nuevamente.
element.remove();Eliminar un nodo del documento no garantiza que sea recolectado si listeners, closures, arrays u otras referencias todavía lo conservan.
const observer = new MutationObserver((records) => {
console.log(records);
});
observer.observe(target, {
childList: true,
subtree: true,
});Las callbacks se entregan mediante microtasks. Desconecta cuando ya no necesitas observar.
observer.disconnect();Cambiar el DOM también cambia la experiencia de tecnologías asistivas.
div clickable.La accesibilidad no se soluciona añadiendo ARIA a una estructura incorrecta.
function createProductItem(product) {
const item = document.createElement("li");
const title = document.createElement("h2");
const price = document.createElement("span");
title.textContent = product.name;
price.textContent = formatPrice(product.price);
item.dataset.productId = product.id;
item.append(title, price);
return item;
}Los datos se insertan como texto y la estructura permanece explícita.
¿Por qué input.getAttribute("value") y input.value pueden devolver valores distintos?
El atributo conserva el valor declarado en el markup, mientras que la propiedad refleja el estado actual del control después de interacción o asignaciones.
Eventos, propagación y delegación explica cómo el navegador comunica interacciones y cambios.