|
|
|
# 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. |
