Manipulación del DOM

1<!-- HTML -->
2<div id="mensaje">
3  <h1>¡Hola!</h1>
4  <p class="texto">Bienvenido a la web</p>
5</div>
6 
7<script>
8// JavaScript puede acceder y modificar estos elementos
9const div = document.getElementById('mensaje');
10const parrafo = document.querySelector('.texto');
11 
12// Cambiar el texto
13parrafo.textContent = '¡Texto modificado desde JavaScript!';
14</script>

1// querySelector - Devuelve el PRIMER elemento que coincide
2const titulo = document.querySelector('h1');
3const primerBoton = document.querySelector('.btn');
4const elemento = document.querySelector('#menu');
5 
6// querySelectorAll - Devuelve TODOS los elementos que coinciden
7const todosLosParrafos = document.querySelectorAll('p');
8const todosBotones = document.querySelectorAll('.btn');
9 
10// Iterar sobre los elementos
11todosLosParrafos.forEach(parrafo => {
12    console.log(parrafo.textContent);
13});

1// Por ID (más rápido, pero menos flexible)
2const header = document.getElementById('header');
3 
4// Por clase (devuelve HTMLCollection, no Array)
5const botones = document.getElementsByClassName('btn');
6 
7// Por etiqueta
8const parrafos = document.getElementsByTagName('p');
9 
10// ⚠️ HTMLCollection NO es un array real
11// Para usar forEach, conviértelo a array:
12Array.from(botones).forEach(btn => {
13    console.log(btn);
14});

1// querySelector - Devuelve UN ELEMENTO (Element) o null
2const titulo = document.querySelector('h1');
3console.log(titulo);  // <h1>...</h1>
4// ✅ Puedes acceder directamente a propiedades
5titulo.textContent = 'Nuevo título';
6 
7// querySelectorAll - Devuelve un NODELIST (parecido a array)
8const parrafos = document.querySelectorAll('p');
9console.log(parrafos);  // NodeList(3) [p, p, p]
10// ✅ Tiene forEach
11parrafos.forEach(p => console.log(p));
12// ❌ NO tiene map, filter, reduce
13// parrafos.map(p => p.textContent);  // ERROR!
14 
15// getElementsByClassName - Devuelve un HTMLCOLLECTION
16const botones = document.getElementsByClassName('btn');
17console.log(botones);  // HTMLCollection(2) [button.btn, button.btn]
18// ❌ NO tiene forEach ni map
19// botones.forEach(btn => console.log(btn));  // ERROR!
20 
21// getElementById - Devuelve UN ELEMENTO o null
22const header = document.getElementById('header');
23console.log(header);  // <header id="header">...</header>

1// Problema: querySelectorAll devuelve NodeList sin map/filter
2const parrafos = document.querySelectorAll('p');
3// parrafos.map(p => p.textContent);  // ❌ ERROR!
4 
5// Solución 1: Array.from()
6const textos1 = Array.from(parrafos).map(p => p.textContent);
7console.log(textos1);  // ['Texto 1', 'Texto 2', 'Texto 3']
8 
9// Solución 2: Spread operator [...]
10const textos2 = [...parrafos].map(p => p.textContent);
11 
12// Solución 3: Array.prototype.slice
13const textos3 = Array.prototype.slice.call(parrafos).map(p => p.textContent);
14 
15// Lo mismo para HTMLCollection
16const botones = document.getElementsByClassName('btn');
17const arrayBotones = Array.from(botones);
18arrayBotones.forEach(btn => btn.classList.add('activo'));
19arrayBotones.filter(btn => btn.disabled === false);
20arrayBotones.map(btn => btn.textContent);

1const titulo = document.querySelector('h1');
2const contenedor = document.querySelector('#contenedor');
3 
4// textContent - Solo texto (más seguro)
5titulo.textContent = '¡Nuevo título!';
6 
7// innerHTML - Puede incluir HTML (cuidado con XSS)
8contenedor.innerHTML = '<p>Nuevo <strong>párrafo</strong></p>';
9 
10// Leer el contenido
11console.log(titulo.textContent);  // "¡Nuevo título!"
12 
13// Diferencia entre textContent e innerHTML
14const div = document.querySelector('#ejemplo');
15div.innerHTML = '<strong>Negrita</strong>';
16console.log(div.textContent);  // "Negrita" (sin etiquetas)
17console.log(div.innerHTML);    // "<strong>Negrita</strong>" (con etiquetas)

1const imagen = document.querySelector('img');
2const enlace = document.querySelector('a');
3const input = document.querySelector('input');
4 
5// Cambiar atributos
6imagen.src = 'nueva-imagen.jpg';
7imagen.alt = 'Descripción de la imagen';
8 
9enlace.href = 'https://ejemplo.com';
10enlace.target = '_blank';
11 
12input.value = 'Texto por defecto';
13input.placeholder = 'Escribe algo...';
14 
15// getAttribute y setAttribute (forma genérica)
16const dataId = enlace.getAttribute('data-id');
17enlace.setAttribute('data-id', '123');
18 
19// Verificar si tiene un atributo
20if (enlace.hasAttribute('target')) {
21    console.log('El enlace se abre en nueva pestaña');
22}
23 
24// Eliminar un atributo
25enlace.removeAttribute('target');

