Saltar al contenido principal

Introducción al DOM

Hasta ahora hemos trabajado principalmente con JavaScript mostrando resultados en la consola para aprender la sintaxis básica:

console.log("Hola");

Pero las páginas web no están formadas por una consola. Están formadas por elementos como:

  • Títulos.
  • Párrafos.
  • Botones.
  • Imágenes.
  • Formularios.
  • Listas.

Por ejemplo, una página HTML puede tener:

<h1 id="titulo">Mi página</h1>

<p>Bienvenido a mi página web.</p>

<button>Haz clic</button>

JavaScript se encargará de acceder a estos elementos html y modificarlos.

Para poder hacerlo utilizamos el DOM.

En este curso vamos a ver únicamente Javascript, pero necesitarás tener conocimientos básicos de HTML, por lo que te recomendamos empieces con el curso básico de HTML.

¿Qué es el DOM?​

DOM significa Document Object Model, que podemos traducir como Modelo de Objetos del Documento. Aunque el nombre pueda parecer complicado, la idea es sencilla.

Cuando el navegador carga una página HTML, JavaScript puede ver esa página como una especie de árbol de elementos.

Por ejemplo, este HTML:

<body>

    <h1>Mi página</h1>

    <p>Bienvenido</p>

</body>

Podemos imaginarlo así:

document
└── body
    ├── h1
    │   └── "Mi página"
    │
    └── p
        └── "Bienvenido"

El DOM permite a JavaScript acceder a este árbol.

Gracias a ello podemos:

  • Buscar elementos html concretos.
  • Leer su contenido.
  • Modificar su contenido.
  • Crear nuevos elementos.
  • Añadirlos a la página.
  • Eliminar elementos.

Una analogía: una casa

Podemos imaginar una página web como una casa.

El HTML construye la casa:

HTML
 ↓
Construye la estructura

Por ejemplo:

  • Una habitación.
  • Una puerta.
  • Una ventana.

CSS se encarga de su aspecto:

CSS
 ↓
Decora la casa

Por ejemplo:

  • Colores.
  • Tamaños.
  • Posiciones.

Y JavaScript permite interactuar con la casa y modificarla mientras está siendo utilizada.

JavaScript
 ↓
Busca y modifica elementos

Por ejemplo, JavaScript podría:

  • Abrir una puerta.
  • Cambiar el color de una habitación.
  • Añadir un mueble.
  • Eliminar un objeto.

El DOM es lo que permite a JavaScript encontrar y manipular esos elementos de la página.

document​

El objeto principal que utilizamos para trabajar con el DOM desde Jsvascript es:

document

document representa toda la página HTML.

Por ejemplo:

console.log(document);

Podemos pensar en document como una representación completa de nuestra página y todos sus elementos html. A partir de document podremos buscar elementos.

Buscar elementos​

Para modificar un elemento primero necesitamos encontrarlo. Es como si quisiéramos cambiar una bombilla de una casa.

Antes de cambiarla, necesitamos saber qué bombilla queremos cambiar.

En JavaScript ocurre lo mismo.

Primero:

1. Buscamos el elemento.

Después:

2. Lo utilizamos o modificamos.

Vamos a ver distintas formas de "buscar un elemento".​

querySelector()​

querySelector() permite buscar elementos HTML de diferentes maneras. Recordemos que un elemento html podía tener varias partes, entre ellas:

<h1 class="titulo" id="titulo1">Mi página</h1>
  • <h1>: la etiqueta HTML
  • class: la clase CSS
  • id: el identificador del elemento

Con querySelector() podremos buscar un elemento en nuestra página utilizando alguna de estas 3 partes:

1. Buscar por etiqueta

Podemos buscar directamente por el nombre de la etiqueta (por ejemplo ).

Imaginemos que este es nuestro HTML:

<h1>Mi página</h1>

<p>Bienvenido</p>

Desde JavaScript podremos acceder al elemento que es un <h1> con la siguiente sintaxis:

let titulo = document.querySelector("h1");

Después de ejecutar esta instrucción tendremos una variable llamda titulo que contiene el elemento html buscado, en este caso titulo guardará:

<h1>Mi página</h1>

La instrucción siempre es igual, guardando en una variable el elemento que sea de la etiqueta indicada entre paréntesis y comillas:

let variable = document.querySelector("etiqueta html");

2. Buscar por clase

También podemos utilizar el atributo class para acceder a un elemento. Supongamos que tenemos:

<p class="importante">
    Este mensaje es importante.
