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>

// 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é classList. Cette propriété contient plusieurs méthodes qu'on peut utiliser pour modifier les classes :

// 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

On peut créer nos propre attribut dans une balise html et les utiliser entre autre pour stocker des informations reliées à la balise. Par convention le nom de l'attribut commencera par data- suivi du nom que vous voulez utiliser. Ensuite on peut y accéder en JavaScript de la même manière que les autres attributs.

html

<!-- Ón ajoute l'attribut data-key à la div et lui donne la valeur 65 -->
<div data-key="65" class="note">
    ...
</div>

JavaScript

// Sélection du premier élément avec la classe note
let note = document.querySelector('.note');
// Récupération de la valeur de l'attribut data-key de cet élément
console.log(note.getAttribute('data-key')); // 65