Introducción al DOM (Document Object Model)

El DOM es una representación en memoria de la estructura de un documento HTML. Permite acceder y manipular elementos en una página web.

        <script>
          // Acceso a un elemento por su id
          var titulo = document.getElementById("titulo");

          // Modificar el contenido
          titulo.textContent = "Bienvenido a la Lección 7";
        </script>
      

Selección de elementos del DOM

Es posible seleccionar elementos del DOM utilizando diferentes métodos, como getElementById, querySelector y querySelectorAll.

        <script>
          // Selección por id
          var encabezado = document.getElementById("encabezado");

          // Selección por etiqueta
          var parrafos = document.querySelectorAll("p");

          // Selección por clase
          var elementosClase = document.getElementsByClassName("mi-clase");
        </script>
      

Manejo de eventos: click, submit, input

Los eventos son acciones que ocurren en la página web, como hacer clic en un botón o enviar un formulario. Se pueden manejar utilizando JavaScript.

        <script>
          // Manejo de evento click
          var boton = document.getElementById("mi-boton");
          boton.addEventListener("click", function() {
            console.log("Se hizo clic en el botón");
          });

          // Manejo de evento submit
          var formulario = document.getElementById("mi-formulario");
          formulario.addEventListener("submit", function(event) {
            event.preventDefault(); // Evitar el envío del formulario
            console.log("Formulario enviado");
          });
        </script>
      

Modificación del contenido y estilo del DOM

JavaScript permite modificar el contenido y estilo de los elementos del DOM.

        <script>
          // Modificar contenido
          var parrafo = document.getElementById("mi-parrafo");
          parrafo.textContent = "Nuevo contenido del párrafo";

          // Modificar estilo
          var elemento = document.getElementById("mi-elemento");
          elemento.style.color = "blue";
          elemento.style.fontSize = "16px";
        </script>