API HTML

Dans l'introduction de cette série, il est précisé : "Les éléments HTML sont les nœuds qui constituent le Document Object Model". Nous avons abordé les types de nœuds d'éléments. Dans cette section, nous allons aborder les API 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, avec leurs attributs, ainsi que des nœuds de texte.

Arborescence de nœuds MLW montrant des éléments et des nœuds de texte

Les outils de navigateur ne fournissent pas de visualisation en arborescence comme celle présentée ci-dessus, mais vous pouvez voir les nœuds dans l'inspecteur d'éléments.

DOM/ARIA

L'arborescence qui peut être inspectée dans les outils pour les développeurs du navigateur correspond à 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, attributs et nœuds de texte:

Exemple d'AOM

API HTML Element

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

Le navigateur fournit de nombreuses API offrant des méthodes, des événements, ainsi que des requêtes et des mises à jour de propriétés compatibles de manière native. Les nœuds des éléments contiennent des informations sur tous les attributs définis au niveau de 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 fournissent pas seulement un accès aux attributs d'un élément ; vous pouvez accéder à beaucoup plus d'informations. Nous pouvons trouver le 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 change l'orientation de son appareil ou modifie 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 des attributs. Le DOM fournit des informations sur l'état actuel de l'interface utilisateur. Les API HTML peuvent accéder à toutes ces informations. Vous pouvez accéder à la durée d'une vidéo, où une vue se trouve dans la lecture en cours et si la lecture de la vidéo (ou du son) est terminée avec HTMLMediaElement.duration, HTMLMediaElement.currentTime et HTMLMediaElement.ended respectivement.

Interfaces des éléments disponibles

La plupart des éléments HTML que nous avons abordés dans cette série et que nous n'avons pas encore abordés, à l'exception de certains éléments de section, sont associés à une interface DOM. L'interface de base de tous les éléments est nommée de façon appropriée Élément. La HTMLElement hérite de l'élément 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 sont les suivantes:

La convention d'attribution de noms est "HTML" suivi d'un élément ou d'un groupe d'éléments en majuscules et de "Élément", mais l'élément ou le groupe d'éléments ne suit pas de modèle exact. Ne vous inquiétez pas. Il n'est pas nécessaire de les mémoriser. Il est juste important de savoir qu’ils existent afin que vous puissiez les rechercher quand vous en avez besoin.

Si vous disposez d'un ensemble 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 "null" si aucun élément ne correspond.

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

Méthodes et propriétés d'API redondantes

Si une interface possède la même méthode ou le même nom de propriété que l'interface dont elle hérite, la méthode ou la propriété héritée écrase la méthode héritée. Lorsque nous avons accédé aux propriétés alt et offsetHeight ci-dessus avec imageInstance.alt et sectionInstance.offsetHeight respectivement, le code n'a pas identifié l'API concernée.

Généralement, comme dans ces deux exemples, ce n'est pas un problème. Mais cela peut être. Par exemple, HTMLCollection.length est en lecture seule, tandis que la propriété de longueur de l'interface HTMLOptionsCollection héritante (renvoyée uniquement par la propriété options de <select>) peut également être utilisée pour définir la taille de la collection.

Autres interfaces

Il existe des interfaces supplémentaires qui permettent de manipuler les emplacements des branches des nœuds DOM. L'interface EventTarget, qui nous fournit addEventListener() et removeEventListener(), est héritée par les 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, tandis que l'interface "HTMLElement" hérite de "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 de nœuds.

La célèbre fonction "Walk the 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 des nœuds 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 à des informations pertinentes sur 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 mises en évidence via l'interface du document, y compris l'API glisser-déposer et l'API FullScreen. Les deux héritent de Element.

Interface Window

Au-delà du DOM, l'interface de Windows inclut des éléments disponibles dans le monde entier qui peuvent être utilisés pour le manipuler. Windows fournit des fonctions, des espaces de noms, des objets et des constructeurs documentés dans les JavaScript et 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 de Windows peut interroger le contenu de l'onglet, ainsi que la fenêtre globale et l'appareil. Par exemple, la méthode resizeTo() peut être utilisée pour redimensionner la fenêtre du navigateur. La propriété devicePixelRatio donne accès aux pixels d'affichage 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, il s'agit probablement de l'interface que vous recherchez.

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

Testez vos connaissances

Testez vos connaissances sur les API HTML.

Que signifie le O dans DOM ?

Orientée.
Réessayez.
Objet.
Bonne réponse !
Extérieur.
Réessayez.

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

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