Manipulación del DOM

Manipulación del DOM Fundamental

Tip

El DOM (Document Object Model) es la interfaz que nos permite interactuar con elementos HTML mediante JavaScript.

Selección de elementos Básico

Métodos tradicionales

// Por ID
const elemento = document.getElementById('miId');

// Por clase
const elementos = document.getElementsByClassName('miClase');

// Por etiqueta
const parrafos = document.getElementsByTagName('p');

Selectores modernos

// Seleccionar un elemento
const elemento = document.querySelector('.miClase');

// Seleccionar todos los elementos
const elementos = document.querySelectorAll('.miClase');

// Selectores complejos
const enlaces = document.querySelectorAll('nav a.activo');

Modificación de contenido y estilos Importante

Modificar contenido

const elemento = document.querySelector('#miElemento');

// Texto plano
elemento.textContent = 'Nuevo texto';

// HTML
elemento.innerHTML = '<strong>Texto en negrita</strong>';

// Atributos
elemento.setAttribute('class', 'destacado');
elemento.id = 'nuevoId';

Modificar estilos

const elemento = document.querySelector('#miElemento');

// Estilos directos
elemento.style.color = 'red';
elemento.style.backgroundColor = '#f0f0f0';
elemento.style.padding = '10px';

// Clases CSS
elemento.classList.add('destacado');
elemento.classList.remove('oculto');
elemento.classList.toggle('activo');
elemento.classList.replace('viejo', 'nuevo');

Creación y eliminación de elementos Avanzado

Crear elementos

// Crear elemento
const nuevoParrafo = document.createElement('p');
nuevoParrafo.textContent = 'Nuevo párrafo';

// Crear texto
const texto = document.createTextNode('Texto simple');

// Crear fragmento (para múltiples elementos)
const fragmento = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i + 1}`;
  fragmento.appendChild(li);
}

Insertar elementos

const contenedor = document.querySelector('#contenedor');
const nuevoElemento = document.createElement('div');

// Añadir al final
contenedor.appendChild(nuevoElemento);

// Añadir en posición específica
contenedor.insertBefore(nuevoElemento, contenedor.firstChild);

// Métodos modernos
contenedor.append(nuevoElemento);
contenedor.prepend(nuevoElemento);
contenedor.before(nuevoElemento);
contenedor.after(nuevoElemento);

Eliminar elementos

const elemento = document.querySelector('#eliminar');

// Eliminar directamente
elemento.remove();

// Eliminar desde el padre
elemento.parentNode.removeChild(elemento);

Navegación por el DOM Intermedio

Relaciones entre nodos

const elemento = document.querySelector('#miElemento');

// Padres
const padre = elemento.parentElement;
const padreNodo = elemento.parentNode;

// Hijos
const hijos = elemento.children;
const primerHijo = elemento.firstElementChild;
const ultimoHijo = elemento.lastElementChild;

// Hermanos
const siguiente = elemento.nextElementSibling;
const anterior = elemento.previousElementSibling;

Mejores prácticas Recomendado

Minimizar manipulaciones del DOM

// ❌ Malo
for (let i = 0; i < 100; i++) {
  contenedor.innerHTML += '<div>' + i + '</div>';
}

// ✅ Bueno
const fragmento = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  fragmento.appendChild(div);
}
contenedor.appendChild(fragmento);

Usar selectores eficientes

// ❌ Malo
document.querySelectorAll('div span a');

// ✅ Bueno
document.getElementById('miId');
document.querySelector('.clase-especifica');

Cachear referencias a elementos

// ❌ Malo
function actualizar() {
  document.getElementById('miElemento').textContent = 'Nuevo';
}

// ✅ Bueno
const elemento = document.getElementById('miElemento');
function actualizar() {
  elemento.textContent = 'Nuevo';
}