Document Object Model (DOM)

Document Object Model (DOM) 1

¿Qué aprenderás? 2
Introducción 2
El concepto DOM 3
Métodos de uso común para Manipular el DOM 3
Ejercicio guiado: Acceso a elementos del DOM 5
Cambiando elementos del DOM 7
Ejercicio guiado: Cambiando elementos del DOM 9

¡Comencemos!

_ 1

www.desafiolatam.com
¿Qué aprenderás?

● Reconocer los principales elementos del DOM para utilizar adecuadamente los
componentes y métodos con que se accede y manipula un documento HTML.

● Ejecutar funciones creadas de JavaScript para interactuar con los elementos del
DOM y manipular su comportamiento.

Introducción

Actualmente tenemos nociones de JavaScript y HTML, por lo que la forma de conectarlos es

a través del Document Object Model o DOM. El DOM representa un documento HTML
mediante una forma de árbol, que es posible manipular por nosotros. En este capítulo,
veremos qué es el DOM y cómo podemos hacer uso de él para tener un control claro de los
elementos que componen una página web.

Manejar estos conceptos te dará las bases para entender más adelante cómo capturar,
manipular y utilizar eventos en JavaScript, permitiendo la interacción entre las aplicaciones y
los usuarios, una de las características más relevantes de este lenguaje.

_ 2

www.desafiolatam.com
El concepto DOM

El DOM es un estándar adoptado por los navegadores web, creado por el W3C (World Wide
Web Consortium), con el fin de ser un medio que permita a los programas y scripts, acceder
y gestionar el contenido.

Para aplicar el DOM en el HTML mediante el uso de JavaScript, es necesario utilizar ciertas
instrucciones muy específicas del propio lenguaje de programación, las cuales permitirán
captar elementos del documento HTML como lo son: id, clases y etiquetas, para poder
captar la información necesaria y realizar la ejecución de código pertinente.

Para profundizar en detalle el concepto de DOM y sus características, puedes consultar el

documento Material Apoyo Lectura - El estándar DOM, ubicado en “Material
Complementario”.

Métodos de uso común para Manipular el DOM

El acceso a elementos del DOM puede realizarse de diferentes maneras en el código

JavaScript, en función de nuestras necesidades.

Estos accesos pueden realizarse mediante:

● Id: El acceso mediante el atributo id es uno de los más utilizados y de fácil uso,
puesto que es un identificador único de un elemento en el DOM.

<div id="contenedor">
<p id="parrafo">Hola soy un párrafo.</p>
</div>

var parrafo = document.getElementById("parrafo");

En este caso, si existe un elemento con el id parrafo, se retornará como objeto. De lo

contrario, el valor retornado será null. Este resultado se replica para todos los tipos de
búsqueda.

● Tag: El acceso por tag se realiza especificando el tipo de elemento HTML. Por
ejemplo, si deseamos buscar todos los elementos de tipo párrafo en el DOM (<p>),
podríamos escribir el siguiente código:

_ 3

www.desafiolatam.com
 <div id="contenedor">
<p>Hola soy un párrafo.</p>
</div>

Usando getElementsByTagName, seleccionamos el elemento p.

var parrafos = document.getElementsByTagName("p");

● Clase: También podemos buscar un elemento mediante su atributo class en el DOM.

Por ejemplo, si deseamos buscar un elemento que contenga la clase botón,
podríamos escribir el siguiente código:

<div id="contenedor">
<button type="button" class="boton">Soy un botón</button>
</div>

Usando getElementsByClassName, seleccionamos el elemento p.

var boton = document.getElementsByClassName("boton");

● Selectores CSS: Es posible buscar elementos mediante selectores CSS (de la misma
forma que se realiza en el código CSS). Por ejemplo, si deseamos buscar todos los
elementos <p> con la clase parrafo, podríamos escribir el siguiente código:

<div id="contenedor">
<p class="parrafo">Hola soy un párrafo.</p>
<p class="parrafo">Hola soy otro párrafo.</p>
</div>

Utilizando la instrucción document.querySelectorAll() podemos acceder a un selector de

CSS, en este caso, a la clase denominada parrafo.

var parrafos = document.querySelectorAll(".parrafo");

Por lo tanto, el método querySelectorAll nos traería un arreglo con todos los elementos que
se ajusten a nuestra búsqueda. Ahora, también disponemos del método querySelector que
nos retornaría sólo el primer elemento que calce con nuestro patrón de búsqueda:

var parrafos = document.querySelector(".parrafo");

_ 4

