APIs de HTML

En la introducción de esta serie, se lee “Los elementos HTML son los nodos que conforman el Modelo de objetos del documento”. Analizamos el tipo de nodos de elementos. En esta sección, analizaremos las APIs de elementos que permiten realizar consultas en esos nodos.

DOM y AOM

El DOM es una API para acceder a documentos y manipularlos. El DOM es el árbol de todos los nodos del documento. Algunos nodos pueden tener elementos secundarios, otros no. El árbol incluye elementos, junto con sus atributos y nodos de texto.

Árbol de nodos de MLW que muestra elementos y nodos de texto.

Las herramientas del navegador no proporcionan visualizaciones de árbol como la anterior, pero puedes ver los nodos en el inspector de elementos.

DOM/ARIA.

La representación en árbol que se puede inspeccionar en las herramientas para desarrolladores del navegador es el árbol de accesibilidad. El AOM se basa en el DOM. Del mismo modo, el árbol de accesibilidad contiene objetos que representan todos los elementos, atributos y nodos de texto del lenguaje de marcado:

Un ejemplo de AOM.

APIs de elementos HTML

La letra del medio del DOM es "objeto". Al igual que en el ejemplo de objetos person o car de la mayoría de las clases de programación orientadas a objetos, cada nodo del árbol de documentos es un objeto que se puede manipular con JavaScript.

El navegador proporciona varias APIs que proporcionan métodos y eventos compatibles de forma nativa, así como consultas y actualizaciones de propiedades. Los nodos del elemento contienen información sobre todos los atributos configurados en el elemento. Puedes usar interfaces HTML para acceder a información sobre los atributos de un elemento. Por ejemplo, podemos usar HTMLImageElement.alt para obtener los atributos alt de todas las imágenes:

let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
  console.log(imageInstance.alt);
});

Las interfaces HTML proporcionan más que solo acceso a los atributos de un elemento; puedes acceder a mucha más información. Podemos encontrar el elemento HTMLElement.offsetHeight de solo lectura para obtener la altura de cada sección de nuestra página en relación con el diseño.

let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
  console.log(sectionInstance.offsetHeight);
});

Si el usuario cambia la orientación de su dispositivo o el ancho del viewport, cambiará la altura de cada <section>, y las propiedades del DOM se actualizarán automáticamente con ella.

Las APIs de la interfaz HTML no se limitan a acceder a los valores de los atributos. El DOM proporciona estadísticas sobre el estado actual de la IU. Las APIs de HTML pueden acceder a toda esa información. Puedes acceder a la duración de un video, en la que una vista se encuentra en la reproducción actual y si el video (o audio) terminó de reproducirse con HTMLMediaElement.duration, HTMLMediaElement.currentTime y HTMLMediaElement.ended, respectivamente.

Interfaces de elementos disponibles

La mayoría de los elementos HTML que abordamos hasta ahora en esta serie y que aún no se han abordado, excepto algunos elementos de sección, tienen una interfaz del DOM asociada. La interfaz base para todos los elementos se denomina bien Element. El elemento HTMLElement se hereda de Element y todas las interfaces específicas de los elementos HTML lo heredan. Algunas interfaces específicas de elementos se implementan a través de varios elementos similares.

Las interfaces incluyen lo siguiente:

La convención de nomenclatura es "HTML" seguido de un elemento o una agrupación de elementos en mayúsculas mediales, seguido de "Elemento", pero la parte del elemento o la agrupación de elementos no sigue un patrón exacto. No se preocupe. No es necesario memorizarlos. Es importante que sepas que existen para que puedas buscarlos cuando lo necesites.

Si tienes una colección de elementos, también existen interfaces de colecciones. Por ejemplo, el método HTMLCollection.namedItem() muestra el primer elemento de la colección cuyo atributo id o name coincide con el parámetro, o nulo si no coincide ningún elemento.

Más de 30 elementos no tienen una interfaz del DOM asociada diferente de HTMLElement, incluidas <address>, <article>, <section>, <nav>, <header>, <footer>, <aside> y <hgroup>. Muchos elementos que no admiten atributos no obsoletos ni globales tienen interfaces específicas del elemento, como HTMLPElement (el elemento <p>) y HTMLUnknownElement (<😃> o cualquier otro elemento no definido), pero esas interfaces no implementan ninguna propiedad ni método adicional por encima de las propiedades y los métodos heredados de HTMLElement y estos elementos no se enumeran anteriormente.

Métodos y propiedades redundantes de la API

