API HTML

Nell'introduzione a questa serie dice "Gli elementi HTML sono i nodi che compongono il Document Object Model". Abbiamo parlato del tipo di nodi degli elementi. In questa sezione parleremo delle API degli elementi che consentono di eseguire query sui nodi.

DOM e AOM

Il DOM è un'API per l'accesso e la manipolazione dei documenti. Il DOM è l'albero di tutti i nodi nel documento. Alcuni nodi possono avere elementi secondari, altri no. La struttura ad albero include elementi, oltre ai relativi attributi, e nodi di testo.

Struttura dei nodi MLW che mostra elementi e nodi di testo.

Gli strumenti del browser non forniscono visualizzazioni ad albero come quella riportata sopra, ma puoi vedere i nodi nella funzionalità di controllo degli elementi.

Il DOM/ARIA.

La rappresentazione ad albero che può essere ispezionata negli strumenti per sviluppatori dei browser è l'albero dell'accessibilità. L'AOM si basa sul DOM; allo stesso modo, l'albero dell'accessibilità contiene oggetti che rappresentano tutti gli elementi di markup, gli attributi e i nodi di testo:

Un esempio di AOM.

API dell'elemento HTML

La lettera centrale del DOM è "object". Proprio come gli esempi di oggetti person o car dalla maggior parte delle classi di programmazione orientata agli oggetti, ogni nodo nella struttura dei documenti è un oggetto che può essere manipolato con JavaScript.

Il browser fornisce numerose API, fornendo metodi, eventi e query e aggiornamenti di proprietà supportati in modo nativo. I nodi dell'elemento contengono informazioni su tutti gli attributi impostati nell'elemento. Puoi usare le interfacce HTML per accedere alle informazioni sugli attributi di un elemento. Ad esempio, possiamo utilizzare HTMLImageElement.alt per recuperare gli attributi alt di tutte le immagini:

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

Le interfacce HTML offrono molto di più che un semplice accesso agli attributi di un elemento; puoi accedere a molte più informazioni. Possiamo trovare il valore di sola lettura HTMLElement.offsetHeight per ottenere l'altezza di ogni sezione della pagina in relazione al layout.

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

Se l'utente cambia l'orientamento del dispositivo o la larghezza dell'area visibile, l'altezza di ogni <section> cambia e le proprietà DOM vengono aggiornate automaticamente.

Le API dell'interfaccia HTML non si limitano all'accesso ai valori degli attributi. Il DOM fornisce insight sullo stato attuale dell'interfaccia utente. Le API HTML possono accedere a tutte queste informazioni. Puoi accedere alla durata di un video, se la visualizzazione è nella riproduzione corrente e se la riproduzione del video (o dell'audio) è terminata rispettivamente con HTMLMediaElement.duration, HTMLMediaElement.currentTime e HTMLMediaElement.ended.

Interfacce degli elementi disponibili

La maggior parte degli elementi HTML trattati finora in questa serie, ad eccezione di alcuni elementi di sezione, ha un'interfaccia DOM associata. L'interfaccia di base per tutti gli elementi è correttamente denominata Element. L'elemento HTMLElement eredita dall'elemento e tutte le interfacce specifiche dell'elemento HTML lo ereditano. Alcune interfacce specifiche degli elementi sono implementate da più elementi simili.

Le interfacce includono:

La convenzione di denominazione è "HTML" seguita da un elemento o gruppo di elementi in maiuscolo, seguito da "Elemento", ma l'elemento o il raggruppamento di elementi in parte non segue uno schema esatto. Non c'è problema. Non è necessario memorizzarli. È importante sapere che esistono così da poterli cercare quando ne hai bisogno.

Se hai una raccolta di elementi, puoi trovare anche le interfacce di raccolta. Ad esempio, il metodo HTMLCollection.namedItem() restituisce il primo elemento della raccolta il cui attributo id o name corrisponde al parametro, oppure null se non esistono elementi corrispondenti.

Oltre 30 elementi non hanno un'interfaccia DOM associata diversa da HTMLElement, tra cui <address>, <article>, <section>, <nav>, <header>, <footer>, <aside> e <hgroup>. Molti elementi che non supportano attributi non globali non deprecati hanno interfacce specifiche, come HTMLPElement (l'elemento <p>) e HTMLUnknownElement ( <😃> o altri elementi non definiti), ma queste non implementano proprietà o metodi aggiuntivi oltre alle proprietà e ai metodi ereditati da HTMLElement e non sono elencati sopra.

