Les technologies anciennes du navigateur, notamment XPath et certaines parties du stack XML, restent utiles malgré l’abstraction apportée par les frameworks modernes, car elles permettent des opérations difficiles ou impossibles avec les outils courants comme les sélecteurs CSS, par exemple interroger le DOM selon la position relative des éléments ou extraire directement des valeurs complexes. L’article montre que combiner XPath et CSS peut fournir des requêtes plus puissantes et robustes, particulièrement pour les tests automatisés où XPath peut cibler des éléments même si les classes ou la structure changent, tout en soulignant que certaines technologies comme XSLT 1.0 sont en voie de dépréciation dans les navigateurs, ce qui pourrait réduire une partie de cet écosystème sans pour autant faire disparaître XPath lui-même.
L'article explore comment des techniques anciennes et des API natives du navigateur surpassent les frameworks modernes en termes de performance. L'auteur présente multicardz, un outil de gestion de données spatiales, qui utilise des bitmaps pour les requêtes backend, réduisant ainsi les temps de traitement. Pour le frontend, il utilise DATAOS (DOM As The Authority On State), une approche où le DOM est la source de vérité pour l'état de l'application, éliminant ainsi la nécessité de synchroniser un état séparé. Le résultat est une application performante avec un bundle JavaScript de seulement 32KB, un score Lighthouse de 100, et des temps de réponse extrêmement rapides.
snapDOM est un outil rapide et précis de capture DOM en image, conçu pour Zumly, un framework de transition de vue basé sur le zoom. Il capture n'importe quel élément HTML sous forme d'image SVG redimensionnable, en préservant les styles, les polices, les images de fond, les pseudo-éléments et même le shadow DOM. Il prend également en charge l'exportation vers des formats d'image raster et canvas.
document.elementFromPoint permet d'obtenir l'élément directement présent aux coordonnées x,y
Il existe aussi document.elementsFromPoint qui liste l'ensemble des éléments (par inclusion)
Tout est dans le titre
Que se passe-t-il au niveau de l'événement onClick? L'auteur a connu quelques déboires
Tout est dans le titre (via https://www.smashingmagazine.com/2016/10/web-development-reading-list-155/ )
L'auteur teste différentes approches pour savoir quel onglet de navigateur est actif ?
Astuce DOM pour rester si un noeud créé est bien inclus dans le DOM
Tout est dans le titre. Des "howto" spécifiques
Un framework à mi chemin entre le JS "vanilla" et l'artillerie lourde comme React / Vue : pas de DOM virtuel mais une manipulation facile du DOM
Tout est dans le titre
Tout est dans le titre
Une excellente explication de ce qu'est le DOM
Tout est dans le titre
Tout est dans le titre (via https://www.creativejuiz.fr/blog/ressources-telechargements/les-ressources-du-web-39 )
Une autre façon de faire des modifications dans le DOM, plus performante
Tout est dans le titre
Tout est dans le titre