materials

Document Object Model (DOM)

• Document Object Model (DOM)
  • Introducción
  • Acceso a los nodos
  • Acceso a nodos a partir de otros
    • Propiedades de un nodo
  • Manipular el árbol DOM
    • Añadir nuevos nodos con innerHTML
  • Atributos de los nodos
    • Estilos de los nodos
    • Atributos de clase
    • Atributos de datos
  • Reaccionar a las acciones del usuario

Introducción

La mayoría de las veces que programamos con Javascript es para que se ejecute en una página web mostrada por el navegador. En este contexto tenemos acceso a ciertos objetos que nos permiten interactuar con la página (DOM) y con el navegador (Browser Object Model, BOM).

El DOM es una estructura en árbol que representa todos los elementos HTML de la página y sus atributos. Todo lo que contiene la página se representa como nodos del árbol y mediante el DOM podemos acceder a cada nodo, modificarlo, eliminarlo o añadir nuevos nodos de forma que cambiamos dinámicamente la página mostrada al usuario.

La raíz del árbol DOM es document y de este nodo cuelgan el resto de elementos HTML. Cada uno constituye su propio nodo y tiene subnodos con sus atributos, estilos y elementos HTML que contiene.

Por ejemplo, la página HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Página simple</title>
</head>
<body>
  <p>Esta página es <strong>muy simple</strong></p>
</body>
</html>

se convierte en el siguiente árbol DOM:

Cada etiqueta HTML suele originar 2 nodos:

• Element: correspondiente a la etiqueta
• Text: correspondiente a su contenido (lo que hay entre la etiqueta y su par de cierre)

Cada nodo es un objeto con sus propiedades y métodos.

El ejemplo anterior está simplificado porque sólo aparecen los nodos de tipo elemento pero en realidad también generan nodos los saltos de línea, tabuladores, espacios, comentarios, etc. En el siguiente ejemplo podemos ver TODOS los nodos que realmente se generan. La página:

<!DOCTYPE html>
<html>
<head>
  <title>My Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>
    Paragraph
  </p>
</body>
</html>

se convierte en el siguiente árbol DOM:

Acceso a los nodos

Los principales métodos para acceder a los diferentes nodos son:

• .getElementById(id): devuelve el nodo con la id pasada. Ej.:

  let nodo = document.getElementById('main');   // nodo contendrá el nodo cuya id es _main_
  

• .getElementsByClassName(clase): devuelve una colección (similar a un array) con todos los nodos de la clase indicada. Ej.:

  let nodos = document.getElementsByClassName('error');   // nodos contendrá todos los nodos cuya clase es _error_
  

  NOTA: las colecciones son similares a arrays (se accede a sus elementos con [indice]) pero no se les pueden aplicar sus métodos filter, map, … a menos que se conviertan a arrays con Array.from()

• .getElementsByTagName(etiqueta): devuelve una colección con todos los nodos de la etiqueta HTML indicada. Ej.:

  let nodos = document.getElementsByTagName('p');   // nodos contendrá todos los nodos de tipo  _<p>_
  

• .getElementsByName(name): devuelve una colección con todos los nodos que contengan un atributo name con el valor indicado. Ej.:

  let radiosSexo = document.getElementsByName('sexo');   // radiosSexo contendrá todos los nodos con ese atributo (seguramente radiobuttons con name="sexo")
  

• .querySelector(selector): devuelve el primer nodo seleccionado por el selector CSS indicado. Ej.:

  let nodo = document.querySelector('p.error');   // nodo contendrá el primer párrafo de clase _error_
  

• .querySelectorAll(selector): devuelve una colección con todos los nodos seleccionados por el selector CSS indicado. Ej.:

  let nodos = document.querySelectorAll('p.error');   // nodos contendrá todos los párrafos de clase _error_
  

  NOTA: al aplicar estos métodos sobre document se seleccionará sobre la página pero podrían también aplicarse a cualquier nodo y en ese caso la búsqueda se realizaría sólo entre los descendientes de dicho nodo.