</p>

Para buscar una clase utilizamos . delante del nombre:

let mensaje = document.querySelector(".importante");

La clase en HTML es:

class="importante"

Y el selector es:

".importante"

3. Buscar por id

También podemos buscar un elemento utilizando su id.

Por ejemplo:

<h1 id="tituloPrincipal">
    Mi página
</h1>

Con querySelector() utilizamos #:

let titulo = document.querySelector("#tituloPrincipal");

Podemos recordar:

Etiqueta → "h1"

Clase    → ".nombreClase"

ID       → "#nombreId"

getElementById()​

Otra forma de buscar elementos es utilizando:

document.getElementById()

Como su nombre indica, este método busca un elemento utilizando su id. Con querySelector podíamos buscar un elemento de varias formas (etiqueta html, clase css o id). Este nuevo método getElementById() solo nos permite buscar un elemento utilizando su id. Es una manera bastante usanda ya que es más cómoda, puesto que su nombre es más intuitivo y no necesitamos acordarnos de poner el # delante como ocurría con el querySelector.

Por ejemplo:

<h1 id="titulo">
    Mi página
</h1>

Podemos buscarlo así:

let titulo = document.getElementById("titulo");

Observa que aquí no utilizamos #.

Con querySelector():

document.querySelector("#titulo");

Con getElementById():

document.getElementById("titulo");

¿Por qué no usamos #?

Porque getElementById() ya sabe que estamos buscando un id.

Cuando escribimos:

document.getElementById("titulo");

JavaScript entiende:

Busca el elemento cuyo id sea "titulo".

Por eso no necesitamos escribir #.

Al igual que el querySelector, getElementById tambié recupera y guarda en una variable el elemento buscado.

Modificar contenido​

Una vez hemos encontrado un elemento, una de las acciones más comunes es modificar su contenido.

Para ello utilizaremos principalmente un atributo llamado:

textContent

La sintaxis será siempre:

variable.textContent = "nuevo contenido";

Por ejemplo, tenemos este HTML:

<h1 id="titulo">
    Bienvenido
</h1>

Lo buscamos utilizando por ejemplo getElementById:

let titulo = document.getElementById("titulo");

Y modificamos su contenido usando textContent:

titulo.textContent = "Hola, Mario";

Ahora el título ya no mostrará "Bienvenido", sino "Hola, Mario". En la siguiente lección vermos qué más cosas podemos modificar de un elemento seleccionado.

Paso a paso​

Podemos dividirlo en tres pasos:

1. Tenemos el elemento HTML

<h1 id="titulo">
    Bienvenido
</h1>

2. Lo buscamos con JavaScript

let titulo = document.getElementById("titulo");

3. Modificamos su contenido

titulo.textContent = "Hola, MArio";

El resultado es:

<h1 id="titulo">
    Hola, Mario
</h1>

Leer contenido​

textContent también permite leer el contenido de un elemento.

HTML:

<p id="mensaje">
    Hola mundo
</p>

JavaScript:

let mensaje = document.getElementById("mensaje");

console.log(mensaje.textContent);

Salida:

Hola mundo

Por tanto, podemos utilizar textContent para:

  1. Modificar el contenido. En este caso utilizamos textContent como una asignación:
variable.textContent = "Nuevo contenido";
  1. Consultar el contenido. En este caso utilizamos directamente textContent, sin asignación, ya que solamanete queremos saber cuál es el contenido:
variable.textContent;

Ejemplo: contador de puntos​

Imagina que tenemos un contador en una página web.

En nuestro HTML dicho contador empezará siendo 0:

<h2 id="puntos">0</h2>

Después, podemos modificarlo desde JavaScript:

// 1. Obtengo el contador usando su id
let puntos = document.getElementById("puntos");

// 2. Modifico el contador con textContent
puntos.textContent = 10;

Ahora la página mostrará:

10

Crear elementos​

Hasta ahora hemos visto como buscar y modificar elemento HTML que ya existen en el .html. Pero JavaScript también permite crear nuevos elementos HTML.

Para ello utilizamos createElement:

document.createElement()

Por ejemplo, podemos crear un elemento html de tipo párrafo (<p>):

let parrafo = document.createElement("p");

Ahora JavaScript ha creado un elemento <p> y lo ha guardado en una variable llamada parrafo.

Es como si:

parrafo = <p></p>

Sin embargo cuando creamos un elemento HTML, éste está totalmente vacío (<p></p>). Podemos añadirle contenido usando textContent:

