DOM en JavaScript: seleccionar, modificar y crear elementos HTML

El DOM es la representación en memoria que el navegador construye a partir del documento HTML.

JavaScript puede utilizar esa representación para leer y modificar la página.

HTML de ejemplo

<main>
    <h1 id="titulo">Club Programador</h1>
    <p class="descripcion">Aprendé JavaScript.</p>
    <ul id="lista"></ul>
</main>

querySelector

querySelector() devuelve el primer elemento que coincide con un selector CSS. Si no encuentra ninguno, devuelve null.

const titulo = document.querySelector("#titulo");

console.log(titulo);

querySelectorAll

querySelectorAll() devuelve todos los elementos coincidentes en una colección que podemos recorrer con forEach().

const parrafos = document.querySelectorAll("p");

parrafos.forEach(parrafo => {
    console.log(parrafo.textContent);
});

textContent

textContent permite leer o reemplazar el texto de un elemento sin interpretar HTML.

const titulo = document.querySelector("#titulo");

titulo.textContent = "Aprender JavaScript";

innerHTML

innerHTML permite leer o reemplazar el contenido HTML interno de un elemento. Es más potente que textContent, pero debemos evitar insertar contenido no confiable.

const contenedor = document.querySelector("#lista");

contenedor.innerHTML = "<li>HTML</li><li>CSS</li>";

innerHTML es útil en algunos escenarios, pero no conviene insertar allí contenido no confiable porque puede introducir problemas de seguridad.

classList

classList permite agregar, quitar o alternar clases CSS sin reemplazar todas las clases existentes del elemento.

const titulo = document.querySelector("#titulo");

titulo.classList.add("destacado");
titulo.classList.remove("oculto");
titulo.classList.toggle("activo");

Atributos

Con setAttribute() y getAttribute() podemos modificar o consultar atributos HTML como href, src o title.

const enlace = document.querySelector("a");

enlace.setAttribute("href", "https://clubprogramador.com/");
console.log(enlace.getAttribute("href"));

Crear elementos

document.createElement() crea un nodo nuevo en memoria. Para que aparezca en la página debemos insertarlo después con métodos como append().

const lista = document.querySelector("#lista");

const item = document.createElement("li");

item.textContent = "JavaScript";

lista.append(item);

Crear varios elementos desde datos

const tecnologias = ["HTML", "CSS", "JavaScript"];
const lista = document.querySelector("#lista");

tecnologias.forEach(tecnologia => {
    const item = document.createElement("li");
    item.textContent = tecnologia;
    lista.append(item);
});

Eliminar elementos

remove() elimina directamente un elemento del DOM.

const elemento = document.querySelector(".mensaje");

elemento.remove();

dataset

dataset permite leer atributos personalizados data-*. Son muy útiles para asociar identificadores u otra información simple a elementos HTML.

<button data-id="25">Eliminar</button>

const boton = document.querySelector("button");

console.log(boton.dataset.id);

Renderizar una lista

const cursos = [
    { id: 1, nombre: "HTML" },
    { id: 2, nombre: "CSS" },
    { id: 3, nombre: "JavaScript" }
];

const lista = document.querySelector("#lista");

function renderizarCursos() {
    lista.innerHTML = "";

    cursos.forEach(curso => {
        const item = document.createElement("li");
        item.textContent = curso.nombre;
        lista.append(item);
    });
}

renderizarCursos();

Separar datos y presentación

Una práctica importante es mantener los datos en arrays u objetos y crear funciones específicas para reflejarlos en el DOM.

Ejercicio

Creá un array de cinco tecnologías y renderizalo como lista. Agregá una clase especial a JavaScript y un botón que vacíe la lista.

Errores comunes

• buscar un selector que no existe;
• confundir querySelector con querySelectorAll;
• usar innerHTML indiscriminadamente;
• duplicar elementos por no limpiar antes de renderizar;
• mezclar toda la lógica de datos con manipulación del DOM.

Seguí aprendiendo JavaScript

← Objetos y JSON en JavaScript: propiedades, métodos y destructuring

Eventos y formularios en JavaScript: click, input, submit y validaciones →