Si una interfaz tiene el mismo método o nombre de propiedad que y la interfaz que hereda, la propiedad o el método de herencia reemplazarán a los heredados. Cuando accedemos a las propiedades alt y offsetHeight anteriores con imageInstance.alt y sectionInstance.offsetHeight, respectivamente, el código no identificaba a qué API se accedía.

Por lo general, como con los dos ejemplos, esto no es un problema. Pero puede ser. Por ejemplo, HTMLCollection.length es de solo lectura, mientras que la propiedad de longitud de la interfaz HTMLOptionsCollection heredada (que solo muestra la propiedad options de <select>) también se puede usar para establecer el tamaño de la colección.

Otras interfaces

Hay interfaces adicionales que permiten manipular las ubicaciones de las ramas de los nodos del DOM. Las interfaces de Node y Window heredan la interfaz EventTarget, que nos proporciona addEventListener() y removeEventListener(). A su vez, las interfaces Element, Document y DocumentFragment (que vimos en los elementos personalizados) heredan de Node.js y la interfaz HTMLElement, hereda de Element.

La interfaz de node

Cada tipo de nodo del DOM se representa con una interfaz basada en Node, que proporciona información y métodos según los elementos que se relacionan con el árbol del DOM. La interfaz Node permite consultar y agregar nodos al árbol de nodos.

La famosa función "Pasear al DOM" de Douglas Crockford usa las propiedades firstChild y nextSibling de Node.

const walk_the_DOM = function walk(node, callback) {
  callback(node);
  node = node.firstChild;
  while (node) {
    walk(node, callback);
    node = node.nextSibling;
  }
};

Usamos los métodos appendChild() y cloneNode() de Node para definir elementos personalizados. La interfaz de Node proporciona muchas propiedades y métodos útiles para consultar y manipular el DOM.

customElements.define('star-rating',
  class extends HTMLElement {
    constructor() {
      super(); // Always call super first in constructor
      const starRating = document.getElementById('star-rating-template').content;
      const shadowRoot = this.attachShadow({
        mode: 'open'
      });
      shadowRoot.appendChild(starRating.cloneNode(true));
    }
  });

El método attachShadow() es un método de la interfaz del elemento. También hay una interfaz shadowRoot para la API de Shadow DOM que se renderiza por separado del árbol del DOM principal de un documento.

Las interfaces Document y HTMLDocument

La interfaz Document se hereda de Node. Representa la página web cargada en el navegador, ya sea que el documento sea HTML, SVG, XML, MathML o algún otro. La interfaz Document también hereda de la interfaz HTMLDocument.

document permite un acceso rápido a tipos de nodos y la capacidad de crear colecciones de tipos de elementos específicos, como document.body y document.styleSheets. HTMLDocument permite acceder a información relevante del documento que no se encuentra en los nodos HTML, como Document.location, Document.lastModified y Document.Cookie.

Hay varias APIs disponibles según las funciones que aparecen en la interfaz del documento, incluidas la API de arrastrar y soltar y la API de FullScreen. Ambos se heredan de Element.

La interfaz de Window

La interfaz Window incluye elementos disponibles a nivel global más allá del DOM que se pueden usar para manipular el DOM. Window proporciona funciones, espacios de nombres, objetos y constructores documentados en JavaScript y referencias de DOM de MDN.

La interfaz Window es la API del objeto que contiene el documento. El objeto window global es la ventana en la que se ejecuta la secuencia de comandos. Cada pestaña del navegador contiene su propio objeto Window. La interfaz Window puede consultar el contenido de la pestaña, así como la ventana y el dispositivo generales. Por ejemplo, se puede usar el método resizeTo() para cambiar el tamaño de la ventana del navegador; la propiedad devicePixelRatio proporciona acceso a los píxeles de visualización del dispositivo. Cuando se accede a información sobre la pestaña en el que se encuentra el contenido en lugar del árbol del DOM que muestra la pestaña, es probable que la ventana sea la interfaz que buscas.

Hay varias APIs disponibles según las funciones que se muestran a través de la interfaz Window, incluidas las APIs de Web Workers y IndexedDB.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las APIs de HTML.

¿Qué significa la O en DOM?

Orientado.
Vuelve a intentarlo.
Objeto.
Correcto.
Exterior.
Vuelve a intentarlo.

¿Qué interfaz puede ayudarte a encontrar información sobre la pestaña en la que se encuentra el contenido?

Ventana
Correcto.
Documento
Vuelve a intentarlo.
Nodo
Vuelve a intentarlo.