[AFO028L7M] Curso de Analista Programador Javascript

[MOD024H2Y] Analista Programador Javascript

[UDI152LMN] Manipulación del DOM con JavaScript

Introducción

La Manipulación del DOM (Document Object Model) con JavaScript es un componente fundamental

en el desarrollo web interactivo y dinámico. El DOM actúa como una representación estructurada de

la página web, permitiendo a los desarrolladores acceder, modificar y crear contenido de manera

programática. En esta unidad didáctica, se explorarán los aspectos clave relacionados con la

manipulación del DOM, desde la comprensión de qué es el DOM hasta la aplicación práctica de la

selección, manipulación y creación de elementos.

om
Esta unidad proporcionará una base sólida en la manipulación del DOM con JavaScript, habilitando a

.c
los desarrolladores para crear aplicaciones web más dinámicas e interactivas.

s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
1 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

Objetivos

Familiarizarse con el Document Object Model (DOM) como una representación estructurada de

documentos HTML/XML, entendiendo su importancia en la interactividad y manipulación

dinámica de páginas web.

Aprender a seleccionar elementos del DOM de manera efectiva mediante métodos como

getElementById, getElementsByClassName, getElementsByTagName, querySelector y

om
querySelectorAll, permitiendo la ubicación precisa de elementos en la página.

Integrar los conceptos aprendidos en casos prácticos y proyectos.

s .c
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
2 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

Mapa Conceptual

om
.c
s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
3 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

1. ¿Qué es el DOM?

En el inicio del desarrollo web, la práctica común es aprender a redactar el marcado HTML y

agregar estilos CSS para otorgar color, forma y cierta interactividad a las páginas. Sin embargo, al

avanzar, se evidencia cierta limitación al depender exclusivamente de HTML/CSS.

Limitándose HTML/CSS, solo se pueden crear páginas estáticas, es decir, páginas que no pueden

adaptarse según las acciones del usuario. La incorporación de JavaScript posibilita la creación de

om
páginas dinámicas, aprovechando la potencia y flexibilidad que brinda un lenguaje de programación

para generar documentos y páginas más complejas. Esto conduce a una experiencia más completa y

.c
permite la automatización de una amplia gama de tareas y acciones.

s
El término "DOM" hace referencia al Modelo de Objetos del Documento, es decir, la estructura del

ro
documento HTML. Una página HTML se compone de múltiples etiquetas HTML anidadas una dentro
ha
de otra, formando un árbol de etiquetas relacionadas entre sí, denominado árbol DOM (o

simplemente DOM).
ap

En el contexto de JavaScript, al mencionar el DOM, se refiere a esta estructura jerárquica que

l

permite acceder y modificar los elementos del HTML desde JavaScript. Esto implica agregar nuevas
au

etiquetas, modificar o eliminar existentes, cambiar atributos HTML, añadir clases, alterar el
a.

contenido de texto, entre otras acciones. Al estar controlado por un lenguaje de programación, todas

estas tareas pueden automatizarse, incluso programándolas para ejecutarse en respuesta a acciones
os

específicas del usuario, como pulsar un botón, mover el ratón, hacer clic en una parte específica del
m

documento, escribir un texto, etc.

ce

Cabe destacar los siguientes puntos:

Document.

API nativo de JS.

Librerías de terceros.

1.1. Document

cemosa.aulapharos.com
4 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

En JavaScript, se accede al DOM mediante un objeto denominado "document", que representa el

árbol DOM de la página o, de manera más específica, la página de la pestaña del navegador en la

que se encuentra. Dentro de este objeto, pueden existir diversos tipos de elementos, siendo

principalmente de tipo "HTMLElement" o "Text":

"HTMLElement" es la representación genérica de una etiqueta y puede ser de diferentes tipos,

como, por ejemplo:

om
"HTMLDivElement" para la etiqueta <div>, que es un elemento de división en bloque.

"HTMLSpanElement" para la etiqueta <span>, que es un elemento de división en línea.

.c
"HTMLImageElement" para la etiqueta <img>, que representa una imagen.

s
"HTMLAudioElement" para la etiqueta <audio>, que es un contenedor de audio.

ro
ha
Cada elemento HTML, dependiendo de su tipo, tendrá un tipo de dato específico. A continuación, se

