Modulo-3.md

+#  Módulo 3 — Interacción con el DOM y el BOM
+
+## 1. Qué es el DOM
+
+El **DOM (Document Object Model)** es una **representación estructurada del documento HTML** que permite acceder y modificar su contenido desde JavaScript. El resumen rápido es que es la representación en objetos de todas las etiquetas de un archivo html, accesibles por la etiqueta, por la id o por la clase.
+
+Cada etiqueta HTML se convierte en un **nodo** (el objeto) dentro de un árbol jerárquico.
+Gracias al DOM, podemos **cambiar texto, estilos, atributos, crear o eliminar elementos**, y responder a la interacción del usuario. Al tratar cada elemento como un objeto, estos tienen atributos y métodos que son accesibles desde el navegador mediante *javascritp*.
+
+```html
+<!-- index.html -->
+<h1 id="titulo">Gestión de Recursos Sanitarios</h1>
+<button id="btnActualizar">Actualizar recursos</button>
+<p id="mensaje"></p>
+```
+
+```javascript
+// app.js - Selección de elemento por id
+const titulo = document.getElementById("titulo"); 
+const boton = document.getElementById("btnActualizar");
+const mensaje = document.getElementById("mensaje");
+
+boton.addEventListener("click", () => {
+  mensaje.textContent = "Recursos actualizados correctamente";
+  titulo.style.color = "green";
+});
+```
+
+El DOM nos permite **modificar la interfaz del usuario sin recargar la página**.
+
+---
+
+## 2. Qué es el BOM
+
+El **BOM (Browser Object Model)** es el modelo de objetos del **navegador**, que nos da acceso a elementos externos al documento HTML:
+la **ventana (`window`)**, la **barra de direcciones (`location`)**, el **historial (`history`)**, o el **temporizador (`setTimeout`, `setInterval`)**. Estos elementos también se tratan como objetos, dando la posibilidad de manejarlos desde el código de *javascript*.
+
+```javascript
+console.log(window.innerWidth); // ancho de la ventana
+console.log(location.href); // URL actual
+
+// Redireccionar
+// location.href = "https://hospitalcentral.com";
+
+// Temporizadores
+setTimeout(() => alert("Datos cargados correctamente"), 2000);
+```
+
+---
+
+## 3. Acceso a elementos del DOM
+
+Podemos obtener referencias a los elementos HTML usando distintos métodos:
+
+| Método                     | Descripción                                                  | Ejemplo                                      |
+| -------------------------- | ------------------------------------------------------------ | -------------------------------------------- |
+| `getElementById()`         | Selecciona un elemento por su `id`                           | `document.getElementById("titulo")`          |
+| `getElementsByClassName()` | Devuelve una colección de elementos con esa clase            | `document.getElementsByClassName("recurso")` |
+| `getElementsByTagName()`   | Devuelve una colección de etiquetas                          | `document.getElementsByTagName("p")`         |
+| `querySelector()`          | Devuelve el primer elemento que coincide con un selector CSS | `document.querySelector(".boton")`           |
+| `querySelectorAll()`       | Devuelve **todos** los elementos que coinciden               | `document.querySelectorAll(".boton")`        |
+
+```html
+<ul>
+  <li class="recurso">Mascarillas</li>
+  <li class="recurso">Guantes</li>
+</ul>
+```
+
+```javascript
+const recursos = document.querySelectorAll(".recurso");
+recursos.forEach(r => console.log(r.textContent));
+```
+
+---
+
+## 4. Manipulación del DOM
+
+Podemos **crear, modificar o eliminar elementos** dinámicamente.
+
+### Crear elementos
+
+```javascript
+const lista = document.querySelector("#listaRecursos");
+const nuevo = document.createElement("li");
+nuevo.textContent = "Camas";
+lista.appendChild(nuevo);
+```
+
+### Modificar contenido
+
+```javascript
+document.querySelector("#titulo").textContent = "Recursos actualizados";
+```
+
+### Cambiar estilos y atributos
+
+```javascript
+const mensaje = document.getElementById("mensaje");
+mensaje.style.color = "blue";
+mensaje.setAttribute("class", "alerta");
+```
+
+### Eliminar elementos
+
+```javascript
+lista.removeChild(lista.lastElementChild);
+```
+
+---
+
+## 5. Eventos en JavaScript
+
+Los **eventos** son acciones que suceden en la página: clics, desplazamientos, escritura, carga, etc.
+Podemos **escucharlos y responder** mediante tres formas:
+
+### 5.1. En el HTML directamente
+
+```html
+<button onclick="alert('Recurso añadido')">Añadir recurso</button>
+```
+
+### 5.2. Asignando una propiedad en JS
+
+```javascript
+const boton = document.getElementById("btnGuardar");
+boton.onclick = function() {
+  alert("Recurso guardado correctamente");
+};
+```
+
+### 5.3. Usando `addEventListener()` (forma recomendada)
+
+```javascript
+boton.addEventListener("click", () => {
+  console.log("Evento capturado con addEventListener");
+});
+```
+
+---
+
+## 6. Tipos comunes de eventos
+
+| Evento                   | Descripción                        | Ejemplo                                 |
+| ------------------------ | ---------------------------------- | --------------------------------------- |
+| `click`                  | Clic del usuario                   | `button.addEventListener("click", fn)`  |
+| `input`                  | Cambio en un campo de texto        | `input.addEventListener("input", fn)`   |
+| `change`                 | Valor modificado en select o input | `select.addEventListener("change", fn)` |
+| `mouseover` / `mouseout` | Al pasar o salir el ratón          | `div.addEventListener("mouseover", fn)` |
+| `submit`                 | Envío de formulario                | `form.addEventListener("submit", fn)`   |
+| `load`                   | Cuando la página termina de cargar | `window.addEventListener("load", fn)`   |
+
+---
+
+## 7. Ejemplo práctico: actualización de recursos
+
+```html
+<h2>Inventario</h2>
+<ul id="listaRecursos">
+  <li>Mascarillas</li>
+  <li>Guantes</li>
+</ul>
+<input type="text" id="nuevoRecurso" placeholder="Nuevo recurso">
+<button id="btnAgregar">Agregar</button>
+```
+
+```javascript
+const lista = document.getElementById("listaRecursos");
+const input = document.getElementById("nuevoRecurso");
+const boton = document.getElementById("btnAgregar");
+
+boton.addEventListener("click", () => {
+  const valor = input.value.trim();
+  if (valor !== "") {
+    const li = document.createElement("li");
+    li.textContent = valor;
+    lista.appendChild(li);
+    input.value = "";
+  } else {
+    alert("Por favor, ingresa un nombre de recurso");
+  }
+});
+```
+
+> Con este ejemplo, el sistema de gestión hospitalaria permite **agregar nuevos recursos desde la interfaz**, aplicando lo aprendido sobre **DOM y eventos**.
+
+---
+
+## 8. Interacción con el BOM: Ventanas y temporizadores
+
+```javascript
+// Confirmar acción
+if (confirm("¿Deseas guardar los cambios?")) {
+  alert("Cambios guardados");
+} else {
+  alert("Acción cancelada");
+}
+
+// Temporizador repetido
+setInterval(() => {
+  console.log("Sincronizando datos...");
+}, 5000);
+```
+
+---
+
+## 9. Buenas prácticas
+
+- Mantén **separado el HTML del JS** (usa eventos con `addEventListener`).
+- Siempre que sea posible, usa el **css** para la edición de estilos y no el **js**, para no saturar el navegador.
+- Usa `const` y `let` para referencias seguras.
+- Usa funciones para reutilizar comportamientos interactivos.