Una diferencia importante entre los getElementsBy... y los querySelector... es que los primeros devuelven una colección en vivo (si se añaden o eliminan nodos que cumplan la condición la colección se actualiza automáticamente) mientras que los segundos devuelven una colección estática (no se actualiza aunque se añadan o eliminen nodos). Los querySelector... tienen el método forEach para recorrer la colección mientras que los getElementsBy..., aunque todos puedes recorrerse con un for...of.

También tenemos ‘atajos’ para obtener algunos elementos comunes:

• document.documentElement: devuelve el nodo <html>
• document.head: devuelve el nodo <head>
• document.body: devuelve el nodo <body>
• document.title: devuelve el texto del nodo <title>
• document.links: devuelve una colección con todos los hiperenlaces del documento
• document.forms: devuelve una colección con todos los formularios del documento
• document.images: devuelve una colección con todas las imágenes del documento
• document.scripts: devuelve una colección con todos los scripts del documento

EJERCICIO: Para hacer los ejercicios de este tema descárgate esta página de ejemplo y ábrela en tu navegador. Obtén por consola, al menos de 2 formas diferentes:

• El elemento con id ‘input2’
• La colección de párrafos
• Lo mismo pero sólo de los párrafos que hay dentro del div ‘lipsum’
• El formulario (ojo, no la colección con el formulario sino sólo el formulario)
• Todos los inputs
• Sólo los inputs con nombre ‘sexo’
• Los items de lista de la clase ‘important’ (sólo los LI)

Acceso a nodos a partir de otros

En muchas ocasiones queremos acceder a cierto nodo a partir de uno dado. Para ello tenemos los siguientes métodos que se aplican sobre un elemento del árbol DOM:

• elemento.parentElement: devuelve el elemento padre de elemento
• elemento.children: devuelve la colección con todos los elementos hijo de elemento (sólo elementos HTML, no comentarios ni nodos de tipo texto)
• elemento.childNodes: devuelve la colección con todos los hijos de elemento, incluyendo comentarios y nodos de tipo texto por lo que no suele utilizarse
• elemento.firstElementChild: devuelve el elemento HTML que es el primer hijo de elemento
• elemento.firstChild: devuelve el nodo que es el primer hijo de elemento (incluyendo nodos de tipo texto o comentarios)
• elemento.lastElementChild, elemento.lastChild: igual pero con el último hijo
• elemento.nextElementSibling: devuelve el elemento HTML que es el siguiente hermano de elemento
• elemento.nextSibling: devuelve el nodo que es el siguiente hermano de elemento (incluyendo nodos de tipo texto o comentarios)
• elemento.previousElementSibling, elemento.previousSibling: igual pero con el hermano anterior
• elemento.hasChildNodes(): indica si elemento tiene o no nodos hijos
• elemento.childElementCount: devuelve el nº de nodos hijo de elemento
• elemento.closest(selector): devuelve el ancestro más cercano que coincide con el selector (empezando por el propio elemento). Por ejemplo si elemento es un <td> de una tabla entonces elemento.closest('table') devolverá la tabla a la que pertenece
• elemento.matches(selector): devuelve true si elemento cumple el selector CSS pasado o false si no. Por ejemplo, si elemento es <li class="important" data-id="7">:

  elemento.matches('li');                  // true
  elemento.matches('.important');          // true
  elemento.matches('li.important[data-id]'); // true
  elemento.matches('ul > li');             // true si su padre es un UL
  elemento.matches('.done');               // false
  

IMPORTANTE: a menos que me interesen comentarios, saltos de línea, etc siempre debo usar los métodos que sólo devuelven elementos HTML, no todos los nodos.

EJERCICIO: Siguiendo con la página de ejemplo obtén desde la consola, al menos de 2 formas diferentes:

• El primer párrafo que hay dentro del div ‘lipsum’
• El segundo párrafo de ‘lipsum’
• El último item de la lista
• La label de ‘Escoge sexo’

Propiedades de un nodo

Las principales propiedades de un nodo son:

• elemento.innerHTML: todo lo que hay entre la etiqueta que abre elemento y la que lo cierra, incluyendo otras etiquetas HTML. Por ejemplo si elemento es el nodo <p>Esta página es <strong>muy simple</strong></p>

  let contenido = elemento.innerHTML;   // contenido='Esta página es <strong>muy simple</strong>'
  