Metodi e proprietà dell'API ridondanti

Se un'interfaccia ha lo stesso metodo o nome proprietà e l'interfaccia che eredita, il metodo o la proprietà ereditati sovrascrive quelli ereditato. Quando abbiamo eseguito l'accesso alle proprietà alt e offsetHeight precedenti con imageInstance.alt e sectionInstance.offsetHeight, rispettivamente, il codice non ha identificato l'API a cui accedevamo.

In genere, come per questi due esempi, questo non è un problema. Ma può esserlo. Ad esempio, HTMLCollection.length è di sola lettura, mentre la proprietà length dell'interfaccia di HTMLOptionsCollection ereditata (restituita solo dalla proprietà options di <select>) può essere utilizzata anche per impostare le dimensioni della raccolta.

Altre interfacce

Esistono interfacce aggiuntive che consentono di manipolare le località dei rami dei nodi DOM. L'interfaccia di EventTarget, che fornisce addEventListener() e removeEventListener(), è ereditata dalle interfacce Node e Window. A loro volta, le interfacce Element, Document e DocumentFragment (che abbiamo visto negli elementi personalizzati) ereditano da Node, mentre l'interfaccia HTMLElement eredita da Element.

L'interfaccia di node

Ogni tipo di nodo DOM è rappresentato da un'interfaccia basata su Node, che fornisce informazioni e metodi come elementi correlati all'albero DOM. L'interfaccia Node consente di eseguire query e aggiungere nodi alla struttura ad albero dei nodi.

La famosa funzione "walk the DOM" di Douglas Crockford utilizza le proprietà firstChild e nextSibling di Node.

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

Abbiamo utilizzato i metodi appendChild() e cloneNode() dei nodi per definire gli elementi personalizzati. L'interfaccia Nodo fornisce molte proprietà e metodi utili per eseguire query e manipolare il 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));
    }
  });

Il metodo attachShadow() è un metodo dell'interfaccia dell'elemento. È presente anche un'interfaccia shadowRoot per l'API DOM Shadow visualizzata separatamente dall'albero DOM principale di un documento.

Le interfacce Document e HTMLDocument

L'interfaccia di Document eredita da Node. Rappresenta la pagina web caricata nel browser, indipendentemente dal fatto che il documento sia HTML, SVG, XML, MathML o altro. L'interfaccia Document eredita anche dall'interfaccia HTMLDocument.

document consente di accedere rapidamente ai tipi di nodi e di creare raccolte di tipi di elementi specifici, come document.body e document.styleSheets. L'elemento HTMLDocument consente di accedere a informazioni pertinenti al documento che non si trovano nei nodi HTML, come Document.location, Document.lastModified e Document.Cookie.

Sono disponibili diverse API in base alle funzionalità emerse nell'interfaccia del documento, tra cui l'API Drag and Drop e l'API Schermo intero. Entrambi ereditano da Element.

L'interfaccia di Window

L'interfaccia di Window include elementi disponibili a livello globale oltre al DOM che possono essere utilizzati per manipolare il DOM. Window fornisce funzioni, spazi dei nomi, oggetti e costruttori documentati nei riferimenti JavaScript e DOM di MDN.

L'interfaccia di Window è l'API dell'oggetto contenente il documento. L'oggetto window globale è la finestra in cui viene eseguito lo script. Ogni scheda del browser contiene il proprio oggetto Window. L'interfaccia di Window può eseguire query sui contenuti della scheda, nonché sulla finestra e sul dispositivo complessivi. Ad esempio, il metodo resizeTo() può essere utilizzato per ridimensionare la finestra del browser, la proprietà devicePixelRatio fornisce l'accesso ai pixel di visualizzazione del dispositivo. Quando accedi alle informazioni sulla scheda in cui si trovano i contenuti invece che sull'albero DOM visualizzato nella scheda, la finestra è probabilmente l'interfaccia che stai cercando.

Sono disponibili diverse API basate sulle funzionalità emerse nell'interfaccia di Windows, tra cui le API Web Workers e IndexedDB.

Verifica le tue conoscenze

Verifica la tua conoscenza delle API HTML.

Che cosa significa la O in DOM?

Orientata.
Riprova.
Oggetto.
risposta esatta.
Esterno.
Riprova.

Quale interfaccia può aiutarti a trovare informazioni sulla scheda in cui si trovano i contenuti?

Finestra
risposta esatta.
Documento
Riprova.
Nodo
Riprova.