APIs HTML

Na introdução desta série, afirmamos que "Elementos HTML são os nós que compõem o Modelo de objeto de documentos". Já abordamos o tipo de nó de elemento. Nesta seção, vamos abordar as APIs do elemento que permitem consultar esses nós.

O DOM e o AOM

O DOM é uma API para acessar e manipular documentos. O DOM é a árvore de todos os nós no documento. Alguns nós podem ter filhos, outros não. A árvore inclui elementos, junto com os respectivos atributos e nós de texto.

Árvore de nós do MLW mostrando elementos e nós de texto.

As ferramentas de navegador não oferecem visualizações em árvore como a mostrada acima, mas é possível ver os nós no inspetor de elementos.

O DOM/ARIA.

A representação da árvore que pode ser inspecionada nas ferramentas para desenvolvedores do navegador é a árvore de acessibilidade. A AOM é baseada no DOM. Da mesma forma, a árvore de acessibilidade contém objetos que representam todos os elementos de marcação, atributos e nós de texto:

Um exemplo de AOM.

APIs HTML Element

A letra do meio do DOM é "object". Assim como o exemplo de objeto person ou car da maioria das introdução às classes de programação orientadas a objetos, cada nó da árvore de documentos é um objeto que pode ser manipulado com JavaScript.

O navegador fornece várias APIs que oferecem métodos, eventos e consultas e atualizações de propriedades com suporte nativo. Os nós do elemento contêm informações sobre todos os atributos definidos no elemento. Use interfaces HTML para acessar informações sobre os atributos de um elemento. Por exemplo, podemos usar HTMLImageElement.alt para receber os atributos alt de todas as imagens:

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

As interfaces HTML fornecem mais do que apenas acesso aos atributos de um elemento; você pode acessar muito mais informações. Podemos encontrar o HTMLElement.offsetHeight somente leitura para saber a altura de cada seção da página em relação ao layout.

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

Se o usuário mudar a orientação do dispositivo ou a largura da janela de visualização, a altura de cada <section> será alterada, e as propriedades do DOM serão atualizadas automaticamente.

As APIs da interface HTML não se limitam ao acesso aos valores de atributo. O DOM oferece informações sobre o estado atual da interface. As APIs HTML podem acessar todas essas informações. Você pode acessar a duração de um vídeo, em que uma visualização está na reprodução atual e se a reprodução do vídeo (ou áudio) terminou com HTMLMediaElement.duration, HTMLMediaElement.currentTime e HTMLMediaElement.ended, respectivamente.

Interfaces de elementos disponíveis

A maioria dos elementos HTML que abordamos até agora nesta série e que ainda não foram abordados, além de alguns elementos de secção, tem uma interface DOM associada. A interface de base para todos os elementos é adequadamente chamada de Elemento. O HTMLElement é herdado do elemento, e todas as interfaces específicas do elemento HTML herdam dele. Algumas interfaces específicas do elemento são implementadas por vários elementos semelhantes.

As interfaces incluem:

A convenção de nomenclatura é "HTML", seguido por um elemento ou agrupamento de elementos em letras maiúsculas concatenadas, seguido por "Elemento", mas o elemento ou a parte do agrupamento de elementos não segue um padrão exato. Não se preocupe. Não é necessário memorizá-las. Só é importante saber que eles existem para que você possa consultá-los quando precisar.

Se você tem uma coleção de elementos, também existem interfaces de coleção. Por exemplo, o método HTMLCollection.namedItem() retorna o primeiro elemento da coleção que tenha o atributo id ou name correspondente ao parâmetro ou nulo se nenhum elemento corresponder.

Mais de 30 elementos não têm uma interface DOM associada além de HTMLElement, incluindo <address>, <article>, <section>, <nav>, <header>, <footer>, <aside> e <hgroup>. Muitos elementos que não oferecem suporte a atributos não globais não descontinuados têm interfaces específicas, como HTMLPElement (o elemento <p>) e HTMLUnknownElement (<😃> ou qualquer outro elemento não definido), mas essas interfaces não implementam outras propriedades ou métodos sobre as propriedades e métodos herdados de HTMLElement e não estão listados acima.

