Aller au contenu

Manipuler les attributs HTML en Javascript

On se rappelle qu'un élément HTML peu avoir des attributs, comme par exemple les attributs id, src et alt de la balise image suivante : 

<img src="assets/images/background.jpg" alt="Image de Drummer" id="img-fond">

On peut en Javascript accéder à ces attributs et les manipuler grâce à diverses méthodes.

  • element.hasAttribute("nomAttribut") : Vérifier si l'attribut existe
  • element.getAttribute("nomAttribut") : Récupérer la valeur de l'attribut
  • element.setAttribute("nomAttribut", "saValeur") : Ajouter ou modifier la valeur d'un attribut
  • element.removeAttribute("nomAttribut") : Supprimer un attribut

Prenons par exemple un div avec seulement un attribut id

HTML

<div id="demo"></div>

JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// Je récupère la div dans une variable
let divDemo = document.getElementById("demo");

console.log(divDemo.hasAttribute('id')); // true
console.log(divDemo.hasAttribute('title')); // false

console.log(divDemo.getAttribute('id')); // demo
console.log(divDemo.getAttribute('title')); // null

console.log(divDemo.setAttribute('title', 'Ma div principale'));
console.log(divDemo.getAttribute('title')); // Ma div principale

console.log(divDemo.removeAttribute('title'));
console.log(divDemo.getAttribute('title')); // null

Ajouter ou supprimer une classe

Pour travailler avec les classes d'un élément on va plutôt utiliser la propriété classsList. Cette propriété contient plusieurs méthodes qu'on peut utiliser pour modifier les classes :

Exemple classList
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// Je récupère la div dans une variable
let divDemo = document.getElementById("demo");

// Ajoute la classe nouvelleClasse
divDemo.classList.add("nouvelleClasse");

// Supprime la classe ancienneClasse
divDemo.classList.remove("ancienneClasse");

// Ajout la classe visible si elle n'est pas déjà présente, sinon la supprime
divDemo.classList.toggle("visible");

// Remplace la classe rouge par bleu
divDemo.classList.replace("rouge", "bleu");

// Teste si la classe patate existe, retourne true ou false
console.log(divDemo.classList.contains("patate"));

Les attributs data

Une chose vraiment utile avec les attributs est qu'on peut en ajouter des personnalisés. Il suffit d'utiliser le préfix data- suivi du nom de l'attribut que l'on veut ajouter dans la balise de l'élément html.

HTML

<div data-key="65" class="note">
    ...
</div>

JS

let note = document.querySelector('.note');

console.log(note.getAttribute('data-key')); // 65