www.desafiolatam.com
Ejercicio guiado: Acceso a elementos del DOM

Ahora desarrollaremos un ejercicio para poner en práctica los conocimientos que hemos
ido adquiriendo sobre los elementos del DOM. Para esto, se solicita seleccionar los
siguiente elementos mediante el uso del DOM:

1. El “id” con valor “conteneder”.

2. El ul mediante la instrucción getElementsByTagName.
3. La clase con el valor “menu” mediante la instrucción getElementsByClassName.
4. La clase con el valor “item” mediante la instrucción querySelectorAll.

Para este desarrollo, se tiene como base el siguiente documento HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="contenedor">
<div class="menu">
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

● Paso 1: Crea una carpeta en tu lugar de trabajo favorito y dentro de ella crea dos
archivos, un index.html y un script.js.

● Paso 2: En el index.html debes escribir el código proporcionado al inicio del ejercicio.

● Paso 3: En el archivo script.js, que ya se encuentra enlazado desde el index.html,

agregaremos la instrucción necesaria para poder seleccionar el elemento indicado

_ 5

www.desafiolatam.com
 en el HTML con el id igual a contenedor (punto 1) mediante las instrucciones
“document.getElementById()” y almacenamos este resultado en una variable para
futuras operaciones y procesos que veremos más adelante, seguidamente
mostramos el resultado de la variable en un console.log.

var idContenedor = document.getElementById("contenedor");

console.log(idMenu);

● Paso 4: Al ejecutar el código anterior, el resultado sería:

<div id="contenedor">...</div>

Como se puede apreciar en el resultado anterior, la instrucción document.getElementById(),

trae todo el nodo del elemento HTML mediante el DOM.

● Paso 5: En el archivo script.js, agregaremos la instrucción necesaria para poder

seleccionar el elemento indicado en el HTML con la etiqueta <ul> mediante las
instrucciones “document.getElementsByTagName()” (punto 2) y almacenamos este
resultado en una variable, seguidamente mostramos el resultado por consola:

var elementoUl = document.getElementsByTagName("ul");

console.log(elementoUl);

● Paso 6: Al ejecutar el código anterior, el resultado sería:

HTMLCollection { 0: ul, length: 1 }

Como se puede apreciar en el resultado anterior, la instrucción

document.getElementsByTagName() trae toda la colección de elementos “ul” mediante el
DOM. En este ejemplo, como solo existe una etiqueta “ul” en el HTML, el resultado del
arreglo sería que tiene un solo elemento “ul” ubicado en la posición 0.

● Paso 7: En el archivo script.js, agregaremos la instrucción necesaria para poder

seleccionar el elemento indicado en el HTML con la clase “menu” mediante las
instrucción “document.getElementsByClassName()” (punto 3) y almacenamos este
resultado en una variable, mostrando el resultado por consola:

var menuClase = document.getElementsByClassName("menu");

console.log(menuClase);

_ 6

www.desafiolatam.com
 ● Paso 8: Al ejecutar el código anterior, el resultado sería:

HTMLCollection { 0: div.menu, length: 1 }

Como se puede apreciar, la instrucción document.getElementsByClassName(), trae toda la

colección de elementos que tengan la clase con el nombre “menu”. En este ejemplo, como
solo existe una etiqueta con la clase “menu” en el HTML, el resultado del arreglo es que tiene
un solo elemento con esa clase ubicado en la posición 0.

● Paso 9: En el archivo script.js, agregaremos la instrucción necesaria para poder

seleccionar los elemento indicado en el HTML con la clase “item” mediante la
instrucción “document.querySelectorAll()” (punto 4) y almacenamos este resultado
en una variable, seguidamente mostramos el resultado por consola:

var items = document.querySelectorAll(".item");

console.log(items);

● Paso 10: Al ejecutar el código anterior, el resultado sería:

NodeList(3) [ li.item, li.item, li.item ]

En el resultado anterior, la instrucción document.querySelectorAll(), trae toda la colección de

elementos que tengan la clase con el nombre “item”. En el ejemplo como existen tres
elementos con la clase “item” en el HTML, el resultado del arreglo es que tiene tres
elementos con esa clase, mostrando las etiquetas donde se encuentran.

Cambiando elementos del DOM

Para obtener el contenido de un elemento, podemos hacer uso de la propiedad innerHTML a

través del acceso de un objeto. Por ejemplo, dado el siguiente párrafo definido en el código
HTML:

<p id="parrafo">Hola a todos</p>

El acceso al contenido se realiza omitiendo la asignación a innerHTML y almacenando ésto