presentan algunos ejemplos:

ap

Tipo de dato genérico: "HTMLElement"

l
au

Tipo específico: "HTMLDivElement"

a.

Etiqueta: <div>

Descripción: Elemento de división (en bloque).

os

Más información: Elemento <div>

m
ce

Tipo de dato genérico: "HTMLElement"

Tipo específico: "HTMLSpanElement"

Etiqueta: <span>

Descripción: Elemento de división (en línea).

Más información: Elemento <span>

cemosa.aulapharos.com
5 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

Tipo de dato genérico: "HTMLElement"

Tipo específico: "HTMLImageElement"

Etiqueta: <img>

Descripción: Imagen.

om
Más información: Elemento <img>

s .c
Tipo de dato genérico: "HTMLElement"

Tipo específico: "HTMLAudioElement"

ro
ha
ap

Etiqueta: <audio>
l

Descripción: Contenedor de audio.

au

Más información: Elemento <audio>

a.
os

Es importante señalar que existen muchos tipos de datos específicos, uno por cada etiqueta HTML.
m

1.2. API nativo de JS

ce

La API nativa de JavaScript proporciona un conjunto de herramientas para trabajar de manera

nativa con el DOM de la página:

Buscar etiquetas: métodos para buscar elementos en el DOM, como .querySelector().

Crear etiquetas: métodos y consejos para crear elementos en el DOM y trabajar con ellos.

Gestionar atributos: formas de gestionar y modificar atributos HTML de elementos del DOM.

Gestión de CSS: uso de la API .classList para manipular clases CSS desde JavaScript.

cemosa.aulapharos.com
6 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

Contenido etiquetas: acceder y modificar el contenido de una etiqueta HTML del DOM.

Insertar etiquetas: formas de añadir elementos en el DOM, como .appendChild() u otros.

Navegar por etiquetas: métodos para «navegar» a través de la jerarquía del DOM.

Animar elementos del DOM: aplicar animaciones CSS a elementos del DOM desde JavaScript

con animate().

1.3. Librería de terceros

om
En situaciones donde el rendimiento no es crítico y se busca una programación más rápida, se

.c
pueden utilizar librerías de terceros que simplifican el trabajo con el DOM. Algunas opciones

s
incluyen:

ro
RE:DOM: librería para crear interfaces de usuario basada en DOM. [@redom/redom](GitHub
ha
Link)
ap

D3js: librería para la creación de gráficas, datos y grafos que puede manipular el DOM.

[@d3/d3](GitHub Link)
l

UmbrellaJS: librería para manipular el DOM y eventos. [@franciscop/umbrella](GitHub Link)

au
a.

Si no se desea trabajar directamente con el DOM, es común optar por un framework JavaScript.

Muchos de ellos utilizan un Virtual DOM para automatizar la manipulación sin que el programador
os

tenga que hacerlo a bajo nivel. Librerías como React, Vue o Angular son populares por esta razón.
m

Es importante señalar que, aunque los frameworks JavaScript no trabajen directamente con el DOM,
ce

no implica que acceder al DOM sea una práctica desaconsejada. Cada framework tiene sus propias

normas y estrategias, pero se aconseja que el programador tenga conocimientos de manipulación del

DOM, ya que esto facilita la resolución de problemas.

cemosa.aulapharos.com
7 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

2. Selección de elementos del DOM

En el contexto de código JavaScript, si se desea realizar modificaciones en un elemento de la página

HTML, el primer paso consiste en buscar dicho elemento. Para llevar a cabo esta tarea, comúnmente

se intenta identificar el elemento a través de alguno de sus atributos más utilizados, como el id o

class.

Existen métodos específicos que permiten realizar búsquedas en el DOM de la página y localizar los

om
elementos deseados. El primer grupo de métodos corresponde a enfoques más antiguos y

tradicionales, mientras que el segundo grupo involucra métodos más modernos que requieren el

.c
conocimiento de selectores CSS.

s
A continuación, se verá cómo seleccionar elementos con

ro
ha
Métodos tradicionales.

Métodos modernos.
l ap

2.1. Métodos tradicionales

au

Los métodos más clásicos y tradicionales para la búsqueda de elementos en el DOM son más
a.