• elemento.textContent: todo lo que hay entre la etiqueta que abre elemento y la que lo cierra, pero ignorando otras etiquetas HTML. Siguiendo con el ejemplo anterior:

  let contenido = elemento.textContent;   // contenido='Esta página es muy simple'
  

• elemento.value: devuelve la propiedad ‘value’ de un <input> (en el caso de un <input> de tipo text devuelve lo que hay escrito en él). Como los <inputs> no tienen etiqueta de cierre (</input>) no podemos usar .innerHTML ni .textContent. Por ejemplo si elem1 es el nodo <input name="nombre"> y elem2 es el nodo <input type="radio" value="H">Hombre

  let cont1 = elem1.value;   // cont1 valdría lo que haya escrito en el <input> en ese momento
  let cont2 = elem2.value;   // cont2="H"
  

Otras propiedades:

• elemento.focus(): da el foco a elemento (para inputs, etc). Para quitarle el foco elemento.blur()
• elemento.clientHeight / elemento.clientWidth: devuelve el alto / ancho visible del elemento (incluye el padding pero no el border ni el margin)
• elemento.offsetHeight / elemento.offsetWidth: devuelve el alto / ancho total del elemento (incluye padding y border pero no el margin)
• elemento.clientLeft / elemento.clientTop: devuelve el grosor del borde izquierdo / superior de elemento
• elemento.offsetLeft / elemento.offsetTop: devuelve la posición del elemento a la izquierda / abajo respecto a su offsetParent (el primer ancestro que tenga posición relativa, absoluta o fija)

EJERCICIO: Obtén desde la consola, al menos de 2 formas:

• El innerHTML de la etiqueta de ‘Escoge sexo’
• El textContent de esa etiqueta
• El valor del primer input de sexo
• El valor del sexo que esté seleccionado (difícil, búscalo por Internet)

Manipular el árbol DOM

Vamos a ver qué métodos nos permiten cambiar el árbol DOM, y por tanto modificar la página:

• document.createElement('etiqueta'): crea un nuevo elemento HTML con la etiqueta indicada, pero aún no se añade a la página. Ej.:

  let nuevoLi = document.createElement('li');
  

• elemento.append(elementos o texto): añade al DOM los parámetros pasados como últimos hijos de elemento. Se le puede pasar tanto nodos DOM como cadenas de texto (para la que creará su nodo de texto correspondiente) y permite pasar varios parámetros para crear varios nodos. Ej.:

  let nuevoStrong = document.createElement('strong');   // crea un nuevo nodo <strong>
  nuevoStrong.append('nuevo');     // añade el texto pasado al elemento creado
  nuevoLi.append('Elemento de lista ', nuevoStrong);   // añade el texto y el nodo <strong> al elemento <li> creado: <li>Elemento de lista <strong>nuevo</strong></li>
  let miPrimeraLista = document.getElementsByTagName('ul')[0];  // selecciona el 1º UL de la página
  miPrimeraLista.append(nuevoLi);    // añade LI como último hijo de UL, es decir al final de la lista
  

• elemento.prepend(elementos o texto): como el anterior pero en lugar de añadirlos como últimos hijos los añade antes del primer hijo.

  const primerLi = document.createElement('li');
  primerLi.append('Primer elemento de lista'); 
  let miPrimeraLista = document.getElementsByTagName('ul')[0]; 
  miPrimeraLista.prepend(primerLi);    // añade LI como primer hijo de UL, es decir al principio de la lista
  

• elemento.after(elementos o texto): como append pero en lugar de añadirlos como últimos hijos los añade como los siguientes hermanos de elemento.

  const otroLi = document.createElement('li');
  otroLi.append('Segundo elemento de lista'); 
  primerLi.after(otroLi);
  