en una variable. Ejemplo:

var parrafo = document.getElementById("parrafo").innerHTML;

_ 7

www.desafiolatam.com
 console.log(parrafo);

Con esto, cambiamos su contenido de “Hola a todos” por “Soy un párrafo”. Podemos
configurar su contenido de la siguiente manera en el código JavaScript:

document.getElementById("parrafo").innerHTML = "Soy un párrafo";

La manipulación de elementos que acabamos de ver, se puede aplicar muy bien para
elementos, ya que su texto visible se define entre llaves, como en el caso de los párrafos,
etiquetas H1, H2, entre otras. En cambio, para elementos como botones, donde el texto
visible está presente en un atributo, el procedimiento es distinto. Por ejemplo, en el siguiente
botón:

<input type="button" value="Accion" id="btnAccion">

Podemos ver que el texto está presente en el atributo value, si quisiéramos manipular este
texto, podríamos escribir el siguiente código JavaScript:

document.getElementById("btnAccion").value = "Boton";

Primero accedimos al objeto con getElementById y luego al atributo value, asignando el

nuevo texto llamado Boton. Así como manipulamos el texto del boton, podemos manipular
los diferentes atributos de los elementos HTML que quisiéramos. Por ejemplo, podríamos
cambiar el id del botón mediante el siguiente código:

document.getElementById("btnAccion").id = "nuevoId";

También, cambiar el botón por una caja de texto con lo siguiente:

document.getElementById("btnAccion").type = "text";

Ahora, disponemos de un método específico para configurar atributos de los elementos del
DOM: setAttribute, el cual recibe como parámetro el nombre del atributo que se desea
configurar junto con el valor que se le asociará. En el caso del botón con el atributo id y valor
btnAccion, podríamos configurar su propiedad style para, por ejemplo, cambiar su color de
fondo:

document.getElementById('btnAccion').setAttribute('style',
'background-color: blue');

_ 8

www.desafiolatam.com
Así como podemos modificar elementos y propiedades mediante elementos del DOM,
también es posible añadir elementos y escribir un documentos HTML. Puedes profundizar
sobre este contenido en el documento Material Apoyo Lectura - Gestionando elementos del
DOM, ubicado en “Material Complementario”. Ahí podrás ver en detalle elementos teóricos y
prácticos de este contenido.

Ejercicio guiado: Cambiando elementos del DOM

Se requiere modificar el texto asociado al elemento <p> que posea un “id” con el nombre
“textoSaludo” a “Hola, este párrafo fue modificado”. Igualmente, modificar los valores del
elemento <input> con “id” igual a “entradaUno”, por el “value” igual a “Clic Aqui”, el id por
“clicUno” y el tipo “type” por “button”. Además, agregar el atributo “style” con la propiedad
“color: red; background-color: green”. Implementar las instrucciones necesarias para acceder
al DOM y modificar los valores mencionados desde el siguiente documento HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="contenedor">
<div class="menu">
<p id="texto">Soy un párrafo en un documento HTML</p>
<p id="textoSaludo">Soy un párrafo en un documento HTML</p>
<input value="Correo Electrónico" id="entradaUno" type="email"/>
<input value="Entrada de datos" id="entradaDos" type="email"/>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

● Paso 1: En el archivo script.js, agregaremos la instrucción necesaria para poder

seleccionar los elementos y así realizar las modificaciones solicitadas. Por lo tanto,
para seleccionar el elemento <p> con el id de nombre “textoSaludo”, debemos utilizar
el document.getElementById(), para modificar el texto asociado dentro de las
etiquetas <p>, se debe utilizar el “innerHTML”, quien permitirá modificar ese valor:

_ 9

www.desafiolatam.com
 document.getElementById("textoSaludo").innerHTML = "Hola, este párrafo
fue modificado";

● Paso 2: Modificaremos el elemento input con el id denominado “entradaUno”, en este

caso se deben cambiar distintos atributos de este elemento, como el caso del value,
id y type. Se debe utilizar la instrucción document.getElementById(), más las
propiedades de id, value y type para cambiar el valor existente por el nuevo valor:

document.getElementById("entradaUno").value = "Click Aquí";

document.getElementById("entradaUno").type = "button";
document.getElementById("entradaUno").setAttribute('style', 'color: red;
background-color: green');

Al ejecutar el código anterior en el navegador web, el resultado sería:

Imagen 1. Resultado HTML en el navegador después de las modificaciones.

Fuente: Desafío Latam

_ 10

www.desafiolatam.com