¿Qué es el DOM y cómo modificarlo?

Antes de ponerte a manipular el DOM conviene entender qué es y cómo funciona. El DOM (Document Object Model) define cómo los navegadores construyen un modelo de una página HTML y cómo JavaScript puede acceder a ese modelo y actualizar su contenido. El modelo es un árbol cuyos elementos están relacionados entre sí, y el navegador lo guarda en memoria mientras carga la página. El DOM se compone de cuatro tipos de nodos.

Este artículo puede recibir actualizaciones

Si tienes dudas o comentarios, no dudes en dejar un comentario.

Document

El nodo document es el punto de partida: desde él se accede al conjunto de los elementos del DOM. Representa además el objeto Document, que ofrece varios métodos para localizar elementos. ( ej.: document.querySelector(‘div.exemple’); )

Elemento

Los elementos HTML describen la estructura de una página. Para recorrer el árbol del DOM, empieza buscando elementos a través de Document. Una vez que tienes el elemento que buscabas, puedes acceder a sus nodos de texto y de atributo.

Atributo

Las etiquetas de apertura de los elementos HTML pueden llevar atributos ( por ejemplo: id, class, … ) y estos se representan como nodos de atributo en el árbol del DOM. Los nodos de atributo no son hijos del elemento que los lleva: forman parte de ese elemento y ellos mismos no pueden tener hijos. Una vez que llegas a un elemento, hay métodos y propiedades de JavaScript específicos para leer o modificar sus atributos.

Texto

Igual que con el nodo de atributo, a un nodo de texto se accede a través de un nodo de elemento, y tampoco puede tener hijos.

Acceder a los elementos

Para modificar un elemento primero hay que llegar hasta él. Existen numerosos métodos para navegar por el DOM y modificarlo.

Seleccionar un elemento

getElementById(): accede a un elemento a partir de su atributo ID.
querySelector(): devuelve un elemento a partir de un selector CSS.

Seleccionar varios elementos

Estos métodos devuelven los elementos en forma de lista

getElementsByClassName(): devuelve varios elementos a partir de una clase.
getElementsByTagName(): devuelve varios elementos a partir de una etiqueta HTML ( ej.: <div> ) .
querySelectorAll(): devuelve varios elementos a partir de un selector CSS.

Pasar de un nodo a otro

parentNode: devuelve el elemento padre del elemento actual.
childNodes: devuelve la lista de hijos del elemento actual.
previousSibling: devuelve el nodo hermano anterior al elemento actual.
nextSibling: devuelve el nodo hermano siguiente al elemento actual.
firstChild: devuelve el primer hijo del elemento actual.
lastChild: devuelve el último hijo del elemento actual.

Manipular los atributos

Una vez que tienes el elemento, tienes también sus atributos y sus valores, con distintos métodos para manipularlos.

id

id: lee o define el id del elemento

Clase

className: lee o define la clase del elemento.
classList: devuelve una lista con las clases del elemento
add: añade una clase a la lista
remove: quita una clase de la lista
toggle: añade o quita una clase (la añade si no está, la quita si ya está).
contains: devuelve un booleano a verdadero si la clase está en la lista.

Atributos en general

hasAttribute(): devuelve un booleano a verdadero si el atributo existe en el elemento actual.
getAttribute(): devuelve el valor de un atributo.
setAttribute(): añade al elemento un atributo, con su valor como segundo argumento.
removeAttribute(): quita un atributo del elemento.

Acceder a los valores

nodeValue: devuelve el contenido de un nodo, en un párrafo devuelve su texto, y si el nodo es un atributo devuelve el valor del atributo.
innerText: recupera el texto sin tener en cuenta el marcado.
innerHTML: recupera el texto junto con el marcado del nodo.
textContent: devuelve el texto como innerText pero incluye también <script> y <style>, al contrario que innerText.

Añadir elementos en 3 pasos

Una de las cosas más importantes al manipular el DOM es poder crear elementos nuevos. Un elemento completo se crea en tres pasos:

createElement(): empiezas creando un nuevo nodo de elemento con el método createElement(). Ese nodo se guarda en una variable.
javascript
```
var element= document.createElement("p");
```
createTextNode(): createTextNode() crea un nuevo nodo de texto. También aquí el nodo se guarda en una variable, y se puede añadir al nodo de elemento con el método appendChild().
javascript
```
var texte = document.createTextNode("Lorem Ipsum");
```

appendChild(): ahora que tienes tu elemento, con o sin contenido en un nodo de texto, puedes añadirlo al árbol del DOM con este método.

javascript

var element = document.createElement('p');
var texte = document.createTextNode('Lorem Ipsum');
element.appendChild(texte);
document.body.appendChild(element);

El método write

Puede que hayas oído hablar del método document.write para escribir marcado y texto en un documento. Trae más problemas que soluciones: solo funciona mientras la página se carga por primera vez y, una vez cargada, provoca comportamientos distintos.

Aplastar toda la página
No añadir el contenido a la página
Crear una página nueva

Eliminar un elemento en 3 pasos

Igual que a veces hay que añadir un elemento al DOM, otras veces toca quitarlo.

Para ello guarda en una variable el elemento que quieres eliminar.
javascript
```
var removeElement= document.getElementById('monId');
```
Después, desde esa variable, accede al elemento padre con la propiedad parentNode .
javascript
```
var parentElement = removeElement.parentNode;
```

Con esa segunda variable ya puedes eliminar el elemento que guardaste en el primer paso.