• elemento.before(elementos o texto): como el anterior pero los añade como los anteriores hermanos de elemento.
• elemento.remove(): borra el nodo elemento del documento.
• elemento.replaceWith(nuevoNodo): reemplaza el nodo elemento con el nuevoNodo pasado

  let primerElementoDeLista = document.getElementsByTagName('ul')[0].firstElementChild;  // selecciona el 1º LI del primer UL
  primerElementoDeLista.replaceWith(nuevoLi);    // reemplaza el 1º elemento de la lista con nuevoLi
  

• elementoAClonar.cloneNode(boolean): devuelve un clon de elementoAClonar o de elementoAClonar con todos sus descendientes según le pasemos como parámetro false o true. Luego podremos insertarlo donde queramos.
• elemento.replaceChildren(elementos o texto): elimina todos los hijos de elemento y los sustituye por los parámetros pasados (como append, admite nodos y cadenas de texto y varios parámetros). Ej.: ```javascript const miLista = document.getElementById(‘lista-libros’);

miLista.replaceChildren(); // vacía la lista (equivale a miLista.innerHTML = ‘’ o miLista.textContent = ‘’)

const li1 = document.createElement(‘li’); li1.textContent = ‘El Quijote’; const li2 = document.createElement(‘li’); li2.textContent = ‘La Regenta’; miLista.replaceChildren(li1, li2); // la lista ahora sólo contiene estos 2 elementos

Otros métodos menos usados son:
* `elemento.appendChild(nuevoNodo)`: añade _nuevoNodo_ como último hijo de _elemento_ y lo devuelve. Se diferencia con _append_ en que sólo permite un parámetro y éste debe ser un nodo, no puede ser texto. Por eso no suele usarse.
* `document.createTextNode('texto')`: crea un nuevo nodo de texto con el texto indicado, que luego tendremos que añadir a un nodo HTML. Normalmente no se usa porque con _append_ y el resto de métodos anteriores se hace más fácilmente. Por ejemplo, el equivalente a `nuevoLi.append('Nuevo elemento de lista')` que hicimos antes sería:
```javascript
let textoLi = document.createTextNode('Nuevo elemento de lista');
nuevoLi.appendChild(textoLi);     // añade el texto creado al elemento LI creado

• elemento.insertBefore(nuevoNodo, nodo): añade nuevoNodo como hijo de elemento antes del hijo nodo. Ej.:

  let miPrimeraLista = document.getElementsByTagName('ul')[0];                // selecciona el 1º UL de la página
  let primerElementoDeLista = miPrimeraLista.getElementsByTagName('li')[0];   // selecciona el 1º LI de miPrimeraLista
  miPrimeraLista.insertBefore(nuevoLi, primerElementoDeLista);                // añade LI al principio de la lista
  

• elemento.removeChild(nodo): borra nodo como hijo de elemento y por tanto se elimina de la página. Ej.:

  let miPrimeraLista = document.getElementsByTagName('ul')[0];  // selecciona el 1º UL de la página
  let primerElementoDeLista = miPrimeraLista.getElementsByTagName('li')[0];  // selecciona el 1º LI de miPrimeraLista
  miPrimeraLista.removeChild(primerElementoDeLista);    // borra el primer elemento de la lista
  // Lo mismo usando remove seria:
  primerElementoDeLista.remove();
  

• elemento.replaceChild(nuevoNodo, viejoNodo): reemplaza viejoNodo con nuevoNodo como hijo de elemento. Ej.:

  let miPrimeraLista = document.getElementsByTagName('ul')[0];  // selecciona el 1º UL de la página
  let primerElementoDeLista = miPrimeraLista.getElementsByTagName('li')[0];  // selecciona el 1º LI de miPrimeraLista
  miPrimeraLista.replaceChild(nuevoLi, primerElementoDeLista);    // reemplaza el 1º elemento de la lista con nuevoLi
  

OJO: Si añado con el método append o appendChild un nodo que estaba en otro sitio se elimina de donde estaba para añadirse a su nueva posición. Si quiero que esté en los 2 sitios deberé clonar el nodo y luego añadir el clon y no el nodo original.

Añadir nuevos nodos con innerHTML

Supongamos que tenemos un DIV cuya id es myDiv al que queremos añadir al final un párrafo con un texto en negrita. El código podría ser:

