DOM

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
Partager
Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

quatre × cinq =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.