El DOM (Document Object Model) nos permite acceder y gestionar un documento HTML.
Para esto comenzaremos con un ejemplo simple, vamos a copiar la base de un documento HTML con Bootstrap 5 (https://getbootstrap.com/docs/5.3/getting-started/introduction/)
Y dentro vamos a incluir tres elementos HTML:
- Un campo para ingresar texto
- Un botón
- Un <div> vacío que mostrará en su interior un resultado al pulsar en dicho botón
Un ejemplo simple, pero que nos ayudará a entender el funcionamiento del DOM.

El documento HTML será el siguiente:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo de DOM</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Ejemplo de DOM</h1>
<form action="">
<input type="text" id="input_nombre" class="form-control mb-3" placeholder="Ingresar nombre" />
<button type="button" id="btn_nombre" class="btn btn-primary mb-3"> Presentarse </button>
<div id="respuesta_saludo"></div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>
</html>
Selector simple
Antes de continuar vamos a crear un documento .js y a embeberlo en nuestro documento HTML como lo hicimos en la primer publicación.
Creamos una carpeta llamada js y luego dentro un archivo con el nombre scripts.js

Ahora incluimos nuestro archivo .js, recordar hacerlo siempre antes de que cierrer la etiqueta </body>
<script src="js/scripts.js"></script>
querySelector
En Javascript existe un objeto llamado document, el cual nos va a permitir gestionar un documento HTML a través de varios métodos, uno de ellos es querySelector().
El método en cuestión nos permite referenciar a un elemento por alguna característica propia del mismo como lo hace CSS, por ejemplo por su id. Editamos el archivo scripts.js con lo siguiente:
const input_nombre = document.querySelector("#input_nombre");
const btn_nombre = document.querySelector("#btn_nombre");
const respuesta_saludo = document.querySelector("#respuesta_saludo");
Como podemos ver en el ejemplo anterior, creamos tres constantes y referenciamos las mismas con el caracter # delante indicando que vamos a obtener el elemento por su id.
Recordemos que esos elementos tenían un id, que debe coincidir con el valor del mismo:
<input type="text" id="input_nombre" class="form-control mb-3" placeholder="Ingresar nombre" />
<button type="button" id="btn_nombre" class="btn btn-primary mb-3"> Presentarse </button>
<div id="respuesta_saludo"></div>
getElementById
Una alternativa a querySelector() es getElementById():
Podríamos tener esto:
const input_nombre = document.querySelector("#input_nombre");
O reemplazarlo por:
const input_nombre = document.getElementById("input_nombre");
El método getElementById() también nos permite recuperar un elemento, aunque sólo por su id.
El problema es que en muchas ocasiones tendremos que hacer referencias por otro tipo de característica como por ejemplo el nombre de una clase o el valor de un atributo.
Evento click
Un evento es un bloque de código programado que va a ejecutarse en un momento dado.
En Javascript existen muchos eventos, a continuación podemos ver varios de estos: https://www.w3schools.com/jsref/dom_obj_event.asp
Vamos a ver uno muy utilizado: click.
Recordemos la referencia al botón:
const btn_nombre = document.querySelector("#btn_nombre");
A esta referencia podemos agregarle un evento con el método addEventListener, al cual debemos indicarle dos parámetros: el tipo de evento y la función que se va a disparar cuando el evento suceda:
//Función que se dispara al hacer click.
const mostrarNombre = () => {
//Guardamos el nombre del usuario, a través de la propiedad value.
let nombre = input_nombre.value;
alert(nombre + " gracias por ingresar tu nombre");
}
//Agregamos el evento click al botón.
btn_nombre.addEventListener("click", mostrarNombre);
Notar que los elementos de HTML, como por ejemplo:
<input type="text" id="input_nombre" class="form-control mb-3" placeholder="Ingresar nombre" />
Al cual refenciamos con querySelector():
const input_nombre = document.querySelector("#input_nombre");
Al igual que cualquier objeto tiene propiedades que nos permiten obtener infomación del mismo, como value, que en el caso de los elementos de formulario (input, select, textarea) nos devuelven lo que ingresó el usuario:
let nombre = input_nombre.value;
innerText e innerHTML
Dentro de un elemento HTML podemos ingresar texto. Por ejemplo, podríamos reemplazar la función mostrarNombre():
const mostrarNombre = () => {
//Guardamos el nombre del usuario, a través del atributo value.
let nombre = input_nombre.value;
respuesta_saludo.innerText = nombre + " gracias por ingresar tu nombre";
}
Una alternativa a esto, si quisiéramos ingresar código HTML en lugar de sólo texto, es innerHTML:
const mostrarNombre = () => {
//Guardamos el nombre del usuario, a través del atributo value.
let nombre = input_nombre.value;
respuesta_saludo.innerHTML = "<strong>" + nombre + "</strong>" + " gracias por ingresar tu nombre";
}
Texto multi línea
Como vimos anteriormente, innerHTML nos permite ingresar HTML, pero tenemos que escribir todo en una sóla línea.
Para ingresar varias líneas de código debemos hacer algo como:
respuesta_saludo.innerHTML = "<p>" +
"Hola, " + nombre +
"</p>" +
"<p> Gracias por registarte"
O bien, podemos utilizar el modo template mediante el caracter `:
respuesta_saludo.innerHTML = `
<p> Hola, ${nombre} </p>
<p> Gracias por registarte </p>
`
Esta alternativa es mucho más amigable, y no tenemos que usar el signo más para concatenar, sino que usamos la variable dentro de ${variable}
Código final:
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo de DOM</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Ejemplo de DOM</h1>
<form action="">
<input type="text" id="input_nombre" class="form-control mb-3" placeholder="Ingresar nombre" />
<button type="button" id="btn_nombre" class="btn btn-primary mb-3"> Presentarse </button>
<div id="respuesta_saludo"></div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>
</html>
js:
const input_nombre = document.querySelector("#input_nombre");
const btn_nombre = document.querySelector("#btn_nombre");
const respuesta_saludo = document.querySelector("#respuesta_saludo");
const mostrarNombre = () => {
//Guardamos el nombre del usuario, a través del atributo value.
let nombre = input_nombre.value;
//respuesta_saludo.innerHTML = "<strong>" + nombre + "</strong>" + " gracias por ingresar tu nombre";
respuesta_saludo.innerHTML = `
<p> Hola, ${nombre} </p>
<p> Gracias por registarte </p>
`
}
//Agregamos el evento click al botón.
btn_nombre.addEventListener("click", mostrarNombre);