Seleccionando Elementos del DOM.

Antes de poder manipular el DOM, primero debemos seleccionar los elementos con los que queremos interactuar. JavaScript proporciona varias formas de hacer esto, incluyendo los métodos getElementById, getElementsByClassName, getElementsByTagName y querySelector. Veamos un ejemplo de cómo seleccionar un elemento por su ID:

// Seleccionar un elemento por su ID
var miElemento = document.getElementById('mi-elemento');

Modificando el Contenido del DOM.

Una vez que hemos seleccionado un elemento, podemos modificar su contenido, atributos, estilos, entre otros. Por ejemplo, para cambiar el texto de un elemento, podemos usar la propiedad textContent o innerHTML:

// Cambiar el texto de un elemento
miElemento.textContent = 'Nuevo texto para mi elemento';

Agregando y Eliminando Elementos

Además de modificar elementos existentes, también podemos agregar y eliminar elementos del DOM dinámicamente. Por ejemplo, para agregar un nuevo elemento a un contenedor existente, podemos crear un nuevo elemento con document.createElement y luego adjuntarlo al contenedor con appendChild:

// Crear un nuevo elemento
var nuevoElemento = document.createElement('div');
nuevoElemento.textContent = '¡Nuevo elemento agregado!';
// Agregar el nuevo elemento al DOM
miContenedor.appendChild(nuevoElemento);

De manera similar, para eliminar un elemento del DOM, podemos utilizar el método removeChild:

// Eliminar un elemento del DOM
miContenedor.removeChild(elementoAEliminar);

Modificando Estilos y Atributos.

También podemos modificar los estilos y atributos de los elementos del DOM utilizando JavaScript. Por ejemplo, para cambiar el color de fondo de un elemento, podemos modificar su propiedad backgroundColor:

// Cambiar el color de fondo de un elemento
miElemento.style.backgroundColor = 'blue';