APIs HTML

Na introdução desta série, diz que "os elementos HTML são os nós que compõem o Document Object Model". Conversamos sobre o tipo de nó de elemento. Nesta seção, discutiremos as APIs de elementos que permitem consultar esses nós.

O DOM e o AOM

O DOM é uma API para acesso e manipulação de documentos. O DOM é a árvore de todos os nós do documento. Alguns nós podem ter filhos, outros não. A árvore inclui elementos, com seus atributos e nós de texto.

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

As ferramentas do navegador não fornecem visualizações de á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 do DOM; Da mesma forma, a árvore de acessibilidade contém objetos que representam todos os elementos, atributos e texto de marcação nós:

Um exemplo de AOM.

APIs de elementos HTML

A letra do meio do DOM é “objeto”. Assim como o exemplo de objeto person ou car, desde a maior introdução à programação orientada a objetos. , cada nó da árvore de documentos é um objeto que pode ser manipulado com JavaScript.

O navegador oferece vários 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. É possível usar interfaces HTML para acessar informações sobre os atributos de um elemento. Por exemplo, podemos usar HTMLImageElement.alt. acesse 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> mudará e as propriedades do DOM serão atualizadas automaticamente com ela.

As APIs de interface HTML não estão limitadas a acessar valores de atributos. O DOM fornece 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 a visualização está na reprodução atual, Se o vídeo (ou áudio) tiver terminado de ser reproduzido com HTMLMediaElement.duration, HTMLMediaElement.currentTime e HTMLMediaElement.ended, respectivamente.

Interfaces de elementos disponíveis

A maior parte dos elementos HTML que abordamos até agora nesta série e que ainda não abordamos, além de alguns elementos de seção, tem uma interface DOM associada. A interface base de todos os elementos é devidamente nomeada como Element. O HTMLElement herda do elemento e de todos os elementos HTML específicos de interface herdam dela. Algumas interfaces específicas de elementos 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 concatenadas maiúsculas, seguido por "Elemento", mas a parte do elemento ou agrupamento de elementos não segue um padrão exato. Não se preocupe. Não é necessário memorizá-las. É importante saber que eles existem para que você possa procurá-los quando precisar.

Se você tiver uma coleção de elementos, também existem interfaces de coleta. Por exemplo, o O método HTMLCollection.namedItem() retorna a primeira elemento na coleção cujo atributo id ou name corresponde 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 têm suporte a nenhuma atributos não globais têm interfaces específicas de elementos, como HTMLPElement (o elemento <p>) e HTMLUnknownElement ( <😃> ou qualquer outro elemento que não esteja definido), mas essas interfaces não implementam propriedades ou métodos adicionais. 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 e a interface herdada, o método ou a propriedade herdada serão substituídos 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.

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

Outras interfaces

Há interfaces adicionais que permitem a manipulação dos locais das ramificações dos nós do DOM. A interface EventTarget, que fornece com addEventListener() e removeEventListener(), é herdada pelas interfaces Node e Window. Por sua vez, as interfaces Element, Document e DocumentFragment (que vimos em elementos personalizados) são herdadas do Node, e a interface HTMLElement é herdada de Element.

Interface node

Cada tipo de nó DOM é representado por uma interface com base em Node, que fornece informações e métodos quando os elementos se relacionam com a árvore do DOM. A interface Node permite consultar e adicionar nós à árvore de nós.

O famoso "passeio pelo DOM" de Douglas Crockford usa o firstChild do Node e as propriedades nextSibling.

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

Usamos as APIs appendChild() e cloneNode() na definição de 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 do elemento interface gráfica do usuário. Há também uma interface shadowRoot para o A API Shadow DOM é renderizada separadamente de uma principal da árvore do DOM do documento.

As interfaces Document e HTMLDocument

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

O document permite acesso rápido a tipos de nós 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 encontrados em nós HTML, como Document.location, Document.lastModified e Document.Cookie.

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

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 namespaces, objetos e construtores documentados no JavaScript do MDN e Referências de DOM.

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

Várias APIs estão disponíveis com base nos recursos que surgem pela interface da janela, incluindo as Web Workers e as APIs do IndexedDB.

Teste seu conhecimento

Teste seus conhecimentos sobre APIs HTML.

O que significa o O em DOM?

Orientado.
Tente novamente.
Armazenamento de objetos.
Correto!
Exterior.
Tente novamente.

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

Janela
Correto!
Documento
Tente novamente.
Nó
Tente novamente.