Maîtriser parfaitement la manipulation du DOM en JavaScript vanilla

• Cet article traite de la maîtrise de la manipulation du Document Object Model (DOM) avec du JavaScript vanilla.
• Il souligne l’importance de comprendre l’API DOM du navigateur pour le développement web, malgré l’utilisation d’outils modernes comme Angular, VueJS, React, Solid et Svelte.
• L’auteur propose une collection de ressources comprenant les API natives du navigateur, des exemples faciles à comprendre, des démos en temps réel, des conseils et bonnes pratiques, des cas d’usage concrets, ainsi que la compatibilité avec les navigateurs modernes et Internet Explorer.
• Ces ressources sont réparties en trois niveaux : débutant, intermédiaire et avancé.
• Le niveau débutant inclut des tâches comme changer dynamiquement le favicon selon la préférence de schéma de couleurs de l’utilisateur, calculer le temps de lecture d’une page web et mettre à jour dynamiquement les variables racine CSS.
• Le niveau intermédiaire comprend des tâches comme supprimer l’indentation dans une zone de texte avec la combinaison de touches Shift+Tab, passer en mode plein écran et créer un champ numérique à incrémentation.
• Le niveau avancé inclut des tâches comme créer un curseur personnalisé, assainir des chaînes HTML et créer une barre de défilement personnalisée.
• L’auteur partage aussi des conseils pour éviter les décalages de mise en page à l’ouverture d’une fenêtre modale, ou encore pour obtenir le rectangle englobant de nœuds de texte.
• L’article se termine par une invitation à s’abonner à la newsletter de l’auteur consacrée aux contenus techniques frontend.

[GN⁺]

Avis Hacker News

• Cet article propose divers exemples pour maîtriser parfaitement la manipulation du DOM.
• Les exemples ont été salués pour leur niveau de détail et leur utilité dans des travaux d’UI fonctionnels.
• Certains utilisateurs ont estimé que le travail avec l’API DOM de base était ennuyeux et sujet aux erreurs, ce qui les a conduits à utiliser des frameworks comme Svelte.
• Une discussion porte sur de potentielles vulnérabilités de sécurité liées à un code précis, avec la suggestion d’utiliser une liste blanche.
• Certains utilisateurs ont signalé des répétitions inutiles dans le code et proposé des alternatives plus efficaces.
• Certains exemples utilisent d’anciennes API alors qu’il existe aujourd’hui des versions plus pratiques.
• La technique d’« extension automatique de la zone de texte » est jugée dépassée par certains, qui suggèrent d’utiliser une nouvelle propriété CSS ou un élément miroir caché.
• L’article a déclenché une discussion sur l’utilité de bien comprendre les manipulations DOM fondamentales.
• Certains utilisateurs se sont remémoré les débuts du développement web, lorsque tout était écrit en JS « vanilla ».
• Il a été suggéré qu’empaqueter ces exemples pour pouvoir les mettre à jour et les utiliser facilement serait préférable au simple copier-coller.