Obtenir un élément basé sur le nom de la classe en JavaScript
-
Obtenez un élément basé sur son nom de classe CSS avec la fonction Javascript
.getElementsByClassName() -
Obtenir un élément basé sur le nom de la classe CSS avec la fonction Javascript
.querySelector() -
Obtenez plusieurs éléments HTML basés sur le nom de la classe CSS avec la fonction
.querySelectorAll()
Nous pouvons avoir besoin d’interroger un élément du DOM pour changer son style dynamiquement au moment de l’exécution. Javascript a diverses fonctions intégrées qui peuvent servir notre objectif. Le plus célèbre d’entre eux est le .getElementById(). Mais .getElementById() ne renvoie qu’un seul élément, le premier élément, dont le HTML id correspond au paramètre passé dans la fonction. L’approche de la fonction .getElementById() peut être lourde si nous devons changer les styles de plusieurs éléments en même temps. Cela impliquera d’ajouter plusieurs identifiants aux éléments HTML et de les interroger un à la fois. Pouvons-nous le faire d’une meilleure façon? La section suivante explique comment obtenir des éléments du DOM en fonction de son nom de classe CSS.
Obtenez un élément basé sur son nom de classe CSS avec la fonction Javascript .getElementsByClassName()
Javascript a une méthode intégrée .getElementsByClassName() qui nous permet de rechercher plusieurs éléments HTML en fonction de leur nom de classe CSS. C’est une méthode disponible dans l’interface Document et est généralement utilisée dessus comme document.getElementsByClassName(). La fonction recherchera dans le document (le DOM) tous les éléments avec le nom de classe CSS spécifié dans les paramètres de la fonction.
Conformément aux MDN Docs, la fonction renvoie la collection en direct d’éléments HTML. Cela signifie que les éléments renvoyés par la fonction getElementsByClassName() peuvent être modifiés à l’exécution s’il existe des morceaux de code modifiant directement les éléments du DOM.
Syntaxe getElementsByClassName
let el = document.getElementsByClassName(cssClassName);
Le cssClassName doit être une chaîne représentant la classe CSS souhaitée. S’il y a plusieurs classes CSS, on peut les mentionner séparées par des espaces (comme css-class1 css-class2 etc.)
Arguments getElementsByClassName
La fonction prend un paramètre, le nom de la classe CSS. Dans certains cas, nous pouvons exiger une combinaison de noms de classes CSS pour sélectionner un élément. Dans de tels scénarios, nous pouvons transmettre plusieurs noms de classes CSS séparés par des espaces.
Exemple
Référons-nous au morceau de code suivant pour comprendre le fonctionnement.
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.getElementsByClassName('bold');
console.log(els);
}
Production:
HTMLCollection(2) [div.bold, div.bold]
Le code ci-dessus enregistrera une collection d’éléments HTML dans la console. La console Google Chrome affichera une sortie comme indiqué ci-dessus. L’écriture du code document.getElementsByClassName("bold") à l’intérieur du window.onload garantit que le code ne s’exécute qu’une fois le code HTML rendu. Notez que contrairement à la fonction .getElementById(), la fonction getElementsByClassName() renvoie un tableau d’éléments HTML. On ne peut pas travailler directement sur l’élément, sorti par le getElementsByClassName() comme on le fait pour .getElementById(). Si nous devons changer le style bold dans le code ci-dessus en normal pour le premier élément, nous pouvons utiliser le code suivant.
let els = document.getElementsByClassName('bold');
els[0].style.fontWeight = '100';
Obtenir un élément basé sur le nom de la classe CSS avec la fonction Javascript .querySelector()
getElementsByClassName() est une méthode largement utilisée et se limite à sélectionner des éléments HTML en fonction de leur nom de classe CSS. Javascript a une autre fonction intégrée disponible dans l’interface Document, le querySelector(), qui est de nature plus générique. Il peut être utilisé pour interroger un élément en fonction de son nom de classe CSS. Cette fonctionnalité n’est qu’un sous-ensemble des capacités réelles de querySelector(). La fonction Javascript querySelector() est comparable à .getElementById() car elle renvoie le premier élément qui satisfait le paramètre de sélection passé dans ses arguments.
Syntaxe .querySelector()
La syntaxe est similaire à celle de .getElementsByClassName().
let el = document.querySelector('.cssQuerySelector');
Paramètres .querySelector()
Le querySelector() accepte un type de données chaîne comme paramètre représentant le css query selector. De la même manière que nous utilisons les sélecteurs CSS pour appliquer des styles particuliers aux éléments sélectionnés. Il inclut #<id> pour sélectionner un élément HTML en fonction de son identifiant, .<css-class-name> pour sélectionner un élément en fonction de son nom de classe de style CSS et même une combinaison des deux, comme #<id>.<css-class-name>, peut être utilisé pour sélectionner un élément.
Exemple
Le code suivant explique l’utilisation de .querySelector().
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.querySelector('.bold');
console.log(els);
}
Production:
<div class="bold">Element 1: Bolder text</div>
La sortie est telle qu’elle apparaît dans la console du navigateur Google Chrome. Notez que la fonction .querySelector() renvoie un seul élément HTML contrairement à .getElementsByClassName() qui en renvoie une collection. Par conséquent, si nous devons le traiter, nous pouvons lui appliquer directement les modifications. Par exemple, si nous devons changer la police de l’élément sélectionné en normale, nous pouvons y parvenir en utilisant le code suivant.
window.onload = function() {
let els = document.querySelector('.bold');
els.style.fontWeight = '100';
}
Obtenez plusieurs éléments HTML basés sur le nom de la classe CSS avec la fonction .querySelectorAll()
Comme son nom l’indique, la fonction .querySelectorAll() en Javascript renvoie une collection d’éléments HTML qui satisfont aux critères de sélection. Tout comme le .querySelector(), le querySelectorAll() accepte la chaîne de sélection de requête CSS comme paramètre. Il renvoie une liste statique d’éléments HTML, qui ne sont pas actifs. Il se comporte de la même manière que .getElementsByClassName() car il renvoie plusieurs éléments HTML interrogés en fonction de celui-ci, mais ne s’y limite pas. Tout comme le querySelector(), nous pouvons utiliser le .querySelectorAll() pour obtenir des éléments en fonction de leurs identifiants ou des noms de classe CSS. Tout comme nous sélectionnons des éléments avec les sélecteurs de requête dans les feuilles de style CSS.
Syntaxe .querySelectorAll()
document.querySelectorAll('<css-selector-string>');
Paramètres .querySelectorAll()
La fonction accepte une chaîne de requête CSS comme seul paramètre d’entrée. Pour sélectionner des éléments en fonction de l’id, il faut utiliser le paramètre #<id>. Et pour la sélection basée sur le nom de la classe CSS, il devrait être .<css-class-name>. Pour combiner les deux, nous pouvons utiliser le format #<id>.<css-class-name>.
Exemple
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
console.log(els);
Production:
NodeList(2)
0: div.bold
1: div.bold
La sortie est un tableau de type node list. Nous pouvons traiter davantage ces nœuds en les sélectionnant dans le tableau et en modifiant leurs valeurs de classe CSS selon les besoins. Un exemple est illustré par le code suivant. La ligne els[0].style.fontWeight = "100"; rendra le premier nœud HTML sélectionné à un poids de police normal.
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
els[0].style.fontWeight = '100';
console.log(els);
Production:
NodeList(2)
0: div.bold
1: div.bold