3.1 – EL DOM (DOCUMENT OBJECT MODEL)

Autor:

ciberkaos

– Tema:

DOM, Javascript

– Publicado:

febrero 9, 2026

– Actualizado:

Contenido

Métodos y atributos principales de un elemento DOM

1. ¿Qué es el DOM?

El DOM (Document Object Model) es la representación en forma de árbol de objetos que el navegador crea a partir del HTML.

El navegador no “lee HTML y ya”.
Lo convierte en objetos manipulables con JavaScript.

Ejemplo simple:

HTML:

<body>
  <h1>Hola</h1>
  <p>Texto</p>
</body>

El navegador lo convierte mentalmente en:

document
 └── body
     ├── h1
     │   └── "Hola"
     └── p
         └── "Texto"

Cada etiqueta es un nodo (node).
Cada nodo es un objeto JavaScript.

Eso significa que puedes:

Leerlo
Modificarlo
Crear nuevos nodos
Borrarlos
Moverlos

El DOM es, literalmente, la memoria viva del HTML.

2. El objeto `document`

El punto de entrada al DOM es:

document

Es el objeto raíz del árbol. Desde aquí puedes acceder a todo el HTML.

Ejemplo:

console.log(document.title);
console.log(document.body);

3. Seleccionar elementos del DOM

Antes de modificar algo, hay que localizar el nodo.

3.1 getElementById (el clásico)

HTML:

document.querySelector("#titulo");      // por id
document.querySelector(".clase");       // por clase
document.querySelector("h1");           // por etiqueta
document.querySelector("div p");        // descendiente

JS:

const titulo = document.getElementById("titulo");
console.log(titulo);

Devuelve un solo elemento.

3.2 querySelector (el más versátil)

Permite usar selectores CSS.

document.querySelector("#titulo");      // por id
document.querySelector(".clase");       // por clase
document.querySelector("h1");           // por etiqueta
document.querySelector("div p");        // descendiente

Devuelve el primer elemento que coincide.

3.3 querySelectorAll (varios elementos)

const items = document.querySelectorAll("li");
console.log(items);

Devuelve una NodeList (colección).

Se recorre así:

items.forEach(item => {
  console.log(item.textContent);
});

4. Leer y modificar contenido

4.1 textContent (forma segura)

const titulo = document.getElementById("titulo");
titulo.textContent = "Nuevo título";

Nunca ejecuta HTML. Solo texto.

4.2 innerHTML (usar con cuidado)

titulo.innerHTML = "<b>Hola</b>";

Inserta HTML real.
Peligroso si el contenido viene del usuario (XSS).

Regla:
Si solo es texto → textContent.

5. Manipular atributos

Leer atributo

const img = document.querySelector("img");
console.log(img.getAttribute("src"));

Modificar atributo

img.setAttribute("src", "nueva.jpg");

6. Manipular clases CSS

Añadir clase

elemento.classList.add("activo");

Quitar clase

elemento.classList.remove("activo");

Alternar

elemento.classList.toggle("activo");

7. Crear elementos (crear nodos)

Aquí empieza la verdadera manipulación del DOM.

Crear un elemento

const p = document.createElement("p");
p.textContent = "Soy nuevo en el DOM";

Todavía no está en la página.

8. Insertar elementos en el DOM

append (al final)

document.body.append(p);

prepend (al principio)

document.body.prepend(p);

append en otro nodo

const contenedor = document.getElementById("contenedor");
contenedor.append(p);

9. Eliminar elementos

p.remove();

10. Ejercicio guiado — Pintar lista desde un array

HTML:

<ulid="lista"></ul>

JS:

const datos = ["Manzana", "Pera", "Plátano", "Kiwi"];

const lista = document.getElementById("lista");

datos.forEach(fruta => {
  const li = document.createElement("li");
  li.textContent = fruta;
  lista.append(li);
});

Resultado: el DOM se construye dinámicamente.

11. Cómo piensa un programador al usar el DOM

El flujo mental correcto es:

Selecciono el nodo contenedor
Creo elementos nuevos
Les pongo contenido
Los inserto en el DOM

Es exactamente el mismo pensamiento que usarías manipulando objetos en Java.

12. Errores comunes

❌ Usar innerHTML para todo

Malo para seguridad y mantenimiento.

❌ Crear elementos sin insertarlos

Si no haces append/prepend → no aparecen.

❌ Duplicar IDs

Un ID debe ser único.

❌ Mezclar lógica y HTML sin orden

Primero datos, luego render.

13. Mini-reto

Crea una tabla HTML y, desde JavaScript, genera 5 filas con:

Nombre
Edad
Ciudad

Todo debe construirse con createElement.

Nada de escribir filas en el HTML.

14. Lo que debes haber aprendido

Al terminar este bloque debes poder:

Entender qué es el DOM
Seleccionar elementos
Modificar texto
Manipular atributos y clases
Crear elementos dinámicamente
Insertar y eliminar nodos
Construir HTML desde datos

Si esto está claro, en el siguiente bloque el cerebro da el salto natural:

JSON → JavaScript → DOM

Y ahí empieza el verdadero front conectado a tu backend JEE.

El DOM no es difícil. Solo es un árbol.
Y los árboles, curiosamente, se doman rama por rama. 🌿

puedes hacerme una tabla con los metodos o atributos que puedo sacar de cada elemento.