const miDiv = document.getElementById('myDiv');
const nuevoParrafo = document.createElement('p');
const textoNegrita = document.createElement('strong');
textoNegrita.textContent = 'con texto en negrita';
nuevoParrafo.append('Último párrafo ', textoNegrita);
miDiv.append(nuevoParrafo);

Si utilizamos la propiedad innerHTML el código a usar es mucho más simple:

let miDiv = document.getElementById('myDiv');
miDiv.innerHTML += '<p>Último párrafo <strong>con texto en negrita</strong></p>';

Pero esta forma de hacerlo (miDiv.innerHTML+='<p>...';) aunque es válida no es muy eficiente ya que obliga al navegador a volver a renderizar TODO el contenido de miDIV, y si algún párrafo tuviera algún escuchador de eventos se eliminaría.

La forma ideal sería algo intermedio: creamos el nuevo nodo con createElement y luego le asignamos su contenido con innerHTML:

let miDiv = document.getElementById('myDiv');
let nuevoParrafo = document.createElement('p');
nuevoParrafo.innerHTML = 'Último párrafo <strong>con texto en negrita</strong>';
miDiv.append(nuevoParrafo);

También podemos usar insertAdjacentHTML para añadir un nuevo nodo sin tener que crear el nodo y luego añadirlo y sin que se renderice de nuevo lo que ya estaba. Siguiendo con el ejemplo anterior:

let miDiv = document.getElementById('myDiv');
miDiv.insertAdjacentHTML('beforeend', '<p>Último párrafo <strong>con texto en negrita</strong></p>');

El primer parámetro indica dónde queremos añadir el nuevo nodo:

• beforebegin: antes del nodo miDiv
• afterbegin: como primer hijo de miDiv
• beforeend: como último hijo de miDiv
• afterend: después del nodo miDiv

NOTA IMPORTANTE sobre seguridad: Cuando se inserte texto HTML en una página usando innerHTML o insertAdjacentHTML() debe tener cuidado de no usar cadenas de texto que no contengan las secuencias de escape pertinentes según sea el caso para evitar ataques de inyección de código. Si queremos insertar texto plano (por ejemplo, lo que escriba un usuario en un formulario) debemos escapar los caracteres especiales de HTML como <, >, &, ", ' y /. Por ejemplo, si el usuario escribe <img src="x" onerror="alert('Hola')"> y lo insertamos en la página sin escapar los caracteres especiales, se ejecutará el código JavaScript y se mostrará la alerta. Para evitar esto, podemos usar textContent o insertAdjacentText() para insertar el texto plano sin interpretar el HTML.

Podemos ver más ejemplos de creación y eliminación de nodos en W3Schools.

EJERCICIO: Añade a la página:

• Un nuevo párrafo al final del DIV ‘lipsum’ con el texto “Nuevo párrafo añadido por javascript” (fíjate que una palabra está en negrita)
• Un nuevo elemento al formulario tras el ‘Dato 1’ con la etiqueta ‘Dato 1 bis’ y el INPUT con id ‘input1bis’ que al cargar la página tendrá escrito “Hola”

Atributos de los nodos

Podemos ver y modificar los valores de los atributos de cada elemento HTML y también añadir o eliminar atributos:

• elemento.attributes: devuelve una colección con todos los atributos de elemento
• elemento.hasAttribute('nombreAtributo'): indica si elemento tiene o no definido el atributo nombreAtributo
• elemento.getAttribute('nombreAtributo'): devuelve el valor del atributo nombreAtributo de elemento. Para muchos elementos este valor puede obtenerse directamente con elemento.atributo.
• elemento.setAttribute('nombreAtributo', 'valor'): establece valor como nuevo valor del atributo nombreAtributo de elemento. También puede cambiarse el valor directamente con elemento.atributo=valor.
• elemento.removeAttribute('nombreAtributo'): elimina el atributo nombreAtributo de elemento

Los elementos tienen propiedades para algunos atributos comunes como id, title o className (para el atributo class) a las que se puede acceder y cambiar su valor directamente. Ejemplos:

elemento.id = 'primera-lista';
// es equivalente a hacer:
elemento.setAttribute('id', 'primera-lista');

