Manipulación del DOM en JavaScript

1. Selección de Elementos del DOM

Cómo seleccionar elementos con distintos métodos:

// Selección por ID
const titulo = document.getElementById('miTitulo');

// Selección por clase
const elementos = document.getElementsByClassName('miClase');

// Selección por selector CSS
const parrafo = document.querySelector('p');
const todosLosParrafos = document.querySelectorAll('p');
            

2. Modificación de Contenido

Modificar el contenido de los elementos seleccionados:

// Cambiar el texto de un elemento
const titulo = document.getElementById('miTitulo');
titulo.textContent = 'Nuevo Título Modificado';

// Cambiar el contenido HTML
const parrafo = document.querySelector('p');
parrafo.innerHTML = 'Párrafo Modificado';
            

3. Manipulación de Atributos y Estilos

Cómo modificar atributos y estilos:

// Cambiar un atributo
const enlace = document.querySelector('a');
enlace.setAttribute('href', 'https://www.ejemplo.com');

// Cambiar estilos
const caja = document.querySelector('.miClase');
caja.style.backgroundColor = 'blue';
            

4. Creación y Eliminación de Elementos

Agregar y eliminar elementos en el DOM:

// Crear un nuevo elemento
const nuevoDiv = document.createElement('div');
nuevoDiv.textContent = 'Soy un nuevo DIV';
document.body.appendChild(nuevoDiv);

// Eliminar un elemento
const elementoParaEliminar = document.querySelector('p');
elementoParaEliminar.remove();
            

Conclusión

El DOM te permite interactuar dinámicamente con elementos HTML, abriendo posibilidades para crear aplicaciones web interactivas.