1º DAM - ASIR - LMySGE. Curso 2025-26.

​ ​ ​ ​ Mª Ángeles Sánchez Pino

Document Object Model (DOM) en

JavaScript

Introducción​ 1
El DOM​ 1
Acceso al DOM​ 1
Manipulación del DOM.​ 3
Modificación de contenido y atributos.​ 3
Creación y estructura.​ 4
Manejo de eventos.​ 4
Ejemplos Prácticos​ 5
Modificación de un elemento HTML.​ 5
Creación e inserción de un nuevo elemento.​ 5
Manejo de eventos de usuario.​ 6

Introducción
El Document Object Model (DOM) es la interfaz de programación de aplicaciones (API)
para documentos HTML y XML. Proporciona una representación estructurada (en forma de
árbol) del documento, lo que permite a los programas de JavaScript acceder y modificar
tanto la estructura del documento como su estilo y contenido. Sin el DOM, JavaScript no
podría "ver" ni interactuar con los elementos que componen una página web.

El DOM
El DOM transforma la jerarquía de etiquetas HTML en una estructura de objetos donde cada
etiqueta, atributo, y pieza de texto se convierte en un nodo. El nodo superior es el objeto
Document (la página web completa), y de él se desprenden los nodos Element (las
etiquetas como <div>, <p>, <h1>), Attribute y Text. Al tener esta representación de árbol,
JavaScript puede navegar, seleccionar, insertar, eliminar y modificar nodos de manera
programática. El DOM no es JavaScript, sino una especificación estándar de W3C que
JavaScript utiliza para controlar la página.

Acceso al DOM
Para manipular el DOM, primero debemos acceder a los nodos deseados, es decir,
seleccionar los elementos HTML que queremos modificar. Para esto, se utiliza el objeto
global document, el punto de entrada a todo el árbol del DOM.

1
1º DAM - ASIR - LMySGE. Curso 2025-26. ​ ​ ​ ​ Mª Ángeles Sánchez Pino

Existen varios métodos de selección, y la elección depende de la especificidad y la cantidad

de elementos que se necesiten seleccionar:

Método Descripción Retorno

[Link]('id-unico') Selecciona un Un solo Objeto

único elemento Element
basado en su
atributo id. Es el
más rápido y
específico.

[Link]('.clase') Selecciona el Un solo Objeto

primer elemento Element
que coincida con
un selector CSS
(clases, IDs,
etiquetas, etc.).

[Link]('p') Selecciona todos NodeList

los elementos que (colección
coincidan con un estática)
selector CSS dado.

