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);
