HTML DOM querySelector() Method

Exemple

Modifier le texte du premier élément enfant avec class = « exemple » dans un <div> élément:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.

Définition et utilisation

Le querySelector() méthode retourne le premier élément de garde qui correspond à un CSS spécifié selector(s) d'un élément.

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.

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

element .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 élément Selectors objet
Valeur de retour:	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

Modifier le texte du premier <p> élément dans un <div> élément:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Essayez vous - même »

Exemple

Modifier le texte du premier <p> élément avec class = « exemple » dans un <div> élément:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Essayez vous - même »

Exemple

Modifier le texte d'un élément avec id = « demo » dans un <div> élément:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Essayez vous - même »

Exemple

Ajouter une bordure rouge au premier <a> élément qui a un attribut cible dans un <div> élément:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

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 <div> :

<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Essayez vous - même »

Cependant, si le <h3> élément a été placé avant le <h2> élément <div> . Le <h3> élément est celui qui va obtenir la couleur de fond rouge.

<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Essayez vous - même »