21 - Document Object Model (DOM)
¿Qué es el DOM?
El Document Object Model es la forma en la que JavaScript entiende los elementos de una página HTML para poder interactuar con ellos; ya sea crear, editar, borrar…
Por ejemplo, partiendo de este HTML:
<html>
<head>
<title>Ejemplo de DOM</title>
</head>
<body>
<h1>Hola mundo</h1>
<h2>Esto es un ejemplo del DOM</h2>
</body>
</html>Su representación en el DOM sería algo como esto:
Document
│
<html>
│ │
<head>─────────┘ └─────────<body>
│ │ │
<title> <h1>─────┘ └───<h2>
│ │ │
"Ejemplos de DOM" "Hola mundo" "Esto es un ejemplo"Se representa con una estructura de árbol.
Manipulando el DOM
Tomando como base el HTML anterior, vamos a ver algunos ejemplos de qué podemos hacer el DOM. No obstante, en próximos apartados veremos esto a más detalle.
Vamos a crear un párrafo con texto dentro y meterlo dentro de <body>:
/* Creamos un elemento <p> y lo guardamos en una constante */
const elemento = document.createElement("p")
/* Establecemos el texto que tendrá nuestro elemento por dentro */
elemento.innerText = "Creado con JS" //<p>Creado con JS</p>
/* Añadimos el elemento que hemos creado a nuestro body */
document.body.appendChild(elemento)Si vemos el esquema de nuestro DOM quedaría algo como esto:
...
│
<body>──<p>──"Creado con JS"
│ │
<h1>─────┘ └───<h2>
│ │
"Hola mundo" "Esto es un ejemplo"