simples, pero menos potentes. Si la intención es ubicar un elemento específico, se recomienda

os

emplear el método getElementById(). En caso contrario, se pueden utilizar otros tres métodos, los
m

cuales siempre devolverán un:

ce

Método de búsqueda Descripción

.getElementById(id) Busca el elemento HTML por su id
.getElementsByClassName(class) Busca elementos con la clase especificada
.getElementsByName(value) Busca elementos con el atributo name igual a value
.getElementsByTagName(tag) Busca etiquetas HTML del tipo especificado
Estos métodos representan los enfoques tradicionales de JavaScript para manipular el DOM y se

denominan así debido a su presencia en versiones más antiguas del lenguaje.

getElementById()

cemosa.aulapharos.com
8 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

El método getElementById(id) busca un elemento HTML con el id indicado. Idealmente, un

documento HTML bien estructurado no debería contener más de un elemento con el mismo id, por lo

que este método devolverá siempre un único elemento:

getElement

om
En caso de no encontrar el elemento especificado, el método devuelve Null.

.c
getElementsByClassName()

s
Por otro lado, el métodogetElementsByClassName(class) permite buscar elementos que posean la

ro
clase especificada en class. Es relevante notar que el término "getElements" está en plural, lo que
ha
implica que puede devolver varias clases, ya que, a diferencia de los id, pueden existir varios

elementos con la misma clase:

l ap
au
a.
os

GetClass
m

Estos métodos devuelven siempre un con todos los elementos encontrados que cumplen con el
ce

criterio. En caso de no encontrar ninguno, el resultado será un vacío: [].

Los métodos getElementsByName(name) y getElementsByTagName(tag) funcionan de manera

similar, con la diferencia de que buscan elementos por su atributo name o por su etiqueta HTML,

respectivamente. Es esencial recordar la distinción entre getElement (singular) y getElements

(plural) para no confundir cuándo se devuelve un solo elemento y cuándo se devuelve una lista de

ellos.

cemosa.aulapharos.com
9 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

2.2. Métodos modernos

A pesar de que los métodos tradicionales previamente mencionados son suficientes para la búsqueda

de elementos, actualmente se cuenta con dos métodos más avanzados que resultan más cómodos y

prácticos si se tiene conocimiento y dominio de los selectores CSS.

Estos métodos son querySelector() y .querySelectorAll():

querySelector(sel) busca el primer elemento que coincide con el selector CSS sel. En cambio

om
SelectorAll() devuelve todos.

.c
Con estos dos métodos, es posible realizar todas las acciones que se llevaban a cabo con los métodos

tradicionales mencionados anteriormente y, además, ejecutar muchas más tareas con menos código.

s
ro
Esto se debe a la flexibilidad y potencia que ofrecen gracias a los selectores CSS.
ha
querySelector()

El método querySelector() devuelve el primer elemento que concuerda con el selector CSS
ap

proporcionado como parámetro. Siempre devuelve un solo elemento y, en caso de no encontrar

l

coincidencias, devuelve NULL:

au
a.
os
m

Selector
ce

Este método resulta interesante porque permite suministrarle tanto un selector CSS básico como

uno avanzado, lo cual lo convierte en un sistema más potente. El primer ejemplo sería equivalente a

utilizar getElementById(), pero en la versión de .querySelector(), se especifica un # como parámetro

para indicar un id.

En el segundo ejemplo, se está recuperando el primer elemento con la clase "info" que se encuentra

dentro de otro elemento con la clase "main". En los métodos tradicionales, este proceso sería menos

directo y requeriría varias llamadas, mientras que con.querySelector() se realiza directamente con

cemosa.aulapharos.com
10 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

una.

querySelectorAll()

Por otro lado, el método querySelectorAll() realiza una búsqueda de elementos en el DOM, pero,

como se puede inferir por el "All", devuelve un con todos los elementos que coinciden con el selector

CSS.

om
.c
s
ro
ha
SelectorAll
ap

El método.querySelectorAll() siempre devuelve un de elementos. El número de elementos en el array

l

dependerá de los que encuentre.

au
a.
os
m
ce

cemosa.aulapharos.com
11 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

3. Manipulación de elementos del DOM

La manipulación de elementos del DOM (Document Object Model) es una parte esencial de la

