¿Qué es el DOM?
El DOM, acrónimo de Document Object Model, es la herramienta base para manipular cualquier página web. El DOM es generado por el navegador que uses (Chrome, Firefox, etc) en el momento en que el documento HTML de una web se carga. 
Ese documento HTML de una web se carga en un navegador, el navegador crea un objeto (un Document Object) basado en dicho documento HTML. Este Document Object contiene múltiples propiedades y métodos que nos permiten interactuar con esa web usando nuestro código JS (aka JavaScript).
A ese objeto creado por el navegador, con todas sus propiedades y métodos, se le llama el Document Object Model.
El DOM estructura nuestra web en HTML nodes (nodos en español), donde cada etiqueta de HTML sería un node que podría tener etiquetas "hijas", formando así una estructura de árbol, o jerarquía de nodos.
Esta es una representación común del DOM. Ten en cuenta que todos esos nodos descienden de un "objecto madre": el window object, a partir del cual se puede acceder a todos los nodos, porque son sus hijos.
Del window object también descienden todos los métodos y propiedades que podemos usar en JS. De hecho, JS permite obviarlo a la hora de escribir cualquier método, así que por ejemplo, si quisiéramos hacer un alert(), sería igual escribir alert() que window.alert().
El primer nodo, padre de todos los demás, es el nodo <html>, también conocido como el root node.
Si vamos a la consola del navegador y escribimos "document", verás que nos devuelve una representación en HTML de la web sobre la que hayamos abierto la consola.
Pero si escribimos "document.", con el punto, verás que aparecen decenas de métodos que podemos usar.
Existen dos tipos de nodes:
- element nodes
<h1>, <div>, ... - text nodes contenido dentro de algunos element nodes: <h2>Un subtítulo aquí</h2>
Para interactuar con la página, tenemos que hacerlo a través de los nodes, obteniendo una referencia del node que queremos manipular. Con "manipular" nos referimos a hacer cosas como eliminar elementos de una página o añadir elementos. 
Seleccionando elementos del DOM
Para obtener la referencia del node que queremos manipular, podemos usar varios métodos que nos proporciona el DOM. Recuerda que los puedes ver todos en tu consola escribiendo "document.".
Lo que hacemos cuando queremos obtener una referencia al node que queremos manipular, es algo así como "solicitar acceso al DOM", lo que podríamos traducir por "query access to the DOM". No es casualidad que el método que necesitemos se llame querySelector. 
Accediendo a un solo elemento del DOM
Como decimos, una de las formas (y mi favorita) de acceder al DOM es a través del método querySelector. Hagamos un ejemplo para entederlo bien.
1. Nos creamos un archivo .html conectado a un archivo .js y lo abrimos en nuestro navegador. Yo utilizo la extensión live-server de vsCode para no tener que recargar el navegador a cada cambio que haga en mi código.
Nuestro documento .html tiene un contenido muy sencillo:
2. Como ves, a lo largo del archivo tenemos 3 párrafos (<p>). Vamos a seleccionar sólo el primer párrafo. Este proceso requiere dos pasos:
1º crear una variable para guardar el elemento que queremos seleccionar.
2º asignar un elemento del DOM a esa variable usando querySelector.
Hay 3 formas en las que podamos seleccionar un node usando querySelector:
- usando una etiqueta HTML <>
- usando una clase de CSS .
- usando un ID de CSS #
Sintaxis
const varName = document.querySelector('HTML tag');
const varName = document.querySelector('.CSS class');
const varName = document.querySelector('#CSS ID');
Si miras el árbol de nodos, verás que a través del document se puede acceder al root node (el elemento <html>) y, a que a través de él, a cualquier nodo. Por tanto, le aplicamos el método querySelector, que nos permite seleccionar cualquier nodo de nuestra web.
Así que primero nos creamos una variable llamada parag. Vamos a seleccionar el primer párrafo usando su etiqueta HTML. Hacemos también un console.log para ver el resultado en nuestra consola. Aquí el bloque de código con el que estrenamos nuestro archivo JS:
const parag = document.querySelector('p');
console.log(parag);
Si ahora vas a tu navegador, deberías ver esto:
¡Ahí lo tenemos! Nuestro párrafo seleccionado, visible en nuestra consola. 
Ten en cuenta que esta forma de seleccionar nodos solo selecciona el primer elemento de todo el documento que coincida con nuestra selección. Es decir, en este caso, no importa que haya más <p> en nuestra página, porque JS lee nuestra web de arriba a abajo y sólo seleccionará el primero que encuentre.
3. Si quisiéramos seleccionar el segundo <p>, lo podríamos hacer usando su clase de CSS, de esta manera:
const parag = document.querySelector('.error');
console.log(parag);
¡No olvides poner el puntito que indica que es una clase de CSS! Es pequeño, y por eso a veces se nos puede pasar por alto...
4. Compliquemos un poco las cosas. Vamos a añadir un <div> con la clase error a nuestro HTML. Lo añadimos debajo del 1er <div>.
Aquí la línea de código que hemos añadido:
<div class="error">this is a 2nd error</div>
No podemos usar el código de antes porque sólo nos devolvería el primer elemento que contuviese la clase error. Pero lo que podemos hacer es combinarlos. Es decir, seleccionar un <div> que contenga la clase error. Así es como se haría:
const parag = document.querySelector('div.error');
console.log(parag);
Pero estamos en las mismas: si ahora hubiese otro <div> con la clase error, JS sólo seleccionaría el primero con el que se encontrase. 
Existe un truquito para obtener un selector de CSS único: inspecciona cualquier elemento en el navegador --> ve a elements --> botón derecho en el elemento --> copy --> copy selector. Eso te dará un selector único. Por ejemplo, si hacemos eso con el segundo <p>, nos daría este selector:
body > div:nth-child(2) > p:nth-child(2)
Ten en cuenta que este selector es único en el momento actual. Si luego añades más código HTML, es posible que ya no te sea útil. 
Accediendo a varios elementos del DOM
Vamos a ver cómo acceder a varios elementos del DOM a la vez. Por ejemplo, vamos a seleccionar todos los párrafos (<p>). Para ello utilizamos una versión muy similar al querySelector: querySelectorAll.
Sintaxis
const varName = document.querySelectorAll('HTML tag');
const varName = document.querySelectorAll('.CSS class');
const varName = document.querySelectorAll('#CSS ID');
1. Seleccionamos todos los <p> usando querySelectorAll. Así:
const paragraphs = document.querySelectorAll('p');
console.log(paragraphs);
Como verás en tu consola, nos da esto:
0: p
1: p
2: p.error
length: 3
__proto__: NodeList
Una NodeList es sencillamente un grupo de nodos. Como verás, tiene pinta de array, pero no lo es. Eso sí, trae consigo algunas propiedades aplicables a los arrays. Algunas de estas propiedades son:
- square brackets notation. Lo que nos permite seleccionar elementos de la nodeList, tal y como haríamos con los elementos de un array. Así:
console.log(paragraphs[1]);
- loops, como el forEach. Así lo implementamos:
paragraphs.forEach(parag => {
console.log(parag);
});
En tu consola verás que nos ha impreso 3 <p> independientes:
<p>A very smart text here</p> <p>Some more smart text</p> <p class="error">ooops...error!</p>
De la misma manera con la que hemos accedido a todos los <p> de nuestro archivo (es decir, a un elemento HTML), podemos acceder también a todos los elementos que compartan un selector de CSS (como error).
Otras formas de acceder al DOM
Ya hemos visto querySelector y querySelectorAll como formas para acceder al DOM e interactuar con él, pero éstas no son las únicas formas. Así, existen estas 3 alternativas:
- document.getElementById('ID here');
- document.getElementsByClassName('CSS class here');
- document.getElementsByTagName('HTML tag here');
Usar getElementById es equivalente a usar querySelector('#ID'). No ocurre lo mismo al usar las otras 2 formas. He aquí un cuadro comparativo sobre las formas de seleccionar un elemento por su clase de CSS:
getElementsByClassName('CSS class')
- ¡sin punto! porque la clase está implícita en el método
- devuelve una HTMLCollection
- menos flexible (pocos métodos)
querySelectorAll('.CSS class')
- con punto para indicar que es una clase de CSS
- devuelve una NodeList
- más flexible (más métodos)
En cuanto a los métodos, te aconsejo que vayas a vsCode y los pruebes todos. Si usas la función de "autocompletar" de vsCode, los podrás ver todos a golpe de vista:
Cómo cambiar el contenido de una página
Vamos a ver cómo añadir y cambiar texto dentro de nuestra página manipulando el DOM.
1. Para ello, añadimos un poco más de HTML a nuestro archivo .html, al final:
<div class="content">
<p>this is a text with content</p>
</div>
2. Vamos a seleccionar el primer <p> usando querySelector. Para seleccionar únicamente el texto dentro del <p>, usamos una propiedad llamada innerText.
Así nos queda el bloque de código que hemos editado:
const parag = document.querySelector('p');
console.log(parag.innerHTML);
Comprueba tu consola y verás que se ha impreso únicamente el texto "A very smart text here", sin las etiquetas HTML.
3. Ahora vamos a cambiar el contenido de ese texto. Para eso, usamos la variable parag con la propiedad innerText y le asignamos el valor que queramos. Así:
parag.innerHTML = 'I just changed!';
Ve a tu página y verás que el texto "A very smart text here" ha sido reemplazado por "I just changed!". 
Lo que acabamos de hacer es sobrescribir el contenido, pero ¿qué pasa si solo queremos añadir contenido al ya existente? Muy sencillo, utilizamos el operador += . Así:
parag.innerHTML += 'I just changed!';
Eso hace que ahora veamos nuestro dos textos pegaditos:
A very smart text hereI just changed!
Es decir, mantiene el contenido inicial y le agrega el nuevo a continuación. 
4. Ahora vamos a cambiar el contenido de varios elementos a la vez. Por ejemplo, el contenido de todos los <p>. Para ello, usamos querySelectorAll y barremos todos los <p> con un forEach loop. Le pedimos que nos imprima en la consola sólo el texto interior de cada <p>. Así:
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(parag => {
console.log(parag.innerHTML);
});
Ahora deberías ver en tu consola el contenido de los 4 <p> de nuestro archivo .html. Para cambiar el contenido de todos a la vez, simplemente utilizamos la propiedad innerText sobre la variable local del loop (parag). Así:
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(parag => {
console.log(parag.innerHTML);
parag.innerHTML = 'Beetlejuice!';
});
Y con este cambio, todos los <p> de tu página deberían haber sido sustituidos por "Beatlejuice!", así que deberías verlo por (casi) todas partes:
The DOM
Beetlejuice!
Beetlejuice!
Beetlejuice!
this is a 2nd error
Beetlejuice!
Recuerda que, si lo quisiéramos fuese agregar contenido (aka append), debemos usar el operador +=. Así:
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(parag =>; {
console.log(parag.innerHTML);
parag.innerHTML += ' Beetlejuice!';
});
Y con esto, todos los párrafos recibirían al final un simpático "Beetlejuice!". 
Cómo cambiar el código HTML de un página
Vamos a ver cómo añadir, quitar o editar código HTML de nuestra página a través del DOM. Esto se consigue usando la propiedad innerHTML. Esta propiedad nos proporciona el elemento HTML que esté dentro del elemento al que apliquemos la propiedad. Por ejemplo, si la aplicásemos a este <div> que engloba el <p>:
<div class="content">
<p>this is a text with content</p>
</div>
nos devolvería el código HTML del <p>. Vamos a la práctica:
1. Seleccionamos el <div> con la clase content. Hacemos un console.log de la variable que hemos creado, lo cual nos devuelve en la consola el contenido HTML de dicho <div>. Es decir, nos devuelve el párrafo:
<p>this is a text with content</p>
Aquí el bloque de código que hemos añadido:
const content = document.querySelector('.content');
console.log(content.innerHTML);
2. Para sustituir ese elemento HTML, le damos un nuevo valor a nuestra variable content usando la propiedad innerHTML. Ese valor debe tener el formato de una etiqueta HTML, porque para eso se concibió esta propiedad. Así que creamos un nuevo <h3>, por ejemplo.
Así nos queda el bloque de código que hemos añadido:
content.innerHTML = '<h3>I am an title now!</h3>';
Y con este cambio, en tu navegador deberías ver que el párrafo ha sido sustituido por un heading <h3>:
Inspecciona el elemento en tus dev tools y verás que ya no es un <p> lo que está dentro del <div>, sino un <h3>. 
3. Hagamos un ejemplo más. Imaginemos que tenemos una base de datos que almacena un array de gente. Lo que vamos a hacer es usar los elementos de ese array, que en este caso son personas, y mostrarlos en nuestra página, dentro del <div class="content"></div>.
Para ello, barremos el array con un forEach loop e imprimimos cada persona en un <li> para que se vea como una lista. No debemos sustituir el contenido, sino mostrarlo y agregarlo a continuación del contenido ya existente.
Aquí el bloque de código que hemos añadido:
const people = ['Mike', 'Dustin', 'Max'];
people.forEach(person => {
content.innerHTML += `<li>${person}</li>`;
});
A este formato con los backticks ` ` y la variable local dentro de ${ } se le llama HTML template.
¡Y listo! Si vas a tu navegador, verás que se ha impreso una lista con los nombres:
Cómo obtener y actualizar atributos HTML
Pongámonos en situación: los atributos HTML son el código que escribimos en la apertura de una etiqueta HTML. Son la parte subrayada en amarillo:
A través del DOM también podemos acceder a ellos, modificar su valor y crear nuevos atributos. Para ello utilizamos dos propiedades:
- getAttribute: para obtener un atributo del elemento HTML que seleccionemos.
- setAttribute: para editar/añadir un atributo al elemento HTML que seleccionemos.
Hagamos unos ejemplos:
1. Añadimos una etiqueta <a> a nuestro archivo .html, así:
<a href="https://www.google.es/">this link will take you to Google</a>
Si guardas y vas a tu navegador, verás que ya aparece esa frase en forma de enlace o link:
"this link will take you to Google"
2. Vamos a nuestro archivo .js y seleccionamos el link usando querySelector. Lo guardamos en una variable a la que llamamos simplemente link. Para acceder al atributo href, utilizamos getAttribute, que necesita recibir el nombre del atributo (href). Hacemos un console.log para ver el resultado en la consola.
Así queda el bloque de código que hemos añadido:
const link = document.querySelector('a');
console.log(link.getAttribute('href'));
Comprueba que en tu consola aparezca la url de Google.
3. Ahora vamos a cambiar el valor del atributo href. Para eso tenemos que usar el método setAttribute, que necesita dos parámetros:
- el nombre del atributo que queremos cambiar (href)
- el nuevo valor del atributo (https://github.com/Ro008)
Para que en nuestra página se muestre otro texto distinto dentro del <a>, usamos la propiedad innerText y le damos el nuevo valor que sustituirá a la frase actual.
Aquí el bloque de código que hemos añadido:
link.setAttribute('href', 'https://github.com/Ro008');
link.innerText = 'my GitHub profile';
Con esto, conseguimos mostrar el nuevo texto en nuestra web. Si inspeccionas el <a>, verás que ahora apunta a la web de Github, y no a Google.
El método setAttribute no sólo nos permite actualizar el valor de un atributo, sino crear nuevos atributos. Vamos a verlo con un ejemplo.
4. Seleccionamos el <p> que contiene la clase error con querySelector. Lo almacenamos en una variable. Utilizamos el setAttribute para crear un nuevo atributo y su valor.
Para crear un atributo, simplemente le pasamos un primer parámetro con el nombre del atributo que queremos crear y un segundo con el valor de éste. Por ejemplo, si queremos añadirle un atributo style para cambiar el color del texto.
Así nos queda el bloque de código que hemos añadido:
const message = document.querySelector('p.error');
message.setAttribute('style', 'color: red;');
¡Tachááánnn! Ahora nuestro texto se ve de color rojo, porque javaScript ha creado ese atributo.
ooops...error!
Cómo cambiar los estilos de CSS
El paso nº4 de la sección anterior no es la manera más óptima de cambiar una clase de CSS, pero es necesario que al menos la conozcas. De hecho, existen 3 maneras de manipular las clases de CSS:
La primera forma (la que hemos visto hasta ahora) no es muy práctica porque, suponiendo que tengamos este código HTML:
<p class="error" style="color: red;">ooops...error!</p>
Y ahora quisiéramos añadirle otra propiedad CSS, por ejemplo, un border-color, haríamos esto en nuestro código .js:
const message = document.querySelector('p.error');
message.setAttribute('style', 'border: 1px solid orange;');
Lo cual sustituiría el valor del atributo style ya existe. Ve a tu navegador y comprueba cómo ahora el <p> tiene un borde naranja pero el texto ya no es rojo. Así que mucho ojo con esta forma, que te puede traer algún disgusto.
2ª manera
Vamos a ver la segunda manera. Usando la propiedad style, nuestras clases CSS se respetarán, no siendo sustituidas una por la otra, sino simplemente añadidas una detrás de otra. Hagamos un ejemplo:
1. Siguiendo con nuestra variable message, le aplicamos la propiedad style y la imprimimos en la consola. Así:
const message = document.querySelector('p.error');
console.log(message.style);
Como verás, se nos imprime un mensaje que comienza así:
CSSStyleDeclaration {0: "color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
Despliégalo y podrás ver todas la propiedades CSS que existen. Veras que todas estás vacías excepto "color", que tiene el valor de "red", el que le hemos dado.
Así que esta propiedad nos sirve para añadir estilos CSS al vuelo. 
Por tanto, de esa lista de propiedades CSS que vemos en la consola podemos extraer la que queramos y modificarla al vuelo. Por ejemplo, le añadimos un borde. Así lo haríamos:
const message = document.querySelector('p.error');
message.style.border = '2px solid green';
Y ahora, si vas a tu navegador, podrás ver el texto rojo con un borde verde.
Ten en cuenta que, si vas a utilizar alguna propiedad CSS con un nombre compuesto, como background-img o font-size, tenemos que escribirla en camelCase.
2. Si quisiéramos eliminar una propiedad CSS, lo que haríamos sería asignar dicha propiedad a un string vacío. Así:
message.style.border = '';
3ª manera
1. Creamos un archivo .css con dos clases, success y error. Lo llamamos styles.css, nombre estándar para estos casos. Así nos queda el archivo:
.error {
padding: 5px;
color: red;
border: 1px solid red;
}
.success {
padding: 5px;
color: green;
border: 1px solid green;
}
2. Lo vinculamos a un archivo .html, que tiene este contenido:
Ahora verás en tu navegador un simple título ("The DOM") y un texto rojo con un borde rojo. Significa que el archivo .css está correctamente vinculado con el archivo .html. Bien. 
3. Borramos todo lo que hemos hecho en nuestro archivo sandbox.js (lo dejamos en blanco).
4. Vamos a imprimir una lista de las clases de CSS que tiene nuestro elemento <p>. Esto lo hacemos en nuestro archivo .js, seleccionando el elemento con querySelector y utilizando la propiedad classList. Así nos queda el bloque de código que hemos añadido:
const message = document.querySelector('p');
console.log(message.classList);
Si compruebas tu consola, verás que te devuelve una DOMTokenList. Esto es sencillamente una lista con todas las clases de CSS que contiene el elemento que hemos seleccionado (el <p>). Así que ahí deberías ver la clase "error", porque es la única que tiene asignada este elemento.
5. Vamos a eliminar la clase error de nuestro archivo HTML, dejándolo así sin ningún atributo. Así nos queda:
<p>this is an error text</p>
Hacemos esto porque vamos a probar a añadirla usando el método add. Para ello, no tenemos más que aplicarlo a continuación, a la propiedad classList. Así nos queda la línea de código que hemos añadido:
message.classList.add('error');
Y con esto, a nuestro <p> se le vuelve a aplicar otra vez la clase error. 
6. Si quisiéramos eliminarla, usaríamos el método remove. Así:
message.classList.remove('error');
Práctica con clases de CSS y el DOM
Hagamos un pequeño ejercicio con lo visto en esta sección para que nos quede hiper claro. El objetivo es añadir la clase error a todos los <p> que contengan la palabra "error" y la clase success a todos los <p> que contengan la palabra "success".
1. Añadimos varios <p> a nuestro archivo .html, así:
<p>this is an error text</p>
<p>this is a successful text</p>
<p>this is a text</p>
<p>this is a text</p>
<p>success! this is a text</p>
<p>oopps...error!</p>
<p>this is a text</p>
2. Vamos al archivo sandbox.js y obtenemos una referencia de todos los <p> con querySelectorAll. Hacemos un forEach loop para tener acceso a cada <p> individualmente.
Dentro del forEach, usamos la propiedad textContent para apuntar al texto dentro de cada <p>. Podríamos usar innerText, pero textContent es más exhaustivo, ya que localiza texto aunque éste esté oculto, por ejemplo por medio de un display: none.
Si te quedan dudas sobre este tema, aquí tienes un ejemplo de w3schools donde explican muy bien las diferencias entre innerText, innerHTML y textContent.
Comprobamos si el <p> contiene o no las palabras success o error, usando el método includes y englobándolo todo en un if else statement. Así nos queda el bloque de código que hemos añadido:
const text = document.querySelectorAll('p');
text.forEach(parag => {
if (parag.textContent.includes('error')) {
parag.classList.add('error');
} else if (parag.textContent.includes('success')) {
parag.classList.add('success');
}
});
Con estos cambios, ya deberías ver algunos textos de color rojo o verde, dependiendo de qué clase se les aplique en función de si contienen la palabra "error" o "success".
Fíjate que también se ha aplicado al <p> que contenía la palabra "successful", porque el método includes busca caracteres que coincidan con los que nosotros le hemos dado, sin importar si después de esos caracteres vienen otros.
¡BRAVO!
¡Y hasta aquí la 1ª parte de esta DOM Saga! Si quieres seguir aprendiendo, aquí tienes la parte #2. Si tienes alguna duda, ¡nos vemos en los comentarios!
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Otros artículos que pueden interesarte