El DOM es como una criatura mitológica hecha de objetos. Cada elemento HTML hereda poderes de varias “clases ancestrales”: Node → Element → HTMLElement. Eso significa que casi todos los elementos comparten un mismo arsenal de propiedades y métodos. No memorizas etiquetas… entiendes la especie.

Aquí tienes la tabla de referencia esencial que usarás constantemente.

Métodos y atributos principales de un elemento DOM

Tipo	Nombre	Qué hace	Ejemplo
📦 Propiedad	`id`	Obtiene o cambia el id del elemento	`el.id = "nuevo"`
📦 Propiedad	`className`	Clases CSS como string	`el.className = "rojo grande"`
📦 Propiedad	`classList`	Manejo avanzado de clases	`el.classList.add("activo")`
📦 Propiedad	`textContent`	Texto interno (seguro)	`el.textContent = "Hola"`
📦 Propiedad	`innerHTML`	HTML interno	`el.innerHTML = "<b>Hola</b>"`
📦 Propiedad	`children`	Elementos hijos	`el.children.length`
📦 Propiedad	`parentElement`	Nodo padre	`el.parentElement`
📦 Propiedad	`style`	Estilos inline	`el.style.color = "red"`
📦 Propiedad	`value`	Valor (inputs, textarea)	`input.value`
📦 Propiedad	`checked`	Estado checkbox/radio	`check.checked`
📦 Propiedad	`src`	Ruta de imagen/video	`img.src`
📦 Propiedad	`href`	Enlaces	`a.href`
📦 Propiedad	`disabled`	Habilitar/deshabilitar	`btn.disabled = true`
📦 Propiedad	`dataset`	Acceso a `data-*`	`el.dataset.id`

Métodos de atributos

Método	Qué hace	Ejemplo
`getAttribute(name)`	Lee atributo	`el.getAttribute("src")`
`setAttribute(name, value)`	Cambia atributo	`el.setAttribute("alt","img")`
`removeAttribute(name)`	Elimina atributo	`el.removeAttribute("disabled")`
`hasAttribute(name)`	Comprueba atributo	`el.hasAttribute("id")`

Métodos de clases CSS

Método	Qué hace	Ejemplo
`classList.add()`	Añade clase	`el.classList.add("rojo")`
`classList.remove()`	Quita clase	`el.classList.remove("rojo")`
`classList.toggle()`	Alterna clase	`el.classList.toggle("activo")`
`classList.contains()`	Comprueba clase	`el.classList.contains("rojo")`

Métodos de creación y manipulación

Método	Qué hace	Ejemplo
`createElement(tag)`	Crea nodo	`document.createElement("div")`
`append()`	Inserta al final	`padre.append(hijo)`
`prepend()`	Inserta al inicio	`padre.prepend(hijo)`
`remove()`	Elimina nodo	`el.remove()`
`cloneNode(true)`	Clona nodo	`el.cloneNode(true)`

Métodos de búsqueda dentro de un elemento

Método	Qué hace	Ejemplo
`querySelector()`	Primer descendiente	`el.querySelector("p")`
`querySelectorAll()`	Todos los descendientes	`el.querySelectorAll("li")`
`getElementsByClassName()`	Por clase	`el.getElementsByClassName("x")`
`getElementsByTagName()`	Por etiqueta	`el.getElementsByTagName("div")`

Eventos (interacción)

Método	Qué hace	Ejemplo
`addEventListener()`	Escucha evento	`btn.addEventListener("click", fn)`
`removeEventListener()`	Quita evento	`btn.removeEventListener("click", fn)`

Eventos comunes:

click
input
change
submit
keydown
mouseover

Navegación por el árbol DOM

Propiedad	Qué hace
`parentElement`	Padre
`children`	Hijos elementos
`firstElementChild`	Primer hijo
`lastElementChild`	Último hijo
`nextElementSibling`	Hermano siguiente
`previousElementSibling`	Hermano anterior

3.1 – EL DOM (DOCUMENT OBJECT MODEL)

1. ¿Qué es el DOM?

2. El objeto document

3. Seleccionar elementos del DOM

3.1 getElementById (el clásico)

3.2 querySelector (el más versátil)

3.3 querySelectorAll (varios elementos)

4. Leer y modificar contenido

4.1 textContent (forma segura)

4.2 innerHTML (usar con cuidado)

5. Manipular atributos

Leer atributo

Modificar atributo

6. Manipular clases CSS

Añadir clase

Quitar clase

Alternar

7. Crear elementos (crear nodos)

Crear un elemento

8. Insertar elementos en el DOM

append (al final)

prepend (al principio)

append en otro nodo

9. Eliminar elementos

10. Ejercicio guiado — Pintar lista desde un array

11. Cómo piensa un programador al usar el DOM

12. Errores comunes

❌ Usar innerHTML para todo

❌ Crear elementos sin insertarlos

❌ Duplicar IDs

❌ Mezclar lógica y HTML sin orden

13. Mini-reto

14. Lo que debes haber aprendido

Métodos y atributos principales de un elemento DOM

Métodos de atributos

Métodos de clases CSS

Métodos de creación y manipulación

Métodos de búsqueda dentro de un elemento

Eventos (interacción)

Navegación por el árbol DOM

Lecciones:

Más entradas

Proyecto web en PHP orientado a objetos: tienda de cuencos tibetanos

Proyecto web en PHP: tienda de cuencos tibetanos

Proyecto Mundo Oficios: diseño y desarrollo de una tienda online de muñecos por profesiones

1.1 – Presentación del curso de programación con Java

2. El objeto `document`