This is an old version of this page. You can view the most recent version or browse the history.

Modulo 3

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.

<!-- index.html -->
<h1 id="titulo">Gestión de Recursos Sanitarios</h1>
<button id="btnActualizar">Actualizar recursos</button>
<p id="mensaje"></p>

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

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")`

<ul>
  <li class="recurso">Enfermeros</li>
  <li class="recurso">Ambulancias</li>
</ul>

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

const lista = document.querySelector("#listaRecursos");
const nuevo = document.createElement("li");
nuevo.textContent = "Medicos";
lista.appendChild(nuevo);

Modificar contenido

document.querySelector("#titulo").textContent = "Recursos actualizados";

Cambiar estilos y atributos

const mensaje = document.getElementById("mensaje");
mensaje.style.color = "blue";
mensaje.setAttribute("class", "alerta");

Eliminar elementos

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

<button onclick="alert('Recurso añadido')">Añadir recurso</button>

5.2. Asignando una propiedad en JS

const boton = document.getElementById("btnGuardar");
boton.onclick = function() {
  alert("Recurso guardado correctamente");
};

5.3. Usando `addEventListener()` (forma recomendada)

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

<h2>Inventario</h2>
<ul id="listaRecursos">
  <li>Enfermeros</li>
  <li>Ambulancias</li>
</ul>
<input type="text" id="nuevoRecurso" placeholder="Nuevo recurso">
<button id="btnAgregar">Agregar</button>

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 de recursos permite agregar nuevos recursos desde la interfaz, aplicando lo aprendido sobre DOM y eventos.

8. Interacción con el BOM: Ventanas y temporizadores

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