Dom HTML JS
Cargado por
Fernando GimenezDom HTML JS
Cargado por
Fernando GimenezDOM HTML Aplicado a JavaScript
1. Introducción Teórica: ¿Qué es el DOM?
El DOM (Document Object Model) o Modelo de Objetos del Documento es una interfaz de
programación para documentos HTML y XML. Cuando el navegador carga una página web,
transforma automáticamente el código HTML en una estructura de árbol lógica.
En este árbol, cada etiqueta, atributo y fragmento de texto se convierte en un "nodo" (un objeto) que
JavaScript puede entender, interactuar, modificar, añadir o eliminar en tiempo real. Esto permite que
las páginas web dejen de ser documentos estáticos y se transformen en aplicaciones interactivas.
La Estructura de Árbol
El DOM organiza los elementos de forma jerárquica siguiendo una lógica de relaciones (padres, hijos,
hermanos):
• El objeto principal y raíz global de todo en el entorno del navegador es window.
• Dentro de window, encontramos el objeto document, que representa de forma directa la página web
actual y sirve como punto de acceso al árbol HTML.
Representación Visual del Árbol del DOM y Manipulación
A continuación se presenta un gráfico detallado que ilustra cómo se estructura el árbol de nodos de
un documento HTML y un ejemplo conceptual de cómo JavaScript selecciona e interactúa con un
nodo específico:
2. Acceder a los Elementos del DOM (Selección)
Para operar con cualquier elemento HTML mediante JavaScript, el primer paso indispensable es
"encontrarlo" u obtener su referencia. Los métodos más extendidos, eficientes y modernos son los
siguientes:
• [Link]('id'): Selecciona un único elemento del documento utilizando el valor
exacto de su atributo id.
• [Link]('selector'): Selecciona el primer elemento que coincida con el selector
CSS provisto (puede ser una clase, un ID o una etiqueta).
• [Link]('selector'): Selecciona todos los elementos que coincidan con el
selector CSS, retornando una lista de nodos estática (NodeList) iterable.
Ejemplo Práctico de Selección:
// Estructura HTML Base
// <div id="contenedor-principal">
// <p class="texto-destacado">Primer párrafo.</p>
// <p class="texto-destacado">Segundo párrafo.</p>
// </div>
// 1. Seleccionar por ID único
const contenedor = [Link]('contenedor-principal');
// 2. Seleccionar únicamente el primer elemento con la clase indicada
const primerParrafo = [Link]('.texto-destacado');
// 3. Seleccionar TODOS los elementos con dicha clase y recorrerlos
const todosLosParrafos = [Link]('.texto-destacado');
[Link](parrafo => {
[Link]([Link]);
});
3. Manipulación del DOM (Modificar Contenido y
Atributos)
Una vez obtenida la referencia del nodo, JavaScript puede alterar sus propiedades de manera
inmediata, lo cual se refleja de forma instantánea en la pantalla del usuario.
• textContent: Modifica o devuelve el contenido de texto puro de un elemento, ignorando etiquetas
HTML.
• innerHTML: Permite leer o inyectar código HTML estructurado dentro del elemento (usar con
precaución ante ataques XSS).
• style: Interfaz que otorga acceso directo a los estilos CSS en línea del elemento.
• classList: Objeto especial para gestionar de forma limpia las clases CSS mediante métodos
como add(), remove() y toggle().
Ejemplo Práctico de Modificación y Estilos:
// Escenario: Al hacer clic en un botón, alteramos el estado de un div de alerta
const mensaje = [Link]('mensaje');
const cajaAlerta = [Link]('mi-alerta');
const boton = [Link]('btn-cambiar');
[Link]('click', () => {
// Modificación de texto plano
[Link] = "¡El proceso se completó con éxito!";
// Intercambio dinámico de clases de CSS
[Link]('alerta-info');
[Link]('alerta-exito');
// Alteración directa de propiedades de estilo en línea
[Link] = 'bold';
});
4. Creación y Eliminación Dinámica de Elementos
El DOM no es rígido; permite construir nuevos elementos desde la memoria e insertarlos en el flujo
del documento activo, así como remover componentes obsoletos.
• [Link]('etiqueta'): Instancia un nuevo elemento HTML en memoria según la
etiqueta especificada.
• [Link](elementoHijo): Inserta un nodo como el último hijo disponible de
un elemento padre determinado.
• [Link](): Elimina de forma directa el elemento en cuestión del árbol del documento.
Ejemplo Práctico: Implementación de una Lista de Tareas Dinámica:
const inputTarea = [Link]('nueva-tarea');
const btnAgregar = [Link]('btn-agregar');
const lista = [Link]('lista-tareas');
[Link]('click', () => {
const textoTarea = [Link]();
if (textoTarea !== "") {
// 1. Crear el elemento contenedor 'li'
const nuevoItem = [Link]('li');
[Link] = textoTarea;
// 2. Crear un botón interno para remover la tarea de forma independiente
const btnEliminar = [Link]('button');
[Link] = "❌";
[Link] = "10px";
// Asignar el evento de remoción al botón específico
[Link]('click', () => {
[Link]();
});
// 3. Vincular los componentes jerárquicamente
[Link](btnEliminar);
[Link](nuevoItem);
// 4. Limpieza del campo de entrada de texto
[Link] = "";
[Link]();
}
});
5. Resumen para el Capacitando: Regla de Oro
Para dominar el desarrollo del lado del cliente enfocado en el DOM, se debe aplicar sistemáticamente
la siguiente secuencia de tres fases:
• 1. Buscar: Localizar con precisión el nodo o grupo de nodos que van a sufrir cambios utilizando
los selectores apropiados.
• 2. Modificar o Crear: Alterar sus propiedades visuales, textos, inyectar código o fabricar nuevos
elementos de forma aislada en memoria.
• 3. Vincular y Activar: Incorporar los nuevos nodos al árbol activo mediante appendChild() o
escuchar sus interacciones mediante addEventListener().