JS : Sélectionner et modifier des éléments du DOM
Julien MA Jacob - Développeur WordPress

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il permet de manipuler la structure, le style et le contenu d'une page web en utilisant JavaScript. Dans cet article, nous allons examiner comment sélectionner et modifier des éléments du DOM en JavaScript.

Sélectionner des éléments du DOM

La sélection des éléments du DOM est la première étape pour pouvoir les manipuler avec JavaScript. Il existe plusieurs façons de sélectionner des éléments du DOM en JavaScript, notamment :

Sélection par ID

Pour sélectionner un élément en utilisant son ID, nous pouvons utiliser la méthode getElementById(). Cette méthode prend en paramètre l'ID de l'élément que nous souhaitons sélectionner. Voici un exemple :

var element = document.getElementById("monElement");

Sélection par classe

Pour sélectionner un élément en utilisant sa classe, nous pouvons utiliser la méthode getElementsByClassName(). Cette méthode prend en paramètre le nom de la classe que nous souhaitons sélectionner. Voici un exemple :

var elements = document.getElementsByClassName("maClasse");

Sélection par balise

Pour sélectionner un élément en utilisant sa balise, nous pouvons utiliser la méthode getElementsByTagName(). Cette méthode prend en paramètre le nom de la balise que nous souhaitons sélectionner. Voici un exemple :

var elements = document.getElementsByTagName("div");

Sélection par sélecteur CSS

Pour sélectionner un élément en utilisant un sélecteur CSS, nous pouvons utiliser la méthode querySelector(). Cette méthode prend en paramètre un sélecteur CSS. Voici un exemple :

var element = document.querySelector("#monElement .maClasse");

Vous pouvez retrouver les sélecteurs CSS détaillés dans cet article : CSS 🦄 Tous les sélecteurs CSS

Sélection par sélecteur CSS multiple

Pour sélectionner plusieurs éléments en utilisant des sélecteurs CSS multiples, nous pouvons utiliser la méthode querySelectorAll(). Cette méthode prend en paramètre des sélecteurs CSS séparés par des virgules. Voici un exemple :

var elements = document.querySelectorAll("div, span.maClasse");

Modifier des éléments du DOM

Une fois que nous avons sélectionné des éléments du DOM en utilisant JavaScript, nous pouvons les modifier en utilisant différentes méthodes. Voici quelques exemples :

Modifier le texte d'un élément

Pour modifier le texte d'un élément, nous pouvons utiliser la propriété textContent. Cette propriété permet de récupérer ou de définir le texte d'un élément. Voici un exemple :

var element = document.getElementById("monElement");
element.textContent = "Nouveau texte";

Modifier l'attribut d'un élément

Pour modifier l'attribut d'un élément, nous pouvons utiliser la méthode setAttribute(). Cette méthode prend en paramètre le nom de l'attribut que nous souhaitons modifier et sa nouvelle valeur. Voici un exemple :

var element = document.getElementById("monElement");
element.setAttribute("class", "nouvelleClasse");

Ajouter un élément

Pour ajouter un nouvel élément à une page web, nous pouvons utiliser la méthode createElement() pour créer un nouvel élément et la méthode appendChild() pour ajouter ce nouvel élément à un élément parent existant. Voici un exemple :

var parent = document.getElementById("monElementParent");
var nouvelElement = document.createElement("div");
parent.appendChild(nouvelElement);
Julien MA Jacob - Développeur WordPress
Développeur expert WordPress
Julien MA Jacob - Développeur WordPress

Passionné par le web et la programmation. Je propose mes services de développeur pour vos sites WordPress

  Les chapitres // JavaScript / JS 🔥 Guide du développeur
JS : Les commentaires

Voyons comment les commentaires permettent d'annoter le code JS avec les syntaxes // ... et /* ... */

JS : Les opérateurs

Les opérateurs arithmétiques, d'incrémentation / décrémentation, de comparaisons, logiques et d'affectations en JS

JS : Les conditions SWITCH

La condition SWITCH permet d'exécuter certains codes en fonction de la valeur d'une variable passée en paramètre

JS : Les conditions ternaires

Les ternaires en JS sont des conditions qui suivent le schéma SI ... SINON SI ... SINON, avec une syntaxe bien plus courte qu'une condition IF ... ELSE IF ... ELSE mais aussi plus limitée

JS : Les boucles FOR

La boucle FOR permet d'exécuter un code une ou plusieurs fois en fonction de la condition qui lui est passée en paramètre