Exemple
Obtenez le premier élément dans le document avec class = « exemple »:
document.querySelector(".example"); Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Le querySelector() méthode retourne le premier élément correspondant à un CSS spécifié selector(s) dans le document.
Remarque: Le querySelector() méthode renvoie seulement le premier élément qui correspond aux sélecteurs spécifiés. Pour revenir tous les matchs, utilisez la querySelectorAll() méthode à la place.
Si le sélecteur correspond à un ID dans le document qui est utilisé plusieurs fois (Notez qu'un "id" doit être unique dans une page et ne doit pas utiliser plus d'une fois), elle renvoie le premier élément correspondant.
Pour plus d' informations sur CSS Selectors, visitez notre CSS Selectors Tutorial et notre CSS Selectors Référence .
Support du navigateur
Les chiffres du tableau indique la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
Syntaxe
document.querySelector( CSS selectors )Les valeurs des paramètres
| Paramètre | Type | La description |
|---|---|---|
| CSS selectors | String | Champs obligatoires. Indique un ou plusieurs sélecteurs CSS pour correspondre à l'élément. Ceux-ci sont utilisés pour sélectionner des éléments HTML en fonction de leur identité, les classes, les types, les attributs, les valeurs des attributs, etc. Pour plusieurs sélecteurs, chaque sélecteur séparer par une virgule. L'élément retourné dépend de l'élément qui est d' abord dans le document (See "More Examples") . Astuce: Pour une liste de tous les sélecteurs CSS, consultez notre CSS Selectors Référence . |
Détails techniques
| DOM Version: | Niveau 1 Selectors document objet |
|---|---|
| Valeur de retour: | Un objet NodeList, ce qui représente le premier élément qui correspond à la CSS spécifié selector(s) . Si aucune correspondance ne trouve, null est retourné. Lance une exception si le SYNTAX_ERR spécifié selector(s) est invalide. |
autres exemples
Exemple
Obtenez le premier <p> élément dans le document:
document.querySelector("p"); Essayez vous - même » Exemple
Obtenez le premier <p> élément dans le document avec class = « exemple »:
document.querySelector("p.example"); Essayez vous - même » Exemple
Modifier le texte d'un élément avec id = « demo »:
document.querySelector("#demo").innerHTML = "Hello World!";
Essayez vous - même » Exemple
Obtenez le premier <p> élément dans le document où le parent est un <div> élément.
document.querySelector("div > p"); Essayez vous - même » Exemple
Obtenez le premier <a> élément dans le document qui a une "target" attribut:
document.querySelector("a[target]"); Essayez vous - même » Exemple
Cet exemple montre comment plusieurs sélecteurs fonctionnent.
Supposons que vous avez deux éléments: un <h2> et un <h3> élément.
Le code suivant ajoutera une couleur de fond à la première <h2> élément dans le document:
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2,
h3").style.backgroundColor = "red"; Essayez vous - même » Cependant, si le <h3> élément a été placé avant le <h2> élément dans le document. Le <h3> élément est celui qui va obtenir la couleur de fond rouge.
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2,
h3").style.backgroundColor = "red"; Essayez vous - même » Pages associées
Tutoriel CSS: CSS Selectors
CSS Référence: CSS Selectors Référence
JavaScript Tutoriel: HTML JavaScript DOM liste Node
JavaScript Référence: élément. querySelector()
HTML DOM Référence: document. querySelectorAll()
JavaScript Référence: élément. querySelectorAll()