¿Qué es DOM?
Imagina un documento HTML como un árbol genealógico. Cada elemento tiene un padre, puede haber hijos y vecinos. DOM es la forma en que el navegador organiza todos los elementos de la página como objetos JavaScript con los que se puede trabajar.
<!DOCTYPE html>
<html>
<body>
<h1>Привет, мир!</h1>
<p>Это параграф</p>
</body>
</html>En este ejemplo, <body> es el padre de <h1> y <p>, y ellos son sus hijos.
Buscar elementos en la página
Antes de cambiar algo, hay que encontrar el elemento. Hay varias maneras de hacerlo:
// Buscar por ID
const header = document.getElementById('main-header');
// Búsqueda por clase (devuelve una colección de elementos)
const buttons = document.getElementsByClassName('btn');
// Buscar por etiqueta
const paragraphs = document.getElementsByTagName('p');
// Métodos modernos (¡los más populares!)
const firstButton = document.querySelector('.btn'); // primer elemento
const allButtons = document.querySelectorAll('.btn'); // todos los elementosLos métodos querySelector y querySelectorAll son tus mejores amigos. Funcionan con cualquier selector CSS y son muy cómodos.
Cambio de contenido
Ahora que hemos encontrado el elemento, hagamos algo con él:
const title = document.querySelector('h1');
// Cambiar texto
title.textContent = 'New title';
// Editar HTML (puedes insertar etiquetas)
title.innerHTML = 'Title with <span>accent</span>';Importante: utiliza textContent para el texto normal y innerHTML solo cuando realmente necesites insertar HTML. Es más seguro.
Trabajar con atributos
Los atributos de los elementos también son fáciles de cambiar:
const link = document.querySelector('a');
// Obtener atributo
const href = link.getAttribute('href');
// Establecer atributo
link.setAttribute('href', 'https://example.com');
// Eliminar atributo
link.removeAttribute('target');
// Trabajar con clases
link.classList.add('active');
link.classList.remove('disabled');
link.classList.toggle('highlighted'); // cambiar de claseCambio de estilos
Los estilos CSS se pueden cambiar directamente desde JavaScript:
const box = document.querySelector('.box');
// Cambiar un estilo
box.style.backgroundColor = 'blue';
box.style.width = '200px';
// La mejor manera es a través de las clases
box.classList.add('big-box');Consejo: intenta cambiar los estilos a través de las clases, no directamente. Así es más fácil mantener el código.
Creación de nuevos elementos
Puedes crear elementos desde cero y añadirlos a la página:
// Crear elemento
const newDiv = document.createElement('div');
// Añadir contenido
newDiv.textContent = 'I am a new element!';
newDiv.classList.add('message');
// Añadir a la página
document.body.appendChild(newDiv); // al final del cuerpo
// O insertar en un lugar específico
const container = document.querySelector('.container');
container.appendChild(newDiv);Eliminación de elementos
Los elementos se pueden eliminar:
const oldElement = document.querySelector('.old');
// Un método moderno
oldElement.remove();
// Método antiguo (funciona en todas partes)
oldElement.parentNode.removeChild(oldElement);
Ejemplo práctico: lista de tareas
Vamos a crear una aplicación sencilla para la lista de tareas. Pruébala tú mismo:
Mis tareas
Aquí está el código que hace que esta aplicación funcione:
const input = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
addBtn.addEventListener('click', function() {
const taskText = input.value.trim();
if (taskText === '') return;
// Crear un nuevo elemento de lista
const li = document.createElement('li');
li.textContent = taskText;
// Añadimos la posibilidad de marcar una tarea
li.addEventListener('click', function() {
li.classList.toggle('completed');
});
// Botón de eliminación
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.className = 'delete-btn';
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation(); // para que no funcione el clic en li
li.remove();
});
li.appendChild(deleteBtn);
taskList.appendChild(li);
// Borramos el campo de entrada
input.value = '';
});
// Añadir con Enter
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addBtn.click();
}
});Consejos útiles
Almacena en caché los elementos. Si utilizas un elemento varias veces, guárdalo en una variable en lugar de volver a buscarlo.
// Malo
document.querySelector('.box').style.width = '100px';
document.querySelector('.box').style.height = '100px';
// Bien
const box = document.querySelector('.box');
box.style.width = '100px';
box.style.height = '100px';Utiliza la delegación de eventos. En lugar de añadir controladores a cada elemento, añade uno al elemento principal.
Minimiza el reflujo. Los cambios frecuentes en el DOM pueden ralentizar la página. Agrupa los cambios o usa DocumentFragment.
Comprueba la existencia de elementos antes de trabajar con ellos para evitar errores.
const element = document.querySelector('.maybe-exists');
if (element) {
element.textContent = 'Found it!';
}Conclusión
La manipulación de DOM es la base de las páginas web interactivas. Con su ayuda, puedes crear interfaces dinámicas, responder a las acciones del usuario y hacer que los sitios cobren vida. Practica, experimenta con ejemplos y pronto te resultará natural.
Puedes aprender Python y otros idiomas en Codice — tenemos una plataforma de aprendizaje conveniente con tareas prácticas.
Y también tenemos un genial canal de Telegram con una comunidad amistosa donde puedes hacer preguntas, compartir experiencias y crecer junto a personas de ideas afines.
Únete!