[Link]('cl Selecciona todos HTMLCollection

ase') los elementos con (colección viva)
una clase
específica.

[Link]('div' Selecciona todos HTMLCollection

) los elementos con (colección viva)
una etiqueta HTML
específica.

2
1º DAM - ASIR - LMySGE. Curso 2025-26. ​ ​ ​ ​ Mª Ángeles Sánchez Pino

Manipulación del DOM.

Una vez que se tiene una referencia a un nodo, se pueden usar propiedades y métodos
para manipularlo en función de qué se quiera hacer:

Modificación de contenido y atributos.

Método/Propiedad Uso

[Link] Obtiene o establece el contenido de

texto plano del elemento y todos sus
descendientes.

[Link] Obtiene o establece el contenido,

incluyendo etiquetas HTML (permite
inyectar estructura HTML).

[Link]('name', Establece un nuevo valor para un

'value') atributo (ej. href, src, class).

[Link]('name') Elimina un atributo del elemento.

[Link] Acceso directo para modificar estilos

CSS en línea (ej.
[Link] = 'red').

[Link]('clase') Añade una clase CSS al elemento

(preferido para modificar estilos).

[Link]('clase') Elimina una clase CSS del elemento.

3
1º DAM - ASIR - LMySGE. Curso 2025-26. ​ ​ ​ ​ Mª Ángeles Sánchez Pino

Creación y estructura.

Método/Propiedad Uso

[Link]('div') Crea un nuevo nodo de elemento

(etiqueta) que aún no está en el
documento.

[Link](nodoHijo) Añade un nodo como el último hijo del

nodo padre.

[Link](nodoHijo) Elimina un nodo hijo del DOM.

[Link](nuevoEleme Inserta un nuevo nodo justo antes del

nto) elemento existente.

Manejo de eventos.

El método más moderno y recomendado para manejar interacciones del usuario:

Método Uso

[Link]('click' Asigna una función a un evento específico

, miFuncion) (ej. 'click', 'mouseover', 'submit'). Es
fundamental para la interactividad.

[Link]('cli Elimina el listener de eventos.

ck', miFuncion)

4
1º DAM - ASIR - LMySGE. Curso 2025-26. ​ ​ ​ ​ Mª Ángeles Sánchez Pino

Ejemplos Prácticos
A continuación, se muestran tres ejemplos básicos de cómo se utilizan estos métodos en
conjunto.

Modificación de un elemento HTML.

Objetivo: Definir una función Javascript que cambie el estilo y texto de un párrafo.

Pasos:

1.​ Acceder al DOM según el ID del párrafo.

2.​ Modificar el contenido, una vez se tiene la referencia al nodo.
3.​ Modificar el estilo utilizando la misma referencia.

function actualizarParrafo() {
// Paso 1.
const parrafo = [Link]('mensaje');

// Paso 2.
[Link] = "¡El texto ha sido actualizado por
JavaScript!";

// Paso 3.
[Link] = 'blue';
[Link] = 'bold';
}

Previamente es necesario que el HTML contenga un párrafo similar a éste:

<p id="mensaje">Párrafo de ejemplo para modificaciones.</p>

Esta función puede ser llamada cuando nos aseguremos que el DOM está cargado:
[Link]('DOMContentLoaded', actualizarParrafo);

Creación e inserción de un nuevo elemento.

Objetivo: Definir una función Javascript que crea una lista no ordenada, le añade un item e
inserta la lista al final del <body>.

Pasos:

1.​ Crear la lista (<ul>) y un elemento (<li>).

2.​ Añadir contenido al elemento.
3.​ Asignar el elemento como hijo de la lista.

5
1º DAM - ASIR - LMySGE. Curso 2025-26. ​ ​ ​ ​ Mª Ángeles Sánchez Pino

4.​ Añadir la lista como último hijo del elemento <body>.

function crearLista() {
// Paso 1.
const nuevaLista = [Link]('ul');
const nuevoItem = [Link]('li');

// Paso 2.
[Link] = "Elemento dinámico añadido al DOM";

// Paso 3.
[Link](nuevoItem);

// Paso 4.
[Link](nuevaLista);
}

Esta función puede ser llamada cuando nos aseguremos que el DOM está cargado:
[Link]('DOMContentLoaded', crearLista);

Manejo de eventos de usuario.

Objetivo: Definir una función Javascript que crea una lista no ordenada, le añade un item e
inserta la lista al final del <body>.

Pasos:

1.​ Acceder a los elementos que se quiere modificar.

2.​ Asignar el escuchador (“listener”) al evento.
3.​ Definir la lógica del evento.
4.​

function alternarClase() {
// Paso 1.
const boton = [Link]('btn-alternar');
const caja = [Link]('caja');

// Paso 2. Asignación del Event Listener

// Cuando el botón sea clicado, se ejecutará la función
anónima
[Link]('click', function() {
// Paso 3. Lógica del evento: alternar la clase 'rojo'
// Si tiene 'rojo', se la quita; si no la tiene, se la
añade.
[Link]('rojo');

6
1º DAM - ASIR - LMySGE. Curso 2025-26. ​ ​ ​ ​ Mª Ángeles Sánchez Pino

// Asumiendo que el CSS define .rojo y .azul

if ([Link]('rojo')) {
[Link] = "Estoy en rojo";
} else {
[Link] = "¡Estoy en azul!";
}
});
}

Esta función está a la escucha el evento click del botón:

[Link]('DOMContentLoaded', alternarClase);

Previamente es necesario que el HTML contenga estos elementos:

<button id="btn-alternar">Alternar Clase</button>

HTML: <div id="caja" class="rojo"></div>