API HTML

Dans l'introduction de cette série, il est indiqué que les éléments HTML sont les nœuds qui constituent le Document Object Model (modèle objet de document). Nous avons vu le type de nœuds d'éléments. Dans cette section, nous allons examiner les API d'éléments qui permettent d'interroger ces nœuds.

DOM et AOM

Le DOM est une API permettant d'accéder aux documents et de les manipuler. Le DOM est l'arborescence de tous les nœuds du document. Certains nœuds peuvent avoir des enfants, d'autres non. L'arborescence comprend des éléments, leurs attributs et des nœuds de texte.

Arborescence des nœuds MLW affichant les éléments et les nœuds de texte.

Les outils du navigateur ne fournissent pas de visualisations d'arborescence comme celle ci-dessus, mais vous pouvez voir les nœuds dans l'outil d'inspection des éléments.

DOM/ARIA

La représentation arborescente que vous pouvez inspecter dans les outils pour les développeurs du navigateur est l'arborescence d'accessibilité. L'AOM est basé sur le DOM. De même, l'arborescence d'accessibilité contient des objets représentant tous les éléments de balisage, les attributs et les nœuds de texte:

Exemple d'AOM.

API d'éléments HTML

La lettre du milieu de DOM est "objet". Tout comme l'exemple d'objet person ou car de la plupart des cours d'introduction à la programmation orientée objet, chaque nœud de l'arborescence de documents est un objet pouvant être manipulé avec JavaScript.

Le navigateur fournit de nombreuses API qui fournissent des méthodes, des événements et des requêtes et mises à jour de propriétés compatibles en mode natif. Les nœuds d'élément contiennent des informations sur tous les attributs définis sur l'élément. Vous pouvez utiliser des interfaces HTML pour accéder aux informations sur les attributs d'un élément. Par exemple, nous pouvons utiliser HTMLImageElement.alt pour obtenir les attributs alt de toutes les images:

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

Les interfaces HTML ne permettent pas seulement d'accéder aux attributs d'un élément. Vous pouvez accéder à de nombreuses autres informations. Nous pouvons trouver l'élément HTMLElement.offsetHeight en lecture seule pour obtenir la hauteur de chaque section de notre page par rapport à la mise en page.

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

Si l'utilisateur modifie l'orientation de son appareil ou la largeur de la fenêtre d'affichage, la hauteur de chaque <section> change et les propriétés DOM sont automatiquement mises à jour.

Les API de l'interface HTML ne se limitent pas à l'accès aux valeurs d'attribut. Le DOM fournit des informations sur l'état actuel de l'UI. Les API HTML peuvent accéder à toutes ces informations. Vous pouvez accéder à la durée d'une vidéo, à l'emplacement d'une vue dans la lecture en cours et à la fin de la lecture de la vidéo (ou de l'audio) avec HTMLMediaElement.duration, HTMLMediaElement.currentTime et HTMLMediaElement.ended, respectivement.

Interfaces d'éléments disponibles

La plupart des éléments HTML que nous avons abordés jusqu'à présent dans cette série et que nous n'avons pas encore abordés, à l'exception de certains éléments de sectionnement, ont une interface DOM associée. L'interface de base de tous les éléments est appelée Element (Élément). HTMLElement hérite d'Element, et toutes les interfaces spécifiques aux éléments HTML en héritent. Certaines interfaces spécifiques à un élément sont implémentées par plusieurs éléments similaires.

Les interfaces incluent:

La convention d'attribution de noms est "HTML", suivie d'un élément ou d'un groupe d'éléments en camel case, puis de "Élément". Toutefois, la partie "élément" ou "groupe d'éléments" ne suit aucun modèle exact. Ne vous inquiétez pas. Vous n'avez pas besoin de les mémoriser. Il est simplement important de savoir qu'ils existent pour pouvoir les consulter lorsque vous en avez besoin.

Si vous disposez d'une collection d'éléments, il existe également des interfaces de collection. Par exemple, la méthode HTMLCollection.namedItem() renvoie le premier élément de la collection dont l'attribut id ou name correspond au paramètre, ou la valeur nulle si aucun élément ne correspond.

Plus de 30 éléments n'ont pas d'interface DOM associée autre que HTMLElement, y compris <address>, <article>, <section>, <nav>, <header>, <footer>, <aside> et <hgroup>. De nombreux éléments qui n'acceptent aucun attribut non obsolète ni non global disposent d'interfaces spécifiques à l'élément, comme HTMLPElement (l'élément <p>) et HTMLUnknownElement (<😃> ou tout autre élément non défini), mais ces interfaces n'implémentent aucune propriété ni méthode supplémentaire en plus des propriétés et méthodes héritées de HTMLElement, et ne sont pas listées ci-dessus.

