Méthode HTML DOM querySelector()

Exemple

Modifiez le texte du premier élément enfant avec class="example" dans un élément <div> :

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

Plus d'exemples "Essayez-le vous-même" ci-dessous.

Définition et utilisation

La méthode querySelector() renvoie le premier élément enfant qui correspond à un ou plusieurs sélecteurs CSS spécifiés d'un élément.

Remarque : La méthode querySelector() ne renvoie que le premier élément qui correspond aux sélecteurs spécifiés. Pour renvoyer toutes les correspondances, utilisez plutôt la méthode querySelectorAll() .

Pour plus d'informations sur les sélecteurs CSS, consultez notre didacticiel sur les sélecteurs CSS et notre référence sur les sélecteurs CSS .

Prise en charge du navigateur

Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la méthode.

Method
querySelector()	4.0	8.0	3.5	3.2	10.0

Syntaxe

element.querySelector(CSS selectors)

Valeurs des paramètres

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Détails techniques

Version DOM :	Sélecteurs Niveau 1 Elément Objet
Valeur de retour :	Le premier élément qui correspond au(x) sélecteur(s) CSS spécifié(s). Si aucune correspondance n'est trouvée, null est renvoyé. Lève une exception SYNTAX_ERR si le ou les sélecteurs spécifiés ne sont pas valides.

Plus d'exemples

Exemple

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

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

Exemple

Changez le texte du premier élément <p> avec class="example" dans un élément <div> :

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

Exemple

Changez le texte d'un élément avec id="demo" dans un élément <div> :

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

Exemple

Ajoutez une bordure rouge au premier élément <a> qui a un attribut cible à l'intérieur d'un élément <div> :

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

Exemple

Cet exemple montre comment fonctionnent plusieurs sélecteurs.

Supposons que vous ayez deux éléments : un élément <h2> et un élément <h3>.

Le code suivant ajoutera une couleur d'arrière-plan au premier élément <h2> dans <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";

Cependant, si l'élément <h3> a été placé avant l'élément <h2> dans <div>. L'élément <h3> est celui qui aura 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";