Définition
DOM (Document Object Model)
Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il représente la page afin que les programmes puissent modifier la structure du document, son style et son contenu.
Sélecteurs CSS
Les sélecteurs CSS sont utilisés pour choisir les éléments HTML à styliser. En JavaScript, les sélecteurs CSS peuvent être utilisés pour sélectionner des éléments dans le DOM.
Sélectionner des éléments avec JavaScript
Utilisation de document.getElementById()
La méthode document.getElementById() est la façon la plus simple de sélectionner un élément d'une page web par son identifiant unique. Il suffit de passer l'identifiant de l'élément en tant que chaîne à la fonction pour obtenir une référence directe à cet élément, sur laquelle vous pouvez ensuite travailler.
Utilisation de document.querySelector()
La méthode document.querySelector() permet de sélectionner le premier élément qui correspond à un sélecteur CSS spécifié. Elle est plus flexible que getElementById() car elle permet d'utiliser n'importe quel type de sélecteur CSS.
Utilisation de document.querySelectorAll()
La méthode document.querySelectorAll() retourne une collection statique (NodeList) des éléments qui correspondent au sélecteur CSS spécifié. Elle est utile pour sélectionner tous les éléments d'un certain type afin de les manipuler en bloc.
Manipuler les éléments sélectionnés
Modifier le contenu d'un élément
Une fois que vous avez sélectionné un élément, vous pouvez facilement modifier son contenu en utilisant la propriété innerHTML ou textContent. Cela permet d'ajouter ou de remplacer le texte ou le HTML à l'intérieur de cet élément.
Changer les styles d'un élément
Pour modifier les styles CSS d'un élément, vous pouvez utiliser la propriété style. Cela vous permet de changer les propriétés CSS directement dans le DOM. Par exemple, pour changer la couleur d'un texte, vous pouvez utiliser element.style.color = 'red'.
Ajouter des classes à un élément
Pour ajouter des classes CSS à un élément, vous pouvez utiliser la méthode classList.add(). Cela permet d'ajouter des classes supplémentaires à celles déjà existantes, ce qui est utile pour appliquer des styles prédéfinis dans une feuille de style.
A retenir :
La récupération d'un élément d'une page web avec JavaScript se fait en manipulant le DOM à l'aide de diverses méthodes comme document.getElementById(), document.querySelector() et document.querySelectorAll(). Ces méthodes permettent de sélectionner des éléments en fonction de leurs identifiants ou via des sélecteurs CSS. Une fois les éléments sélectionnés, on peut les manipuler en modifiant leur contenu, leurs styles ou leurs classes afin de créer des interactions dynamiques et réactives dans les applications web.
