D- 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
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).
- 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 .
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.
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.
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.
- 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.
- 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.