parrafo.textContent = "Este es un nuevo párrafo";

De manera que podríamos imaginarlo como que ahora tenemos:

parrafo = <p>Este es un nuevo párrafo</p>

Sin embargo, todavía hay un problema.

El elemento existe en JavaScript, pero todavía no se ha añadido a la página.

Podemos imaginarlo como comprar un mueble.

Comprar un mueble
        ↓
El mueble existe
        ↓
Pero todavía no está dentro de la casa

Con un elemento HTML ocurre lo mismo. Después de crearlo debemos añadirlo a algún lugar de la página, sino solo con createElement el elemento nunca aparecería en la páguna web.

Añadir elementos a la página​

Para añadir elementos a una página vamos a imaginarlo como "colgar" un elemento de otro. En HTML existen elementos contenido dentro de otros, es decir, elementos que son "hijos" de otros. Utilizaremos la instrucción appendChild.

La sintaxis será:

padre.appendChild(hijo);

Supongamos que tenemos este HTML:

<div id="contenedor">

</div>

Y queremos añadir dentro del <div> un párrafo. Algo así:

document
└── div
    │
    └── p
        └── "Bienvenido"

Primero buscamos el contenedor:

let contenedor = document.getElementById("contenedor");

De manera que es como si la variable contenedor equivaliese al div:

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

Después creamos un párrafo:

let parrafo = document.createElement("p");

Y le añadimos contenido:

parrafo.textContent = "Hola desde JavaScript";

De manera que la variable parrafo contiene el <p>:

parrafo = <p>Hola desde JavaScript</p>

Y finalmente lo "colgaremos" del contenedor (div) con la nueva instrucción appendChild:

contenedor.appendChild(parrafo);

El código completo sería:

let contenedor = document.getElementById("contenedor");

let parrafo = document.createElement("p");

parrafo.textContent = "Hola desde JavaScript";

contenedor.appendChild(parrafo);

Ahora nuestra página tiene un <p> dentro del <div>:

<div id="contenedor">

    <p>Hola desde JavaScript</p>

</div>

Crear elementos paso a paso​

Normalmente seguimos este proceso:

1. Buscar dónde queremos añadir el elemento.
                ↓
2. Crear el elemento.
                ↓
3. Añadirle contenido.
                ↓
4. Añadirlo a la página.

Por ejemplo, imaginemos que queremos añadir un nuevo <li> a nuestra lista <ul>. Si tenemos este HTML:

<ul id="lista">

</ul>

Nuestro código será:

// 1. Buscar el elemento <ul> del que vamos a colgar el <li>
let lista = document.getElementById("lista");

// 2. Crear el nuevo elemento <li>
let elemento = document.createElement("li");

// 3. Añadir contenido al <li>
elemento.textContent = "Comprar pan";

// 4. Añadirlo a la lista <ul>
lista.appendChild(elemento);

El resultado será:

<ul id="lista">

    <li>Comprar pan</li>

</ul>

Ejemplo con lista de tareas​

Imagina una aplicación para guardar tareas.

Tenemos este HTML:

<ul id="listaTareas">

</ul>

Queremos añadir tres tareas utilizando JavaScript.

// 1. Buscamos el elemento del que colgar nuestra nueva tarea
let lista = document.getElementById("listaTareas");

let tareas = [
    "Comprar comida",
    "Estudiar JavaScript",
    "Hacer ejercicio"
];

// 2. Podemos utilizar un for para repetir la instrucción de Crear y Colgar para todas las tareas
for (let i = 0; i < tareas.length; i++) {

    // 2.1. Crear el elemento <li> de la tarea
    let tarea = document.createElement("li");

    // 2.2. Añadirle como contenido el texto i del array de tareas
    tarea.textContent = tareas[i];
    
    // 2.3. Colgar la tarea de la lista
    lista.appendChild(tarea);

}

El resultado en la página será una lista con estos tres textos:

<ul id="listaTareas">
    <li>Comprar comida</li>
    <li>Estudiar JavaScript</li>
    <li>Hacer ejercicio</li>
</ul>
• Comprar comida
• Estudiar JavaScript
• Hacer ejercicio

Aquí estamos combinando varios conocimientos.

Tenemos un:

Array
  +
for
  +
createElement()
  +
textContent
  +
appendChild()

El proceso es siempre el mismo:

  1. Recuperar el elemento "padre".
  2. Crear el nuevo elemento "hijo".
  3. Añadirle contenido el "hijo".
  4. Colgar el "hijo" del "padre".

