APIs de HTML

En la introducción de esta serie, dice: "Los elementos HTML son los nodos que conforman el Modelo de objetos del documento". Hablamos del tipo de nodos de los elementos. En esta sección, analizamos las APIs de elementos que permiten consultar esos nodos.

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, mientras que 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.

El DOM/ARIA.

La representación de árbol que se puede inspeccionar en las herramientas para desarrolladores de navegadores es el árbol de accesibilidad. El AOM se basa del DOM; De manera similar, el árbol de accesibilidad contiene objetos que representan todos los elementos de marcado, los atributos y el texto nodos:

Un ejemplo de AOM.

API de elementos HTML

La letra central del DOM es "object". Como en el ejemplo de los objetos person o car de la introducción a la programación orientada a objetos cada nodo del árbol del documento es un objeto que se puede manipular con JavaScript.

El navegador proporciona muchas APIs que proporcionan métodos, eventos y consultas y actualizaciones de propiedades compatibles de forma nativa. Los nodos de los elementos contienen información sobre todos los atributos establecidos en el elemento. Puedes usar interfaces HTML para acceder información sobre los atributos de un elemento. Por ejemplo, podemos usar HTMLImageElement.alt. Obtén 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 busca 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, la altura de cada <section> y las propiedades del DOM se actualizarán automáticamente.

Las API de la interfaz HTML no se limitan a acceder a valores de atributos. El DOM proporciona estadísticas sobre el estado actual de la IU. Las API HTML pueden acceder a toda esa información. Puedes acceder a la duración del video, desde donde se encuentra la vista de 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 vimos hasta ahora en esta serie, excepto algunos elementos de sección, tienen una interfaz de DOM asociada. La interfaz base para todos los elementos se denomina correctamente Element. El elemento HTMLElement hereda del elemento y todos los elementos HTML o interfaces de usuario heredadas de esta. Varios elementos similares implementan algunas interfaces específicas de elementos.

Las interfaces son las siguientes:

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 agrupación de elementos no sigue un patrón exacto. No se preocupe. No es necesario memorizarlos. Es importante saber que existen para que puedas buscarlos cuando lo necesites.

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

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

Métodos y propiedades de API redundantes

Si una interfaz tiene el mismo nombre de método o propiedad que la interfaz que hereda, la propiedad o el método heredados se reemplazan la heredada. Cuando accedimos a las propiedades alt y offsetHeight anteriores con imageInstance.alt y sectionInstance.offsetHeight respectivamente, el código no identificaba a qué API se estaba accediendo.

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

Otras interfaces

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

La interfaz node

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

El famoso "caminar del DOM" de Douglas Crockford usa el firstChild de Node y las propiedades nextSibling.

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

Utilizamos el appendChild() de Node y Métodos cloneNode() 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 del elemento. interfaz de usuario. También hay una interfaz shadowRoot para la API de Shadow DOM renderizada por separado de un árbol principal del DOM del documento.

Las interfaces Document y HTMLDocument

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

document permite un acceso rápido a los 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 para el documento que no se encuentran en nodos HTML, como Document.location, Document.lastModified y Document.Cookie.

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

La interfaz Window

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

La interfaz de Window es la API del objeto que contiene el documento. El objeto window global es la ventana en la que se esté ejecutando la secuencia de comandos. Cada pestaña del navegador contiene su propio objeto Window. La interfaz de Windows puede consultar el contenido de la pestaña así como la ventana y el dispositivo generales. Por ejemplo, resizeTo() se puede usar para cambiar el tamaño de la ventana del navegador, el elemento devicePixelRatio proporciona acceso a los píxeles de pantalla del dispositivo. Cuando accedes a información sobre la pestaña, 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 de Windows, incluidos los Web Workers. y las APIs de IndexedDB.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las API de HTML.

¿Qué significa la O en DOM?

Exterior.
Objetos.
Orientada.

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

Documento
Ventana
Nodo