🚀 JavaScript y el DOM

JavaScript es un lenguaje de programación que permite añadir interactividad a las páginas web. Uno de sus usos más importantes es la manipulación del **DOM (Document Object Model)**, la estructura jerárquica que representa los elementos HTML en la página.

📌 ¿Qué es el DOM?

El **DOM (Modelo de Objetos del Documento)** es una interfaz de programación que representa la estructura de un documento HTML como un árbol de nodos.

📜 Ejemplo de Estructura del DOM

Cuando un navegador carga una página web, genera un **árbol DOM** basado en el código HTML. Un documento básico como el siguiente:

<html>
    <head>
        <title>Ejemplo</title>
    </head>
    <body>
        <h1>Hola, Mundo!</h1>
        <p>Este es un párrafo.</p>
    </body>
</html>

Se representa internamente en el DOM de la siguiente manera:

📌 Métodos para Manipular el DOM

JavaScript permite acceder y modificar los elementos del DOM a través de métodos como:

📌 `document.getElementById("id")` - Selecciona un elemento por su ID.
🏷 `document.getElementsByClassName("clase")` - Obtiene una lista de elementos con una clase específica.
📝 `document.querySelector("selector")` - Selecciona el primer elemento que coincide con un selector CSS.
📢 `document.querySelectorAll("selector")` - Selecciona todos los elementos que coinciden con un selector CSS.
🖋 `element.innerHTML` - Modifica el contenido HTML de un elemento.
🔄 `element.style.color = "blue"` - Modifica estilos CSS en un elemento.
🎭 `element.addEventListener("click", function)` - Agrega eventos a los elementos.

📌 Ejemplo Práctico

A continuación, un ejemplo sencillo para cambiar el texto de un párrafo con JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo DOM</title>
    <script>
        function cambiarTexto() {
            document.getElementById("mensaje").innerHTML = "¡Texto cambiado con JavaScript!";
        }
    </script>
</head>
<body>
    <p id="mensaje">Este es un texto inicial.</p>
    <button onclick="cambiarTexto()">Cambiar Texto</button>
</body>
</html>

En este código:

📌 Se define un botón que al hacer clic llama a la función `cambiarTexto()`.
📌 La función selecciona el párrafo con `document.getElementById("mensaje")`.
📌 Luego cambia su contenido usando `.innerHTML`.

📂 Enlaces a Recursos

Accede a los siguientes apartados para profundizar más en JavaScript y el DOM: