Manipulation du DOM

Accéder aux éléments du DOM

Le DOM (Document Object Model) est la représentation de la page HTML en JavaScript. Voici comment accéder aux éléments :

Sélectionner un élément avec querySelector

// Sélectionne le premier élément correspondant au sélecteur CSS donné
const element = document.querySelector('.someclass');
console.log(element); // Affiche l'élément sélectionné

Sélectionner plusieurs éléments avec querySelectorAll

// Sélectionne tous les éléments correspondant au sélecteur CSS donné
const elements = document.querySelectorAll('.someclass');

// On peut parcourir cette liste avec forEach
elements.forEach(function(el) {
    console.log(el); // Affiche chaque élément trouvé
});

Remarque : querySelectorAll retourne une NodeList, qui n'est pas un tableau, mais peut être parcourue avec forEach().

Manipulation des classes CSS

Les classes permettent de modifier l'apparence d'un élément via CSS. Voici comment les manipuler avec JavaScript :

Ajouter et retirer des classes dynamiquement

const element = document.querySelector('.my-element');

// Ajouter une classe
element.classList.add('active');

// Retirer une classe
element.classList.remove('active');

// Basculer une classe (ajoute si absente, retire si présente)
element.classList.toggle('visible');

Manipulation des attributs HTML

Les attributs HTML permettent d'ajouter des propriétés aux éléments. Voici comment les gérer avec JavaScript :

Obtenir, définir et supprimer des attributs

const lien = document.querySelector('a');

// Obtenir la valeur d'un attribut (ex: href d'un lien)
const url = lien.getAttribute('href');
console.log(url);

// Définir un attribut (modifie le href du lien)
lien.setAttribute('href', '<https://example.com>');

// Vérifier si un attribut existe
if (lien.hasAttribute('target')) {
    console.log('L’attribut target existe');
}

// Supprimer un attribut
lien.removeAttribute('target');