Artículo original escrito por Jessica Wilkins
Artículo original What is the DOM? Document Object Model Meaning in JavaScript
Traducido y adaptado por Keiler Guardo Herrera
Si acabas de empezar a aprender JavaScript, es posible que hayas oído hablar del DOM. Pero, ¿qué es exactamente?
En este artículo, te explicaré qué es el DOM y te proporcionaré algunos ejemplos con código JavaScript.
Veremos cómo seleccionar elementos de un documento HTML, cómo crear elementos, cómo cambiar estilos CSS en línea y cómo escuchar eventos.
¿Qué es el DOM?
DOM son las siglas de Document Object Model. Es una interfaz de programación que nos permite crear, cambiar o eliminar elementos del documento. También podemos añadir eventos a estos elementos para hacer nuestra página más dinámica.
El DOM visualiza el documento HTML como un árbol de nodos. Un nodo representa un elemento HTML.
Echemos un vistazo a este código HTML para entender mejor la estructura de árbol del DOM.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Estructura de arbol del DOM</title>
</head>
<body>
<h1>Estructura de árbol del DOM</h1>
<h2>Aprender sobre el DOM</h2>
</body>
</html>Nuestro documento se llama nodo raíz y contiene un nodo hijo que es el elemento <html>. El elemento <html> contiene dos hijos que son los elementos <head> y <body>.
Tanto el elemento <head> como el elemento<body> tienen hijos propios.
Esta es otra forma de visualizar el árbol de nodos.
Podemos acceder a estos elementos en el documento y hacer cambios en ellos usando JavaScript.
Veamos algunos ejemplos de cómo podemos trabajar con el DOM utilizando JavaScript.
Cómo seleccionar elementos en el documento
Hay varios métodos distintos para seleccionar un elemento en el documento HTML.
En este artículo, nos centraremos en tres de esos métodos:
getElementById()querySelector()querySelectorAll()
getElementById()
En el HTML, los id se utilizan como identificadores únicos para los elementos HTML. Esto significa que no se puede tener el mismo nombre del id para dos elementos diferentes.
Esto sería incorrecto:
<p id="para">Este es mi primer párrafo.</p>
<p id="para">Este es mi segundo párrafo.</p>Tendrías que asegurarte de que esos ids son únicos, como este:
<p id="para1">Este es mi primer párrafo.</p>
<p id="para2">Este es mi segundo párrafo.</p>En JavaScript, podemos tomar una etiqueta HTML haciendo referencia al nombre del id.
document.getElementById("el nombre del id va aquí")Este código le dice a la computadora que obtenga el elemento <p> con el id de para1 e imprima el elemento en la consola.
const parrafo1 = document.getElementById("para1");
console.log(parrafo1);
Si quisiéramos solo leer el contenido del párrafo, entonces podemos utilizar la propiedad textContent dentro del console.log().
const parrafo1 = document.getElementById("para1");
console.log(parrafo1.textContent);
querySelector()
Puedes utilizar este método para encontrar elementos con uno o más selectores CSS.
He creado este ejemplo HTML de mis programas de televisión favoritos:
<h1>Programas de televisión favoritos</h1>
<ul class="list">
<li>Golden Girls</li>
<li>Archer</li>
<li>Rick and Morty</li>
<li>The Crown</li>
</ul>Si quisieras obtener e imprimir en la consola el elemento h1, entonces podrías usar el nombre de la etiqueta dentro del querySelector().
const elementoH1 = document.querySelector("h1");
console.log(elementoH1);
Si quiero apuntar a class="list" para imprimir la lista desordenada en la consola, entonces usaría .list dentro del querySelector().
El . antes de list le dice a la computadora que apunte al nombre de la clase. Si quieres apuntar a un id entonces utilizarías un símbolo # antes del nombre.
const lista = document.querySelector(".list");
console.log(lista);
querySelectorAll()
Este método encuentra todos los elementos que coinciden con el selector CSS y devuelve una lista de todos esos nodos.
Si quisiera encontrar todos los elementos <li> en nuestro ejemplo, podría utilizar el combinador > para encontrar todos los hijos del <ul>.
const listaElementos = document.querySelectorAll("ul > li");
console.log(listaElementos); 
Si quisiéramos imprimir los elementos <li> con los programas de televisión, podemos utilizar un forEach() para hacer un bucle sobre el NodeList e imprimir cada elemento.
const listaElementos = document.querySelectorAll("ul > li");
listaElementos.forEach((elemento) => {
console.log(elemento);
});
Cómo añadir nuevos elementos al documento
Podemos utilizar document.createElement() para añadir nuevos elementos al árbol del DOM.
Veamos este ejemplo:
<h1>Razones por las que me encanta freeCodeCamp:</h1>Ahora mismo, solo tengo una etiqueta <h1> en la página. Pero quiero añadir una lista de razones por las que me gusta freeCodeCamp debajo de esa etiqueta <h1> utilizando JavaScript.
Primero podemos crear un elemento <ul> usando document.createElement(). Lo asignaré a una variable llamada listaDesordenada`.
let listaDesordenada = document.createElement("ul");
Luego tenemos que añadir ese elemento <ul> al documento utilizando el método appendChild().
document.body.appendChild(listaDesordenada);La siguiente parte es añadir un par de elementos <li> dentro del elemento <ul> utilizando el método createElement().
let listaElemento1 = document.createElement("li");
let listaElemento2 = document.createElement("li");Luego podemos utilizar la propiedad textContent para añadir el texto de nuestros elementos de la lista.
let listaElemento1 = document.createElement("li");
listaElemento1.textContent = "Es gratis";
let listaElemento2 = document.createElement("li");
listaElemento2.textContent = "Es impresionante";
La última parte es utilizar el método appendChild() para que los elementos de la lista se añadan a la lista desordenada.
let listaElemento1 = document.createElement("li");
listaElemento1.textContent = "Es gratis";
listaDesordenada.appendChild(listaElemento1);
let listaElemento2 = document.createElement("li");
listaElemento2.textContent = "Es impresionante";
listaDesordenada.appendChild(listaElemento2);Este es el resultado de todo el código.
let listaDesordenada = document.createElement("ul");
document.body.appendChild(listaDesordenada);
let listaElemento1 = document.createElement("li");
listaElemento1.textContent = "Es gratis";
listaDesordenada.appendChild(listaElemento1);
let listaElemento2 = document.createElement("li");
listaElemento2.textContent = "Es impresionante";
listaDesordenada.appendChild(listaElemento2);Este es el resultado de la página:
Cómo utilizar la propiedad Style para cambiar los estilos CSS en línea
La propiedad style le da la capacidad de cambiar el CSS en su documento HTML.
En este ejemplo, vamos a cambiar el texto h1 de negro a azul utilizando la propiedad style.
Aquí está nuestro HTML.
<h1>Me cambiaron al color azul utilizando JavaScript</h1>
Primero tenemos que tomar la etiqueta h1 utilizando el método querySelector().
const h1 = document.querySelector("h1");A continuación, usamos h1.style.color para cambiar el texto del h1 de negro a azul.
const h1 = document.querySelector("h1");
h1.style.color = "blue";Este es el resultado en el navegador:
Puede utilizar esta propiedad style para cambiar una serie de estilos CSS en línea incluyendo el background-color, border-style, font-size y más.
Cómo usar addEventListener() para escuchar eventos en la página
Este método le permite añadir un evento a un elemento HTML como un botón.
En este ejemplo, cuando el usuario haga clic en el botón, aparecerá un mensaje de alerta.
En nuestro HTML, tenemos un elemento button con el id de btn.
<button id="btn">Mostrar alerta</button>
Podemos apuntar a ese elemento en nuestro JavaScript usando el método getElementById() y asignándolo a la variable llamada boton`.
const boton = document.getElementById("btn");
La función addEventListener() toma un tipo de evento y una función. El tipo de evento será un evento click y la función activará el mensaje de alerta.
Este es el código para añadir el evento que escucha a la variable boton`.
boton.addEventListener("click", () => {
alert("Gracias por hacer clic en mí");
});Este es el código completo en el que puedes hacer clic en el botón y aparecerá el mensaje de alerta:
Cómo utilizar el DOM en proyectos reales
Esa fue una breve introducción a algunos de los métodos del DOM que puedes utilizar. Hay muchos más ejemplos que no hemos cubierto en este artículo.
Si quieres empezar a construir proyectos de JavaScript para principiantes y trabajar con el DOM, entonces te sugiero que mires mi artículo 40 proyectos de JavaScript para principiantes.
Conclusión
DOM significa Document Object Model y es una interfaz de programación que nos permite crear, cambiar o eliminar elementos del documento. También podemos añadir eventos a estos elementos para que nuestra página sea más dinámica.
Puedes seleccionar elementos en JavaScript utilizando métodos como getElementById(), querySelector(), y querySelectorAll().
Si quieres añadir nuevos elementos al documento puedes utilizar document.createElement().
También puedes cambiar los estilos CSS en línea de los elementos utilizando la propiedad style.
Si quieres añadir eventos a los elementos, como los botones, puedes utilizar la función addEventListener().
Espero que hayas disfrutado de este artículo y que tengas mucha suerte en tu viaje con JavaScript.