Dans le cadre de ma formation, nous devons comprendre et manipuler le DOM à l’aide de Javascript. J’utiliserai cet article pour centraliser des remarques ou des anecdotes que je pourrai rencontrer durant mon apprentissage.
Les Nœuds
Parmi les remarques intéressantes qui peuvent parfois occasionner des erreurs, j’en ai retenu 2
- les espaces entre les balises ainsi que les retours à la ligne dans le code HTML sont considérés par le navigateur comme des nœuds textuels.
- Pour le nœud racine du DOM (la variable document), la valeur de parentNode est null : document n’a aucun nœud parent.
Sélection des nœuds
Le choix de la méthode de sélection des nœuds doit prendre en considération que les méthodes querySelectorAll et querySelector souffrent d’un déficit de performances par rapport aux autres méthodes.
Informations sur les éléments
Certains attributs sont directement accessibles sous la forme de propriétés telles que id, href et value.
Modification des éléments
Prenez garde à l’utilisation de innerHTML, préservez la lisibilité du code afin d’éviter des erreurs. Réservez son utilisation à de petites modifications.
Manipulation du DOM et performances
La création et la modification des nouveaux éléments avant leur insertion dans le DOM est une bonne pratique qui permet de préserver au maximum les performances !
Style d’un élément
La propriété style d’un élément ne permet pas d’accéder aux déclarations de style situées dans un fichier css externe. Utilisez la méthode getComputedStyle qui prend en paramètre un noeud du DOM et renvoie un objet représentant son style.
A noter que les propriétés CSS s’écrivent avec la norme camelCase en Javascript.
font-family devient fontFamily