1const boton = document.querySelector('.btn');
2 
3// Añadir una clase
4boton.classList.add('activo');
5boton.classList.add('btn-grande', 'destacado');  // Múltiples clases
6 
7// Eliminar una clase
8boton.classList.remove('activo');
9 
10// Alternar una clase (toggle)
11boton.classList.toggle('activo');  // Si existe, la elimina. Si no, la añade
12 
13// Verificar si tiene una clase
14if (boton.classList.contains('activo')) {
15    console.log('El botón está activo');
16}
17 
18// Reemplazar una clase
19boton.classList.replace('btn-grande', 'btn-pequeño');
20 
21// Ver todas las clases
22console.log(boton.classList);  // DOMTokenList ["btn", "activo"]

1const caja = document.querySelector('.caja');
2 
3// Modificar estilos inline
4caja.style.backgroundColor = '#3b82f6';
5caja.style.color = 'white';
6caja.style.padding = '20px';
7caja.style.borderRadius = '10px';
8 
9// Propiedades CSS con guiones → camelCase
10caja.style.fontSize = '18px';        // font-size
11caja.style.marginTop = '10px';       // margin-top
12 
13// ⚠️ Esto crea estilos inline (no recomendado)
14// Mejor usar classList para añadir/quitar clases CSS

1<!-- HTML inicial -->
2<div id="contenedor">
3    <p>Primer párrafo existente</p>
4</div>
5 
6<style>
7    #contenedor {
8        border: 2px solid #3b82f6;
9        padding: 20px;
10        margin: 20px 0;
11    }
12 
13    .destacado {
14        background-color: #fbbf24;
15        color: #1f2937;
16        padding: 10px;
17        border-radius: 5px;
18        font-weight: bold;
19    }
20</style>
21 
22<script>
23// 1. Crear un elemento
24const nuevoParrafo = document.createElement('p');
25 
26// 2. Configurar el elemento
27nuevoParrafo.textContent = 'Este es un nuevo párrafo';
28nuevoParrafo.classList.add('destacado');
29 
30// 3. Añadir al DOM
31const contenedor = document.querySelector('#contenedor');
32contenedor.append(nuevoParrafo);  // Al final del contenedor
33 
34// Resultado:
35// <div id="contenedor">
36//     <p>Primer párrafo existente</p>
37//     <p class="destacado">Este es un nuevo párrafo</p>
38// </div>
39</script>

1<!-- HTML inicial -->
2<div id="contenedor">
3    <p>Párrafo del medio</p>
4</div>
5 
6<script>
7const contenedor = document.querySelector('#contenedor');
8 
9// 1. append() - Añade AL FINAL del contenedor
10const p1 = document.createElement('p');
11p1.textContent = 'Al final';
12contenedor.append(p1);
13 
14// 2. prepend() - Añade AL PRINCIPIO del contenedor
15const p2 = document.createElement('p');
16p2.textContent = 'Al principio';
17contenedor.prepend(p2);
18 
19// 3. before() - Añade ANTES del contenedor (como hermano)
20const p3 = document.createElement('p');
21p3.textContent = 'Antes del contenedor';
22contenedor.before(p3);
23 
24// 4. after() - Añade DESPUÉS del contenedor (como hermano)
25const p4 = document.createElement('p');
26p4.textContent = 'Después del contenedor';
27contenedor.after(p4);
28 
29// Resultado final:
30// <p>Antes del contenedor</p>
31// <div id="contenedor">
32//     <p>Al principio</p>
33//     <p>Párrafo del medio</p>
34//     <p>Al final</p>
35// </div>
36// <p>Después del contenedor</p>
37</script>

1const elemento = document.querySelector('.eliminar');
2 
3// Forma moderna (recomendada)
4elemento.remove();
5 
6// Forma antigua (todavía funcional)
7elemento.parentNode.removeChild(elemento);
8 
9// Eliminar todos los hijos de un contenedor
10const contenedor = document.querySelector('#contenedor');
11contenedor.innerHTML = '';  // Vaciar completamente
12 
13// O usando un bucle
14while (contenedor.firstChild) {
15    contenedor.removeChild(contenedor.firstChild);
16}

1const elemento = document.querySelector('.item');
2 
3// Padres
4elemento.parentNode;           // Nodo padre
5elemento.parentElement;        // Elemento padre
6elemento.closest('.contenedor'); // Ancestro más cercano que coincide
7 
8// Hijos
9elemento.children;             // HTMLCollection de hijos
10elemento.firstElementChild;    // Primer hijo
11elemento.lastElementChild;     // Último hijo
12elemento.childNodes;           // Todos los nodos (incluye texto)
13 
14// Hermanos
15elemento.nextElementSibling;   // Siguiente hermano
16elemento.previousElementSibling; // Hermano anterior