API HTML

Nell'introduzione a questa serie si legge: "Gli elementi HTML sono i nodi che costituiscono il Document Object Model". Abbiamo discusso del tipo di nodi elemento. In questa sezione vengono descritte le API element che consentono di eseguire query su questi nodi.

Il DOM è un'API per accedere ai documenti e manipolarli. Il DOM è l'albero di tutti i nodi del documento. Alcuni nodi possono avere elementi secondari, altri no. L'albero include gli elementi, i relativi attributi e i nodi di testo.

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

Gli strumenti del browser non forniscono visualizzazioni ad albero come quella sopra, ma puoi vedere i nodi nell'inspector degli elementi.

Il DOM/ARIA.

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

Un esempio di AOM.

API elemento HTML

La lettera centrale di DOM è "object". Proprio come l'esempio di oggetto person o car della maggior parte dei corsi introduttivi alla programmazione orientata agli oggetti, ogni nodo dell'albero del documento è un oggetto che può essere manipolato con JavaScript.

Il browser fornisce numerose API che offrono metodi, eventi e query e aggiornamenti delle proprietà supportati in modo nativo. I nodi elemento contengono informazioni su tutti gli attributi impostati sull'elemento. Puoi utilizzare 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 non forniscono solo l'accesso agli attributi di un elemento, ma consentono di accedere a molte più informazioni. Possiamo trovare HTMLElement.offsetHeight di sola lettura per ottenere l'altezza di ogni sezione della pagina rispetto 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> varierà e le proprietà DOM verranno aggiornate automaticamente di conseguenza.

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

Interfacce elemento disponibili

La maggior parte degli elementi HTML che abbiamo trattato finora in questa serie e che dobbiamo ancora trattare, ad eccezione di alcuni elementi di suddivisione, ha un'interfaccia DOM associata. L'interfaccia di base per tutti gli elementi si chiama Element. HTMLElement eredita da Element e tutte le interfacce specifiche per gli elementi HTML ereditano da HTMLElement. Alcune interfacce specifiche per gli elementi sono implementate da più elementi simili.

Le interfacce includono:

La convenzione di denominazione è "HTML" seguita da un elemento o un raggruppamento di elementi in maiuscolo camel case, seguita da "Element", ma la parte relativa all'elemento o al raggruppamento di elementi non segue uno schema esatto. Non preoccuparti. Non è necessario memorizzarli. È importante sapere che esistono, in modo da poterli cercare quando necessario.

Se hai una raccolta di elementi, sono disponibili anche 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 esiste alcun elemento corrispondente.

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 ritirati e non globali hanno interfacce specifiche per gli elementi, come HTMLPElement (l'elemento <p>) e HTMLUnknownElement (<😃> o qualsiasi altro elemento non definito), ma queste interfacce non implementano proprietà o metodi aggiuntivi oltre a quelli ereditati da HTMLElement e non sono elencate sopra.

Metodi e proprietà API ridondanti

Se un'interfaccia ha lo stesso nome di metodo o proprietà di un'interfaccia ereditata, il metodo o la proprietà ereditata sovrascrive quella ereditata. In altre parole, i metodi e le proprietà principali sostituiscono quelli secondari. Quando abbiamo eseguito l'accesso alle proprietà alt e offsetHeight nelle API Elementi HTML con imageInstance.alt e sectionInstance.offsetHeight rispettivamente, il codice non ha identificato a quale API si stava accedendo. In genere, come in questi due esempi, non si tratta di un problema.

Tuttavia, in alcuni casi la ridondanza può causare un problema. Ad esempio, HTMLCollection.length è di sola lettura, mentre l'interfaccia che eredita, HTMLOptionsCollection, ha una proprietà length (reso solo dalla proprietà options di <select>) con accesso in lettura e scrittura. HTMLOptionsCollection può essere utilizzato per impostare la dimensione della raccolta.

Altre interfacce

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

Interfaccia node

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

La famosa funzione "esplora il 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() di Node per definire gli elementi personalizzati. L'interfaccia Node 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 Element. Esiste anche un'interfaccia shadowRoot per l'API Shadow DOM visualizzata separatamente dall'albero DOM principale di un documento.

Le interfacce Document e HTMLDocument

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

document consente di accedere rapidamente ai tipi di nodi e di creare raccolte di tipi di elementi specifici, ad esempio document.body e document.styleSheets. HTMLDocument consente di accedere alle 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à visualizzate tramite l'interfaccia del documento, tra cui l'API Drag and Drop e l'API FullScreen. Entrambi ereditano da Element.

Interfaccia Window

L'interfaccia 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 in JavaScript e Referenze DOM di MDN.

L'interfaccia Window è l'API per l'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 Window può eseguire query sui contenuti della scheda nonché sulla finestra e sul dispositivo in generale. Ad esempio, il metodo resizeTo() può essere utilizzato per ridimensionare la finestra del browser, mentre la proprietà devicePixelRatio consente di accedere ai pixel del display del dispositivo. Quando accedi alle informazioni sulla scheda in cui si trovano i contenuti anziché alla struttura DOM visualizzata dalla scheda, è probabile che la finestra sia l'interfaccia che stai cercando.

Sono disponibili diverse API in base alle funzionalità visualizzate tramite l'interfaccia Window, tra cui le API Web Workers e IndexedDB.

Verificare di aver compreso

Verifica le tue conoscenze sulle API HTML.

Che cosa significa la O in DOM?

Oggetti
Orientata.
Esterno.

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

Nodo
Documento
Finestra