Méthodes et propriétés API redondantes

Si une interface porte le même nom de méthode ou de propriété qu'une interface héritée, la méthode ou la propriété héritée écrase celle héritée. En d'autres termes, les méthodes et propriétés parentes remplacent les enfants. Lorsque nous avons accédé aux propriétés alt et offsetHeight dans les API d'éléments HTML avec imageInstance.alt et sectionInstance.offsetHeight respectivement, le code n'a pas identifié l'API à laquelle nous accédions. En général, comme dans ces deux exemples, ce n'est pas un problème.

Toutefois, dans certains cas, la redondance peut poser problème. Par exemple, HTMLCollection.length est en lecture seule, tandis que l'interface héritée, HTMLOptionsCollection, possède une propriété de longueur (rendue uniquement par la propriété options de <select>) avec un accès en lecture et en écriture. HTMLOptionsCollection permet de définir la taille de la collection.

Autres interfaces

D'autres interfaces permettent de manipuler les emplacements des branches des nœuds DOM. L'interface EventTarget, qui fournit addEventListener() et removeEventListener(), est héritée des interfaces Node et Window. À leur tour, les interfaces Element, Document et DocumentFragment (que nous avons vues dans les éléments personnalisés) héritent de Node, et l'interface HTMLElement hérite d'Element.

Interface node

Chaque type de nœud DOM est représenté par une interface basée sur Node, qui fournit des informations et des méthodes en tant qu'éléments liés à l'arborescence DOM. L'interface Node permet d'interroger et d'ajouter des nœuds à l'arborescence des nœuds.

La célèbre fonction "parcourir le DOM" de Douglas Crockford utilise les propriétés firstChild et nextSibling de Node.

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

Nous avons utilisé les méthodes appendChild() et cloneNode() de Node pour définir des éléments personnalisés. L'interface Node fournit de nombreuses propriétés et méthodes utiles pour interroger et manipuler le 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));
    }
  });

La méthode attachShadow() est une méthode de l'interface Element. Il existe également une interface shadowRoot pour l'API Shadow DOM affichée séparément de l'arborescence DOM principale d'un document.

Interfaces Document et HTMLDocument

L'interface Document hérite de Node. Il représente la page Web chargée dans le navigateur, que le document soit au format HTML, SVG, XML, MathML ou autre. L'interface Document hérite également de l'interface HTMLDocument.

document permet d'accéder rapidement aux types de nœuds et de créer des collections de types d'éléments spécifiques, tels que document.body et document.styleSheets. HTMLDocument permet d'accéder aux informations pertinentes pour le document qui ne se trouvent pas dans les nœuds HTML, tels que Document.location, Document.lastModified et Document.Cookie.

Plusieurs API sont disponibles en fonction des fonctionnalités présentées via l'interface de document, y compris l'API Drag and Drop et l'API FullScreen. Les deux héritent de Element.

Interface Window

L'interface Window inclut des éléments disponibles globalement en dehors du DOM qui peuvent être utilisés pour manipuler le DOM. Window fournit des fonctions, des espaces de noms, des objets et des constructeurs documentés dans les pages JavaScript et Références DOM de MDN.

L'interface Window est l'API de l'objet contenant le document. L'objet window global est la fenêtre dans laquelle le script s'exécute. Chaque onglet du navigateur contient son propre objet Window. L'interface Window peut interroger le contenu de l'onglet, ainsi que la fenêtre et l'appareil globaux. Par exemple, la méthode resizeTo() permet de redimensionner la fenêtre du navigateur, et la propriété devicePixelRatio permet d'accéder aux pixels de l'écran de l'appareil. Lorsque vous accédez aux informations sur l'onglet dans lequel se trouve le contenu plutôt que sur l'arborescence DOM qu'il affiche, la fenêtre est probablement l'interface que vous recherchez.

Plusieurs API sont disponibles en fonction des fonctionnalités présentées via l'interface Window, y compris les API Web Workers et IndexedDB.

Vérifier vos connaissances

Testez vos connaissances sur les API HTML.

Que signifie le O dans DOM ?

orienté.
Réessayez.
Objets.
Bonne réponse !
Externe.
Réessayez.

Quelle interface peut vous aider à obtenir des informations sur l'onglet dans lequel se trouve le contenu ?

Fenêtre
Bonne réponse !
Document
Réessayez.
Nœud
Réessayez.