Si estamos dentro de un bucle for el proceso será exactamente igual, simpelemente que los pasos 2,3 y 4 estarán dentro del bucle for, puesto que queremos repetirlos para varios elemento.

Esta es una de las formas más habituales de utilizar JavaScript para generar contenido dinámicamente.

Ejemplo con objetos​

También podemos utilizar objetos.

Supongamos que tenemos:

let producto = {
    nombre: "Teclado",
    precio: 40
};

Y este HTML:

<div id="producto"></div>

Podemos crear contenido utilizando los datos del objeto:

// 1. Recuperamos el "padre"
let contenedor = document.getElementById("producto");

// 2. Creamos el elemento "hijo"
let titulo = document.createElement("h2");

// 3. Añadimos contenido al "hijo"
titulo.textContent = producto.nombre;

// 4. Colgamos el "hijo" del "padre" para que aparezca en la página
contenedor.appendChild(titulo);

// Y lo mismo para el precio...

// 2. Creamos el elemento "hijo"
let precio = document.createElement("p");

// 3. Añadimos contenido al "hijo"
precio.textContent = `Precio: ${producto.precio} €`;

// 4. Colgamos el "hijo" del "padre" para que aparezca en la página
contenedor.appendChild(precio);

El resultado será:

<div id="producto">
    <h2>Teclado</h2>
    <p>Precio: 40€</p>
</div>

JavaScript ha utilizado la información del objeto para crear elementos HTML.

Resumen

El DOM permite a JavaScript acceder y modificar los elementos de una página HTML.

Podemos imaginar el DOM como un árbol que representa todos los elementos de la página.

El objeto principal es:

document

Buscar elementos​

Con querySelector():

document.querySelector("etiquetaHtml");
document.querySelector(".class");
document.querySelector("#id");

Con getElementById():

document.getElementById("identificador");

Modificar contenido​

elemento.textContent = "Nuevo contenido";

Crear elementos​

let elemento = document.createElement("p");

Añadir contenido​

elemento.textContent = "Hola";

Añadir el elemento a la página​

contenedor.appendChild(elemento);

A partir de ahora podremos utilizar JavaScript no solo para realizar cálculos o trabajar con datos, sino también para modificar directamente lo que ve el usuario en una página web.

Ejemplos resueltos

Ejercicio resuelto 1 - Cambiar un título​

Enunciado​

Tenemos un título con el id titulo.

Modifica su contenido para que muestre:

Bienvenido a mi página

HTML​

<h1 id="titulo">Hola</h1>

Solución​

let titulo = document.getElementById("titulo");

titulo.textContent = "Bienvenido a mi página";

Explicación​

Primero buscamos el elemento utilizando su id.

Después utilizamos textContent para cambiar el texto.

Ejercicio resuelto 2 - Mostrar información de un usuario​

Enunciado​

Tenemos un objeto con información de un usuario.

Muestra su nombre dentro de un elemento HTML.

HTML​

<p id="nombreUsuario"></p>

JavaScript​

let usuario = {
    nombre: "Ana",
    edad: 25
};

let elementoNombre = document.getElementById("nombreUsuario");

elementoNombre.textContent = usuario.nombre;

Resultado​

La página mostrará:

Ana

Ejercicio resuelto 3 - Crear un elemento​

Enunciado​

Crea un nuevo párrafo con el texto:

Este párrafo ha sido creado con JavaScript.

Añádelo dentro de un contenedor.

HTML​

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

Solución​

let contenedor = document.getElementById("contenedor");

let parrafo = document.createElement("p");

parrafo.textContent = "Este párrafo ha sido creado con JavaScript.";

contenedor.appendChild(parrafo);

Explicación​

Primero buscamos el lugar donde queremos añadir el párrafo.

Después:

  1. Creamos el <p>.
  2. Le añadimos texto.
  3. Lo añadimos al contenedor.

Ejercicio resuelto 4 - Crear una lista desde un array​

Enunciado​

Tenemos un array con varios nombres.

Crea un elemento <li> para cada nombre y añádelo a una lista.

HTML​

<ul id="lista"></ul>

JavaScript​

let nombres = ["Jose", "Pablo", "Pedro"];

let lista = document.getElementById("lista");

for (let i = 0; i < nombres.length; i++) {

    let elemento = document.createElement("li");

    elemento.textContent = nombres[i];

    lista.appendChild(elemento);

}

Resultado​

• Jose
• Pablo
• Pedro