Métodos e propriedades de API redundantes

Se uma interface tiver o mesmo método ou nome de propriedade que a interface herdada, o método ou a propriedade herdado substituirá a herdada. Quando acessamos as propriedades alt e offsetHeight acima com imageInstance.alt e sectionInstance.offsetHeight, respectivamente, o código não identificou qual API estava sendo acessada.

Geralmente, assim como nesses dois exemplos, isso não é um problema. Mas pode ser. Por exemplo, o HTMLCollection.length é somente leitura, enquanto a propriedade de comprimento da interface HTMLOptionsCollection herdada (retornada apenas pela propriedade options de <select>) também pode ser usada para definir o tamanho do conjunto.

Outras interfaces

Existem interfaces adicionais que permitem manipular os locais de ramificação dos nós do DOM. A interface EventTarget, que fornece addEventListener() e removeEventListener(), é herdada pelas interfaces Node e Window. Por sua vez, as interfaces Element, Document e DocumentFragment (que vimos nos elementos personalizados) herdam do Node, e a interface HTMLElement herda do Element.

A interface node.

Todos os tipos de nó DOM são representados por uma interface baseada em Node, que fornece informações e métodos conforme os elementos relacionados à árvore do DOM. A interface Node permite consultar e adicionar nós à árvore de nós.

A famosa função "Walk the DOM" de Douglas Crockford usa as propriedades firstChild e nextSibling do Node.

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

Usamos os métodos appendChild() e cloneNode() do Node para definir elementos personalizados. A interface de nó fornece muitas propriedades e métodos úteis para consultar e manipular o 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));
    }
  });

O método attachShadow() é um método da interface do elemento. Há também uma interface shadowRoot para a API Shadow DOM renderizada separadamente da árvore do DOM principal de um documento.

As interfaces Document e HTMLDocument

A interface Document é herdada de Node. Ele representa a página da Web carregada no navegador, seja o documento HTML, SVG, XML, MathML ou outro. A interface Document também é herdada da interface HTMLDocument.

O document permite o acesso rápido aos tipos de nó e a capacidade de criar coleções de tipos de elementos específicos, como document.body e document.styleSheets. O HTMLDocument permite acessar informações relevantes para o documento que não são encontradas em nós HTML, como Document.location, Document.lastModified e Document.Cookie.

Várias APIs estão disponíveis com base nos recursos apresentados na interface do documento, incluindo a API Drag and Drop e a API FullScreen. Ambos herdam de Element.

A interface Window.

A interface Window inclui itens disponíveis globalmente além do DOM que podem ser usados para manipular o DOM. A janela fornece funções, namespaces, objetos e construtores documentados nas referências do DOM e JavaScript do MDN.

A interface Window é a API do objeto que contém o documento. O objeto window global é a janela em que o script está sendo executado. Cada guia do navegador contém seu próprio objeto Window. A interface da janela pode consultar o conteúdo da guia, além da janela geral e do dispositivo. Por exemplo, o método resizeTo() pode ser usado para redimensionar a janela do navegador. A propriedade devicePixelRatio fornece acesso aos pixels de exibição do dispositivo. Ao acessar informações sobre a guia em que o conteúdo está, e não a árvore DOM que a guia exibe, a janela provavelmente é a interface que você está procurando.

Várias APIs estão disponíveis com base nos recursos exibidos na interface do Window, incluindo as APIs Web Workers e IndexedDB.

Teste seu conhecimento

Teste seus conhecimentos sobre APIs HTML.

O que significa o O em DOM?

Orientado.
Tente de novo.
Objeto
Correto.
Externa.
Tente de novo.

Qual interface pode ajudar você a descobrir informações sobre a guia em que o conteúdo está?

Janela
Correto.
Documento
Tente de novo.
Nó
Tente de novo.