Estilos de los nodos

Los estilos están accesibles como el atributo style. Cualquier estilo es una propiedad de dicho atributo pero con la sintaxis camelCase en vez de kebab-case. Por ejemplo para cambiar el color de fondo (propiedad background-color) y ponerle el color rojo al elemento miPrimeraLista haremos:

miPrimeraLista.style.backgroundColor = 'red';

De todas formas normalmente NO CAMBIAREMOS ESTILOS a los elementos sino que les pondremos o quitaremos clases que harán que se le apliquen o no los estilos definidos para ellas en el CSS.

Atributos de clase

Ya sabemos que el aspecto de la página debe configurarse en el CSS por lo que no debemos aplicar atributos style al HTML. En lugar de ello les ponemos clases a los elementos que harán que se les aplique el estilo definido para dicha clase.

Como es algo muy común en lugar de utilizar las instrucciones de elemento.setAttribute('class', 'destacado') o directamente elemento.className='destacado' podemos usar la propiedad classList que devuelve la colección de todas las clases que tiene el elemento. Por ejemplo si elemento es <p class="destacado direccion">...:

let clases=elemento.classList;   // clases=['destacado', 'direccion'], OJO es una colección, no un Array

Además dispone de los métodos:

• .add(clase): añade al elemento la clase pasada (si ya la tiene no hace nada). Ej.:

  elemento.classList.add('primero');   // ahora elemento será <p class="destacado direccion primero">...
  

• .remove(clase): elimina del elemento la clase pasada (si no la tiene no hace nada). Ej.:

  elemento.classList.remove('direccion');   // ahora elemento será <p class="destacado primero">...
  

• .contains(clase): dice si el elemento tiene o no la clase pasada. Ej.:

  elemento.classList.contains('direccion');   // devuelve true
  

• .replace(oldClase, newClase): reemplaza del elemento una clase existente por una nueva. Ej.:

  elemento.classList.replace('primero', 'ultimo');   // ahora elemento será <p class="ultimo direccion">...
  

Atributos de datos

HTML5 permite agregar atributos personalizados no visuales a las etiquetas utilizando data-*. Estos atributos pueden ser accesibles a través de JavaScript usando dataset.

<article
    id="electriccars"
    data-columns="3"
    data-index-number="12314"
    data-parent="cars">
    ...
</article>

let article = document.getElementById('electriccars');
console.log(article.dataset.columns); // "3"
console.log(article.dataset.indexNumber); // "12314"

Fuente: Curso DWEC de José Castillo

Reaccionar a las acciones del usuario

Para poder hacer cosas cuando el usuario interactúa con la página (pulsa un botón, envía un formulario, …) tenemos que escuchar los eventos que se producen. Los veremos en detalle en el tema de eventos pero de momento nos basta con saber que con el método addEventListener sobre un elemento indicamos qué función queremos que se ejecute cuando se produzca un evento sobre dicho elemento. Recibe 2 parámetros:

• el nombre del evento ('click', 'submit', …)
• la función a ejecutar cuando se produzca, que recibe como parámetro un objeto con información del evento (normalmente lo llamaremos event)

const boton = document.getElementById('borrar');
boton.addEventListener('click', (event) => {
  // este código se ejecuta cada vez que se pulse el botón
  boton.closest('li').remove();
});

En el caso de un formulario no escucharemos el click del botón de enviar sino el evento submit del formulario, que se produce tanto al pulsar el botón como al pulsar Enter en un campo. Además, por defecto el navegador envía el formulario y recarga la página, así que lo primero que haremos será evitarlo con event.preventDefault():

const form = document.getElementById('form-libro');
form.addEventListener('submit', (event) => {
  event.preventDefault();      // evitamos que se recargue la página
  // Cojemos los datos del formulario
  const titulo = document.getElementById('titulo').value;
  // ... y los usamos
});

OJO: un escuchador se pone a un elemento concreto. Si ese elemento se borra o se vuelve a crear (por ejemplo, con innerHTML += sobre su padre) el escuchador desaparece.

This site is open source. Improve this page.