Vous êtes probablement déjà familiers avec getElementById()
, getElementByTagName()
et getElementByName()
.
// Récupérer l'attribut "id" d'un élément document.getElementById('#id'); // Récupérer tous les éléments de la famille document.getElementByTagName('div'); // Récupérer les éléments qui possèdent // un attribut "name" que vous spécifiez document.getElementByName('nom');L'API Selectors introduit deux nouvelles méthodes pour interroger les DOM (
querySelector(), querySelectorAll()
).Maintenant, nous pouvons utiliser les sélecteurs CSS que vous êtes déjà familier avec Au niveau du DOM.
Support:
querySelector()
Cette fonction renvoie le premier élément trouvé correspondant au sélecteur CSS spécifié.// Trouver le premier élément avec un id = content document.querySelector('#content'); // Trouver le premier élément input qui a un attribut type document.querySelector('input[type]'); // trouver le premier élément li dans l'élémeny nav document.querySelector('nav li');
Un élément sélectionner peut également être utilisé sous forme de base, pour effectuer d'autres requêtes.
// Trouver le premier élément ayant un id = content var content = document.querySelector('#content'); // Trouver le premier élément li dans notre content content.querySelector('li');
querySelectorAll()
Lorsque vous n'avez besoin que d'un seul élément du DOM, utilisezquerySelector()
, il est optimisé dans ce but. Cependant, si nous avons besoin de capturer plusieurs éléments dans le DOM. Dans ces situations, querySelectorAll()
est le bon choix.Il va renvoyer tous les éléments (sous forme de tableau) correspondant au sélecteur CSS fourni.
// Select tous les éléments span document.querySelectorAll('span');
Pour sélectionner tous les éléments
span
et li
par exemple dans un document, vous pouvez simplement les séparées par des virgules.// Trouver le premier élément span ou bien li document.querySelector('span, li'); // Trouver les éléments span et li document.querySelectorAll('span, li');
Thanks you Déveur.
RépondreSupprimerDe rien Youssef :)
SupprimerMerci beaucoup
RépondreSupprimer