Introducción a JavaScript y Manipulación del DOM

Tiempo de lectura: < 1 minuto

JavaScript es un lenguaje de programación esencial para el desarrollo web. Con él, puedes hacer que tus sitios web sean interactivos y dinámicos al interactuar con el Document Object Model (DOM). El DOM es una representación en memoria de la estructura de tu página web, y JavaScript te permite acceder y modificar elementos en el DOM para crear cambios visuales y respuestas a las acciones del usuario.

Manipulación del DOM en JavaScript:

• Acceder a un Elemento por su ID:

// Obtener un elemento por su ID
const miElemento = document.getElementById("mi-id");

// Cambiar el contenido de un elemento
miElemento.innerHTML = "¡Hola, mundo!";

• Modificar Clases y Estilos:

// Agregar una clase a un elemento
miElemento.classList.add("nuevo-estilo");

// Cambiar el color de fondo
miElemento.style.backgroundColor = "azul";

• Crear Elementos y Añadirlos al DOM:

// Crear un nuevo elemento <p>
const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Este es un nuevo párrafo.";

// Añadirlo al final de un elemento padre
document.body.appendChild(nuevoParrafo);

• Modificar Atributos:

// Cambiar el atributo src de una imagen
const miImagen = document.querySelector("img");
miImagen.src = "nueva-imagen.jpg";

• Eliminar Elementos:

// Eliminar un elemento
const elementoAEliminar = document.getElementById("eliminar-me");
elementoAEliminar.remove();

La manipulación del DOM en JavaScript te permite crear efectos visuales, cambiar contenido, responder a eventos y mucho más. Con estos ejemplos, puedes comenzar a experimentar y hacer que tus sitios web sean más interactivos y atractivos para los usuarios.

Espero que os guste y os sirva😊