Modificación del DOM con JavaScript

1. Selección de Elementos

Para modificar un elemento del DOM, primero necesitas seleccionarlo. Las funciones más comunes son:


// Seleccionar un elemento por su ID
let titulo = document.getElementById("miTitulo");

// Seleccionar varios elementos por su clase
let elementos = document.getElementsByClassName("miClase");

// Seleccionar un solo elemento usando un selector CSS
let parrafo = document.querySelector("p");

// Seleccionar varios elementos usando un selector CSS
let parrafos = document.querySelectorAll("p");

2. Cambiar el Contenido de un Elemento

Puedes cambiar el contenido de un elemento utilizando las propiedades innerHTML o textContent:

// Cambiar el contenido HTML
document.getElementById("miTitulo").innerHTML = "Nuevo Título";

// Cambiar solo el texto (sin afectar etiquetas HTML)
document.getElementById("miTitulo").textContent = "Texto Simple";

3. Cambiar el Estilo de un Elemento

El estilo de los elementos también puede ser modificado mediante la propiedad style:

// Cambiar el color de texto
document.getElementById("miTitulo").style.color = "blue";

// Cambiar el tamaño de la fuente
document.getElementById("miTitulo").style.fontSize = "24px";

4. Añadir o Eliminar Clases CSS

Puedes modificar las clases de un elemento mediante las propiedades classList.add y classList.remove:

// Añadir una clase
document.getElementById("miTitulo").classList.add("destacado");

// Eliminar una clase
document.getElementById("miTitulo").classList.remove("destacado");

5. Crear y Añadir Nuevos Elementos al DOM

JavaScript te permite crear nuevos elementos y añadirlos al DOM:

// Crear un nuevo elemento 'p'
let nuevoParrafo = document.createElement("p");

// Añadir texto al nuevo elemento
nuevoParrafo.textContent = "Este es un nuevo párrafo.";

// Añadir el nuevo elemento al cuerpo del documento
document.body.appendChild(nuevoParrafo);

6. Eliminar Elementos del DOM

Para eliminar un elemento del DOM, utiliza el método remove():

// Seleccionar el elemento a eliminar
let elementoAEliminar = document.getElementById("miTitulo");

// Eliminar el elemento
elementoAEliminar.remove();

7. Modificar Atributos de un Elemento

Los atributos de los elementos también pueden ser modificados usando los métodos setAttribute y getAttribute:

// Modificar un atributo (por ejemplo, el 'src' de una imagen)
document.getElementById("miImagen").setAttribute("src", "nueva-imagen.jpg");

// Obtener el valor de un atributo
let atributo = document.getElementById("miImagen").getAttribute("src");