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).
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.
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.
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.
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.
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.
See the Pen
Cours JavaScript 8.5.6 by Pierre (@pierregiraud)
on CodePen.
