Manipuler les attributs et les styles des éléments via le DOM en JavaScript

Grâce au DOM, nous allons également pouvoir tester si un élément possède un attribut, récupérer la valeur d’un attribut donné, ajouter, modifier ou supprimer des attributs. Nous allons également pouvoir manipuler les styles CSS de nos éléments.

 

Tester la présence d’attributs

La méthode hasAttribute() de l’interface Element nous permet de tester la présence d’un attribut en particulier pour un élément. Cette méthode prend en argument le nom de l’attribut qu’on recherche et renvoie la valeur booléenne true si l’élément possède bien cet attribut ou false sinon.

Pour vérifier si un élément possède des attributs ou pas (quels qu’ils soient), on utilisera plutôt la méthode hasAttributes() de cette même interface. Cette méthode retourne à nouveau une valeur booléenne (true si l’élément possède au moins un attribut ou false si l’élément ne possède pas d’attribut).

Code HTML support pour manipulation des attributs et des styles des éléments en utilisant le DOM en JavaScript

Présentation des méthodes JavaScript DOM hasAttributes et hasAttribute

Exemple d'utilisation des méthodes JavaScript DOM hasAttributes et hasAttribute pour tester la présence d'attributs

See the Pen
Cours JavaScript 8.5.1
by Pierre (@pierregiraud)
on CodePen.

 

Récupérer la valeur ou le nom d’un attribut ou définir un attribut

La propriété attributes de l’interface Element renvoie la liste des attributs d’un (nœud) élément spécifié. La liste d’attributs est renvoyée sous la forme « clef / valeur » et est un objet de l’interface NamedNodeMap .

L’interface NamedNodeMap est une interface qui sert à représenter des ensembles d’objets de l’interface Attr. L’interface Attr sert à représenter les attributs des éléments du DOM sous forme d’objets.

On va pouvoir récupérer les noms et valeurs de chaque attribue en utilisant une boucle for pour itérer dans cette liste et les propriétés name et value de l’interface Attr.

Présentation de la propriété JavaScript DOM attributes

On récupère la liste des attributs d'un élément avec la propriété JavaScript attributes

See the Pen
Cours JavaScript 8.5.2
by Pierre (@pierregiraud)
on CodePen.

Si on ne souhaite récupérer que les noms des attributs d’un élément, on peut également utiliser la méthode getAttributeNames() qui renvoie les noms des attributs d’un élément sous forme de tableau (type Array).

Pour ne récupérer que la valeur d’un attribut donné pour un élément, on utilisera plutôt la méthode getAttribute(). Cette méthode renvoie la valeur de l’attribut donné si celui-ci existe ou null ou la chaine de caractères vide dans le cas contraire.

Présentation des méthodes JavaScript DOM getAttributeNames et getAttribute

Exemple d'utilisation de getAttributeNames et getAttribute pour récupérer des attributs en JavaScript avec le DOM

See the Pen
Cours JavaScript 8.5.3
by Pierre (@pierregiraud)
on CodePen.

Pour ajouter un nouvel attribut ou changer la valeur d’un attribut existant pour un élément, nous allons cette fois-ci utiliser la méthode setAttribute() à laquelle on va passer en arguments le nom et la valeur de l’attribut à ajouter ou à modifier.

Notez que pour obtenir ou pour définir la valeur d’un attribut class ou id en particulier, on va également pouvoir utiliser les propriétés className et id de l’interface Element.

Code HTML support pour exemple d'utilisation de setAttribute en JavaScript avec le DOM

Présentation de la méthode JavaScript DOM setAttribute

Exemple d'utilisation de setAttribute en JavaScript pour définir de nouveaux attributs via le DOM

See the Pen
Cours JavaScript 8.5.4
by Pierre (@pierregiraud)
on CodePen.

 

Supprimer un attribut

Pour supprimer un attribut d’un élément, nous allons pouvoir utiliser la méthode removeAttribute() de l’interface Element. Cette méthode va prendre en argument le nom de l’attribut à supprimer.

Présentation de la méthode removeAttribute en JavaScript DOM

On supprime des attributs avec removeAttribute en JavaScript en utilisant le DOM

See the Pen
Cours JavaScript 8.5.5
by Pierre (@pierregiraud)
on CodePen.

 

Inverser la valeur logique d’un attribut

On va également pouvoir inverser la valeur logique d’un attribut de type booléen avec la méthode toggleAttribute() de Element. Cette méthode va pouvoir s’avérer très pratique pour activer ou désactiver des fonctions liées à la valeur d’un booléen.

 

Modifier les styles d’un élément

Finalement, on va pouvoir modifier les styles d’un élément grâce à la propriété style de l’interface HTMLElement qui est une interface représentant les nœuds de type Element seulement dans le document et qui hérite de Element.

Pour être tout à fait précis ici, vous devez savoir que le DOM possède une interface pour chaque élément HTML : l’interface HTMLFormElement pour les éléments de formulaire, l’interface HTMLAnchorElement pour les éléments de liens, l’interface HTMLDivElement pour les éléments div, etc.

Chaque interface spécifique à un élément va hériter de HTMLElement et donc, par extension, de Element, de Node et de EventTarget.

La propriété style de HTMLElement va nous permettre de définir les styles en ligne d’un élément (les styles vont être placés dans la balise ouvrante de l’élément directement).

Cette propriété retourne un objet à partir duquel on va pouvoir utiliser des propriétés JavaScript représentant les propriétés CSS. Ces propriétés respectent la norme lower camel case : elles doivent être écrites sans espace ni tiret, avec une majuscule au début de chaque mot sauf pour le premier : la propriété CSS background-color, par exemple, s’écrira backgroundColor.

Utilisation de la propriété JavaScript style du DOM et CSSOM

Exemple d"utilisation de la propriété JavaScript DOM style et modification des styles CSS d'un élément

See the Pen
Cours JavaScript 8.5.6
by Pierre (@pierregiraud)
on CodePen.

Laisser un commentaire