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.
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.
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:
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:
HTMLAnchorElement
-<a>
HTMLAreaElement
-<area>
HTMLAudioElement
-<audio>
HTMLBaseElement
-<base>
HTMLButtonElement
-<button>
HTMLCanvasElement
-<canvas>
HTMLDataElement
-<data>
HTMLDataListElement
-<datalist>
HTMLDetailsElement
-<details>
HTMLDialogElement
-<dialog>
HTMLEmbedElement
-<embed>
HTMLFieldSetElement
-<fieldset>
HTMLFormElement
-<form>
HTMLHtmlElement
-<html>
HTMLIFrameElement
-<iframe>
HTMLImageElement
-<img>
HTMLInputElement
-<input>
HTMLLabelElement
-<label>
HTMLLegendElement
-<legend>
HTMLLIElement
-<li>
HTMLLinkElement
-<link>
HTMLMapElement
-<map>
HTMLMediaElement
a<audio>
de<video>
HTMLMenuElement
-<menu>
HTMLMetaElement
-<meta>
HTMLMeterElement
-<meter>
HTMLModElement
a<ins>
de<del>
HTMLObjectElement
-<object>
HTMLOListElement
-<ol>
HTMLOptGroupElement
a<optgroup>
HTMLOptionElement
-<option>
HTMLOutputElement
-<output>
HTMLPictureElement
-<picture>
HTMLProgressElement
-<progress>
HTMLQuoteElement
:<q>
,<blockquote>
,<cite>
HTMLScriptElement
-<script>
HTMLSelectElement
-<select>
HTMLSlotElement
-<slot>
HTMLSourceElement
-<source>
HTMLStyleElement
a<style>
HTMLTableCellElement
a<td>
de<th>
HTMLTableColElement
a<col>
de<colgroup>
HTMLTableElement
-<table>
HTMLTableRowElement
-<tr>
HTMLTableSectionElement
:<thead>
,<tbody>
,<tfoot>
HTMLTemplateElement
-<template>
HTMLTextAreaElement
-<textarea>
HTMLTimeElement
-<time>
HTMLTitleElement
-<title>
HTMLTrackElement
-<track>
HTMLVideoElement
-<video>
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?
Qual interface pode ajudar você a descobrir informações sobre a guia em que o conteúdo está?