undefinedschool / notes-dom

Notas sobre manipulación del DOM

Intro a DOM

👉 Ver todas las notas

Ver slides

Intro

• Document Object Model
• Es un modelo que representa la estructura y los elementos de un sitio web (documento) a través de un árbol
  • nodos relacionados entre sí mediante ejes/aristas/rama
  • raíz: document
• Cuando cargamos un sitio web en el browser, este parsea el contenido del documento HTML, construye un modelo (DOM) a partir de su estructura y contenido y finalmente renderiza el resultado
• Podemos modificarlo programáticamente
  • Seleccionar un elemento por clase o id
  • Recorrer el árbol de nodos
• Cada nodo del árbol es un objeto que representa un elemento del documento HTML
  • Podemos decir entonces que es una representación de los elementos del documento HTML a través de objetos
• En nuestro caso, siempre que hablemos de documento ó document, vamos a estar haciendo referencia al HTML con el que estemos trabajando
• Es una estructura viva: cuando es modificada, la página que vemos en el browser se actuaiza para reflejar los cambios

DOM y JavaScript

• Cuando una página web se carga, el browser crea el DOM del sitio, que es un objeto que representa el documento HTML y sirve como interfaz entre JavaScript y el documento en si mismo
• El browser parsea el documento para determinar qué tiene que renderizar y luego lo renderiza
• Recordemos que el DOM es un árbol de nodos que representan elementos del documento HTML y que estos nodos son a su vez objetos, por lo tanto podemos interactuar con estos objetos usando JavaScript usando todo lo que ya conocemos (propiedades, métodos, etc)

• Para más detalles, ver
  • Browser environment, specs
  • What, exactly, is the DOM?
  • DOM tree

Nodos

• Todo lo que es accesible y modificable a través del DOM es un nodo

  • elementos HTML
  • atributos de un elemento HTML
  • contenido/texto dentro de un elemento

• Podemos utilizar la propiedad .childNodes para obtener una lista de los nodos descendientes de un nodo, indexados

const ol = document.childNodes[1].childNodes[2].childNodes[1];
ol.parentElement;
ol.nextSibling.nextSibling;
ol.previousSibling;

Tipos de nodos

• Document: el nodo raíz, document
• Element: un elemento HTML
• Attr: atributo de un elemento HTML
• Text: contenido de texto de un nodo de tipo Element ó Attr. No tienen descendientes.
• Comment: comentario HTML
• DocumentType: declaración del Doctype
• etc...

nodeType

• Con la propiedad nodeType podemos saber de qué tipo es un nodo
• nodeType retorna un entero que representa el tipo
• Podemos usar nodeName para obtener el nombre

DOM API

• El browser nos provee de una API para interactuar con el DOM usando JavaScript
  • Esta API nos permite
    • inspeccionar los elementos y la estructura del documento
    • modificar la estructura: agregar, modificar o eliminar elementos HTML ó atributos
    • modificar el contenido del documento
    • modificar los estilos (CSS)
    • agregar o eliminar eventos
    • reaccionar a determinados eventos
    • etc...

window

• De los objetos que nos provee esta API, con los que más vamos a interactuar, son document y window

  • document: representa el documento; en nuestro caso el HTML que estamos viendo en el browser
  • window: representa la ventana que contiene al documento que estamos viendo en el browser

• ⭐ Las propiedades y métodos de window pueden ser utilizadas sin referenciar a window explícitamente, porque window (si estamos en el browser) representa al objeto global. Por lo tanto window.document puede escribirse como document directamente

• Window - MDN

Algunas propiedades de window

• document: es una referencia al objeto document que estamos viendo en el browser
• console: es una referencia al objeto que representa la consola de debugging del browser
  • Es el mismo objeto que usamos para hacer el famoso console.log!

Algunos métodos de window

• alert: abre un popup de alerta en el browser

document

Parte del DOM que muestra los nodos html, head y body

Parte del DOM que muestra los nodos hijos de head

Parte del DOM que muestra los nodos hijos de body

Algunas propiedades de document

• title
• URL
• documentElement
• head
• body
• etc...

Ejemplo usando document.body

document.body.style.background = 'red'; // make the background red

setTimeout(() => (document.body.style.background = ''), 3000); // return back

También podemos obtener una colección (HTMLCollection) de nodos de un tipo particular, por ejemplo utilizando las siguientes propiedades de document

• links

• images

• forms

• etc...

• Document - MDN

Algunos métodos de document

Los más utilizados forman parte de la Selectors API: esta API nos provee de métodos que nos permiten obtener de forma fácil aquellos nodos del DOM de tipo Element, que matcheen con un determinado selector (de forma análoga a los selectores de CSS)

• getElementById
• querySelector
• querySelectorAll
• getElementsByTagName
• getElementsByClassName

Recorriendo el DOM

El DOM es un arbol de elementos, con el nodo document en la raíz, que hace referencia al elemento html (tag), que a su vez contiene a sus elementos hijos head y body, etc.

Para cada uno de estos elementos, podemos navegar a través de la estructura del DOM y movernos entre sus diferentes nodos.

Obteniendo el nodo parent

Cada nodo del DOM tiene 1 parent. Para obtenerlo podemos usar

• Node.parentNode
• Node.parentElement (si el parent es un nodo de tipo Element)

Generalmente vamos a utilizar parentNode

Obteniendo los nodos children

todos los descendientes

Para chequear si un nodo tiene descendientes, podemos usar

• <NODE>.hasChildNodes(): retorna un valor booleano

Para obtener una lista de los nodos descendientes, de tipo Element de un nodo, usamos

• <NODE>.children

El DOM también nos provee de la propiedad <NODE>.childNodes. Esta incluye en el resultado, además de los nodos de tipo Element, los nodos de tipo Text y espacios en blanco, por lo que generalmente vamos a preferir usar children

Primer y último descendiente

Para obtener el primer child node de un nodo determinado, de tipo Element, usamos

• <NODE>.firstElementChild

Para obtener el último child node de un nodo determinado, de tipo Element, usamos

• <NODE>.lastElementChild

Obteniendo los nodos hermanos (siblings)

• <NODE>.previousElementSibling
• <NODE>.nextElementSibling

Editando el DOM

La API del DOM nos provee de varios métodos para editar los nodos y modificar el documento.

• document.createElement(): crea un nuevo nodo de tipo Element
• document.createTextNode(): crea un nuevo nodo de tipo Text

Podemos crear nuevos nodos y luego agregarlos a elementos del DOM como children, utilizando

• document.appendChild()

const div = document.createElement('div');
div.appendChild(document.createTextNode('Hello world!'));

Otros métodos para modificar el DOM

• first.removeChild(second): elimina el nodo children second del nodo first
• document.insertBefore(newNode, existingNode): inserta newNode como hermano de existingNode, ubicándolo antes que existingNode en el DOM
• element.appendChild(newChild): modifica el árbol debajo de element, agregándole newChild, después de los demás nodos children
• element.prepend(newChild): modifica el árbol debajo de element, agregándole el nodo newChild, antes que los demás nodos children
• element.replaceChild(newChild, existingChild): modifica el árbol debajo de element, reemplazando existingChild por el nodo newChild
• element.textContent = 'some text': modifica el contenido de un nodo de tipo Text a “some text”
• etc...

Eventos

• Los nodos pueden tener event handlers ligados a ellos. Cuando un evento se dispara, los event handlers se ejecutan
• Podemos reaccionar a eventos generados, por ejemplo, por los usuarios, usando JavaScript y la funcionalidad que nos provee el DOM