programación web con JavaScript. El DOM es una interfaz de programación que representa la

estructura de un documento HTML o XML como un árbol de objetos, donde cada elemento del

documento es un nodo en ese árbol. Se puede manipular estos nodos para cambiar dinámicamente el

contenido, la estructura y el estilo de una página web.

om
Aquí hay algunas operaciones comunes para la manipulación de elementos del DOM con JavaScript:

.c
Para manipular un elemento, es necesario obtener una referencia a él. Esto se puede lograr

utilizando métodos como getElementById, getElementsByClassName, getElementsByTagName

s
ro
o querySelector. ha
l ap
au
a.
os
m
ce

Manipular elementos

Cambiar el contenido de un elemento se realiza mediante la manipulación de su propiedad

innerHTML o textContent.

cemosa.aulapharos.com
12 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

Cambiar contenido

om
Los atributos de un elemento pueden ser accedidos y modificados.

s.c
ro
ha
ap

Atributos
l

Los estilos de un elemento pueden ser modificados manipulando su propiedad style.

au
a.
os
m
ce

Style

Es posible crear nuevos elementos y agregarlos al DOM.

cemosa.aulapharos.com
13 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

Agregar elementos

om
.c
s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
14 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

4. Creación de elementos del DOM

En la etapa de aprendizaje, es común generar código HTML desde un archivo HTML. No obstante,

con el crecimiento de las páginas SPA (Single Page Application) y la utilización de frameworks o

bibliotecas en JavaScript, esta práctica ha evolucionado, y ahora es bastante común crear código

HTML de manera dinámica desde JavaScript.

Esta metodología presenta sus propias ventajas y desventajas. Un archivo .html siempre resulta más

om
simple, más estático y directo, ya que los navegadores web analizan primero un archivo de marcado

HTML. Por otro lado, un archivo .js es más complejo y menos directo, pero ofrece mayor potencia,

.c
dinamismo y flexibilidad, con menos limitaciones durante el desarrollo.

s
Existen varios métodos que permiten crear eficientemente diversos elementos HTML o nodos,

ro
facilitando la creación de estructuras dinámicas mediante bucles o estructuras definidas. Aquí se
ha
describen algunos de estos métodos:

Métodos Descripción
ap

Genera y devuelve un elemento HTML creado según la etiqueta

.createElement(tag, options)
proporcionada.
l
au

Genera y retorna un nodo de comentario HTML con el contenido

.createComment(text) especificado. En este caso, el nodo de comentario contendría el texto
"text".
a.

Genera y retorna un nodo HTML con el contenido de texto

.createTextNode(text)
especificado.
os

Clona el nodo HTML y devuelve una copia. El parámetro deep es

.cloneNode(deep)
false por defecto.
m

isConnected Indica la inserción del nodo HTML en el documento HTML.

En este contexto, se verá principalmente en el primer método, .createElement(), que se utiliza para
ce

crear elementos HTML en el DOM, junto con cloneNode).

4.1. createElement()

Mediante la utilización del método createElement(), es posible generar un elemento HTML en

memoria (sin que esté insertado aún en el documento HTML). Al almacenar dicho elemento en una

variable o constante, se tiene la capacidad de ajustar sus características o contenido.

Posteriormente, se puede insertar en una posición específica del DOM o documento HTML.

cemosa.aulapharos.com
15 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

om
Esquema de lenguajejs.com

.c
s
El enfoque se centrará en el proceso de creación del elemento, dejando para más adelante la

ro
exploración de diversas formas de insertarlo en el DOM. La operativa de.createElement() es

bastante directa: simplemente se le pasa el nombre de la etiqueta (tag) que se desea utilizar.
ha
l ap
au
a.

Esquema de lenguajejs.com
os

En casos menos comunes, se podría emplear createComment() para generar comentarios HTML o

.createTextNode() para crear fragmentos de texto sin una etiqueta HTML. En ambos casos, se recibe
m

un nodo que puede utilizarse posteriormente para la inserción en el documento HTML.

ce

Generar comentarios HTML

Cabe mencionar que el método createElement() dispone de un parámetro opcional llamado options.

Si se proporciona, se espera un objeto con una propiedad "is" para definir un elemento

personalizado en una modalidad menos utilizada. Se abordará este aspecto más adelante en la

