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.
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.
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:
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:
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>
e<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>
e<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 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?
Qual interface pode ajudar você a encontrar informações sobre a guia em que o conteúdo está?