Code B3

Appearance

Manipulation du DOM

Broken Images, 2023 | 27 handmade on-chain responsive HTML NFTs, by Jan Robert Leegte
Broken Images, 2023 | 27 handmade on-chain responsive HTML NFTs, by Jan Robert Leegte→ Ouvrir le lien

LE DOM ​

Le DOM (Document Object Model) est la représentation d'une page web sous la forme d'un objet, une arbre dans lequel nous allons pouvoir naviguer et que sur lequel nous allons pouvoir agir.

Le DOM n'est pas du javascript. C'est juste une interface représentant des objets et pouvant être utilisée par beaucoup de langages différents.

The rendering process of a web page.
The rendering process of a web page.→ Ouvrir le lien

Quand le navigateur charge votre page web, il va y avoir deux étapes importantes:

  1. Le navigateur va créer un DOM en C++ qui va être utilisé pour afficher la page.
  2. Il va créer un DOM en JS et faire en sorte de lier chacun de ses objets au DOM C++ avec un ensemble de getters (pour lire) et de setters (pour modifier une valeur) et mettre à jour le DOM JS à chaque changement.

https://betterprogramming.pub/the-history-of-dom-manipulation-performance-in-a-nutshell-701247c19e83

1998: Première version du DOM, créée par le WWW Consortium : Avoir un arbre logique qui représente chaque élément de votre page Web. En 2000, le niveau 2 a été publié. Il a introduit le modèle événementiel.

jQuery est venu pour rendre cette manipulation moins verbeuse. jQuery a apporté des fonctionnalités supplémentaires telles que la gestion des événements, l'animation CSS et Ajax.

Vers 2010, jQuery était extrêmement populaire (et il est toujours largement utilisé). Bien qu'il y ait eu un problème que jQuery n'a pas résolu : la complexité des applications a fait des données frontales une chose sérieuse à gérer. Plus il y a de données, plus il y a de changements dans l'arborescence DOM.

L’idée était d’abandonner le terme de pages Web et d’adopter une nouvelle approche et un nouvel état d’esprit : les applications Web. Fini les pages statiques, fini les interactions simples et la gestion des événements. Le monde revendique la gestion des données et les SPA. Les applications Web ont besoin d'un état et les états doivent être gérés.

Les méthodes du DOM (functions dans l'objet DOM)