cemosa.aulapharos.com
16 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

sección de Web Components.5. Eventos del DOM

4.2. cloneNode()

Al crear y duplicar elementos HTML, es crucial tener precaución. Un error común que suele ocurrir,

especialmente durante el aprendizaje de programación, es asignar un elemento existente a otra

variable bajo la creencia de que se está creando una copia, cuando en realidad se está creando una

om
referencia. Aunque esto puede parecer que duplica un elemento para recrearlo de manera idéntica

al original, en realidad, se establece una referencia al elemento original. Esto se realiza por motivos

de rendimiento y eficiencia:

s .c
ro
ha
l ap

Copia por referencia

au

Para evitar la creación de una referencia y lograr duplicar el elemento, lo cual es el objetivo real, se
a.

debe utilizar el método cloneNode():

os
m
ce

Copia sin referencia

El método cloneNode(deep) cuenta con un parámetro opcional deep, que por defecto es false. Este

parámetro indica el tipo de clonación que se realizará:

Si es true, realizará una clonación profunda, copiando también los elementos hijos.

cemosa.aulapharos.com
17 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

Si es false, realizará una clonación superficial, sin copiar los elementos hijos.

om
s .c
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
18 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

5. Eventos del DOM

Los eventos del DOM (Modelo de Objetos del Documento) en JavaScript son acciones o sucesos que

ocurren en la página web y que pueden ser detectados y manejados por el código JavaScript. Aquí

hay algunos ejemplos comunes de eventos del DOM:

click: se desencadena cuando se hace clic en un elemento.

om
s.c
ro
Click ha
mouseover y mouseout: se desencadenan cuando el cursor del mouse entra o sale de un

elemento.
l ap
au
a.
os
m
ce

Mouse

keydown y keyup: se desencadenan cuando se presiona o se suelta una tecla del teclado.

cemosa.aulapharos.com
19 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

om
Keydown y keyup

.c
s
submit: se desencadena cuando se envía un formulario.

ro
ha
l ap
au
a.

Submit
os

change: se desencadena cuando el valor de un elemento de formulario cambia.

m
ce

Change

load: se desencadena cuando se carga completamente la página.

cemosa.aulapharos.com
20 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

Load

resize: se desencadena cuando la ventana del navegador se redimensiona.

om
s.c
ro
Resize
ha
• Recuerda
• El DOM representa la estructura del documento como un árbol jerárquico de nodos.
ap

• Cada elemento, atributo y texto en el documento es representado por un nodo en el árbol.

• Se puede acceder a los elementos del DOM usando métodos como getElementById,
getElementsByClassName, getElementsByTagName o querySelector.
• Se puede cambiar el contenido de un elemento utilizando la propiedad innerHTML.
l
au

• Permite acceder y modificar atributos de un elemento, al igual que crearlos y eliminarlos.

• El objeto document representa el documento actual y es el punto de entrada principal para interactuar
con el DOM.
a.

• Los fragmentos de documento son nodos del DOM que no están vinculados al árbol principal. Pueden
ser utilizados para realizar manipulaciones eficientes antes de agregar elementos al árbol principal.
• Se puede recorrer el árbol del DOM utilizando bucles y métodos como parentNode, childNodes,
os

nextSibling, previousSibling, etc.

m
ce

cemosa.aulapharos.com
21 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

Autoevaluación

¿Cómo se accede a un elemento en el DOM utilizando su ID en JavaScript?

getElementByTag

getElementById;

om
getElementsByTag;

.c
s
ro
¿Cuál es la propiedad que se utiliza para cambiar el contenido HTML de un
elemento en el DOM?
ha
textValue.
l ap

innerHTML.
au
a.

textContent.
os

¿Cómo se añade un nuevo elemento al DOM utilizando JavaScript?

m
ce

createElement y appendChild

createElement y appendNode

createNode y appendChild

¿Cuál es la función que se utiliza para manejar eventos en JavaScript?

cemosa.aulapharos.com
22 / 23
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMN] Manipulación del DOM con JavaScript

AddEventListener.

HandleEvent.

AddEventListener.

om
¿Cómo se accede al objeto que representa el documento actual en JavaScript?

.c
CurrentDocument.

s
ro
DocumentObject.
ha
document.
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
23 / 23