Guía del DOM - Irene-Frias/1DAM GitHub Wiki

📌 Guía del DOM

El Document Object Model (DOM) es una interfaz de programación que representa la estructura de un documento HTML o XML como un árbol de nodos. Permite acceder y manipular elementos, atributos y contenido de una página web de manera dinámica.

🌳 Estructura Básica del DOM

  • Nodo raíz: <document>
  • Elementos: representan etiquetas HTML.
  • Atributos: propiedades de los elementos (<id>, <class>, <src>,...).
  • Texto: representa el contenido dentro de los elementos.
  • Ejemplo:

✔️ Selección de elementos

Se deben seleccionar los elementos según los métodos que se vayan a utilizar:

document.getElementById("miElemento");
document.getElementsByClassName("miClase");
document.getElementsByTagName("p");
document.querySelector(".miClase");
document.querySelectorAll("div");

Los dos métodos comunes para seleccionar los elementos de la página son getElementById y querySelector.

  • getElementById selecciona un único elemento del documento usando su atributo id. Solo funciona con id, no con clases ni etiquetas.
  • getElementById selecciona el primer elemento que coincida con un selector CSS. Permite usar cualquier selector CSS (.clase, #id, p, div, ul li,...). Solo devuelve el primer elemento que coincida.

Note

Si queremos seleccionar varios elementos, usamos querySelectorAll(), que devuelve una NodeList (similar a un array).

Si alguno de los dos elementos lo queremos eliminar o seleccionar, utilizaremos alguno de estos:

  • remove() elimina un elemento directamente sin necesidad de referirse a su padre.
let elemento = document.getElementById("miElemento");
elemento.remove();
<p id="miElemento">Este párrafo será eliminado.</p>
  • removeChild() sin embargo este requiere seleccionar el elemento padre antes de eliminar su hijo.
let padre = document.getElementById("contenedor");
let hijo = document.getElementById("miElemento");
padre.removeChild(hijo);
<div id="contenedor">
    <p id="miElemento">Este párrafo será eliminado.</p>
</div>

Tip

Cuando no tenemos una referencia directa al elemento que queremos eliminar. Cuando estamos trabajando con una colección de elementos dentro de un contenedor.

let lista = document.getElementById("miLista");
let primerElemento = lista.firstElementChild; 
lista.removeChild(primerElemento);
<ul id="miLista">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

✍🏻 Modificar el DOM

Podemos modificar contenido, atributos y estilos con JavaScript.

Cambiar Texto

document.getElementById("miElemento").textContent = "Nuevo texto";

Cambiar HTML Interno

document.getElementById("miElemento").innerHTML = "<strong>Texto en negrita</strong>";

Cambiar Atributos

document.getElementById("miImagen").src = "nueva-imagen.jpg";

Cambiar Estilos

document.getElementById("miElemento").style.color = "blue";

✏️ Crear y Eliminar Elementos

Podemos añadir o eliminar elementos en el DOM dinámicamente.

Crear un Elemento

let nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Este es un nuevo párrafo";
document.body.appendChild(nuevoParrafo);

Eliminar un elemento

let elemento = document.getElementById("miElemento");
elemento.remove();

Cargar una Imagen dinámicamente

imagen.src = nombre.value + ".png";

📚 Eventos del DOM

Los eventos permiten responder a las interacciones del usuario.

  • onclick (evento clic) se activa al hacer clic en un botón y otro elemento interactivo.
// Cuando el usuario hace clic en el botón llama a la función 'mostrarMensaje()' y muestra un 'alert()'

<button onclick="mostrarMensaje()">Haz clic aquí</button>

<script>
    function mostrarMensaje() {
        alert('Has hecho clic !!');
    }
</script>
  • onload (evento cargar la página) se lanza cuando toda la página y sus recursos (imágenes, scripts,...) han dejado de cargar.
// Al abrir la página, se ejecuta la función 'cargar()' y muestra un 'alert()'

<body onload="cargar()">

<script>
    function cargar() {
        alert('Acabo de cargar la página !!');
    }
</script>
</body>
  • oninput (evento al escribir o cambiar el contenido) se ejecuta cada vez que el usuario cambia el contenido.
// Cada vez que el usuario escribe en el campo, se muestra un mensaje.

<input type="text" oninput="mostrarCambio()" placeholder="Escribe algo aquí">

<script>
    function mostrarCambio() {
        alert('Ha cambiado el input');
    }
</script>
  • onsubmit (evento al enviar un formulario) se ejecuta cada vez que el usuario envía un formulario.
// Al hacer clic en el botón de enviar, se ejecuta 'enviarFormulario()' antes de que el formulario sea enviado.

<form onsubmit="enviarFormulario()">
    <input type="text" name="nombre" placeholder="Tu nombre">
    <button type="submit">Enviar</button>
</form>

<script>
    function enviarFormulario() {
        alert('Se está enviando el formulario');
    }
</script>
  • onsubmit con preventDefault() (evento al enviar un formulario) se ejecuta cada vez que el usuario envía un formulario.
// Al hacer clic en el botón de enviar, se ejecuta 'enviarFormulario()' antes de que el formulario sea enviado.

<form onsubmit="cancelarEnvio(event)">
    <input type="text" name="email" placeholder="Tu correo">
    <button type="submit">Enviar</button>
</form>

<script>
    function cancelarEnvio(event) {
        alert('Se está cancelando el envío del formulario');
        event.preventDefault(); // Detiene el envío
    }
</script>
  • onmouseover (evento al pasar el ratón) se activa al pasar el ratón sobre un elemento.
// Cuando el usuario pasa el ratón sobre el texto, ese cambia de color.

<p onmouseover="cambiarColor(this)">Pasa el ratón por aquí</p>

<script>
    function cambiarColor(elemento) {
        elemento.style.color = "red";
    }
</script>
  • onmouseout (evento al salir el cursor) se activa cuando el cursor se sale de un elemento.
// Cuando el usuario pasa el ratón sobre el texto, ese cambia de color.

<p onmouseout="restaurarColor(this)" style="color: blue;">Pasa el ratón por aquí y luego sal</p>

<script>
    function restaurarColor(elemento) {
        elemento.style.color = "black";
    }
</script>
  • onkeydown (evento al presionar una tecla) se activa al presionar una tecla o en un input de la página.
// Cuando el usuario presiona una tecla dentro del campo de texto, se muestra qué tecla se presionó.

<input type="text" onkeydown="mostrarTecla(event)" placeholder="Escribe algo...">

<script>
    function mostrarTecla(evento) {
        alert("Has presionado la tecla: " + evento.key);
    }
</script>
  • onsubmit se activa al enviar un formulario.
// Cuando el usuario hace clic en enviar, aparece un mensaje que el usuario ha sido enviado.

<form onsubmit="enviarFormulario()">
    <input type="text" name="nombre" placeholder="Tu nombre">
    <button type="submit">Enviar</button>
</form>

<script>
    function enviarFormulario() {
        alert('Formulario enviado correctamente');
    }
</script>
  • onchange se activa cuando el valor de un elemento cambia y pierde el foco (es decir, cuando el usuario escribe o selecciona algo y luego hace clic fuera del elemento).
// Cuando el usuario hace clic en uno de los colores, hace que el fondo cambie.

<select onchange="cambiarColor(this)">
    <option value="">Selecciona un color</option>
    <option value="red">Rojo</option>
    <option value="blue">Azul</option>
    <option value="green">Verde</option>
</select>

<script>
    function cambiarColor(elemento) {
        document.body.style.backgroundColor = elemento.value;
    }
</script>

© 2025 Irene Frías Ramos Wiki Educativa 1º DAM

⚠️ **GitHub.com Fallback** ⚠️