Méthode querySelector() de l'élément DOM HTML

Définition et utilisation

querySelector() La méthode renvoie le premier élément fils correspondant au sélecteur CSS spécifié de l'élément.

Attention :

querySelector() La méthode renvoie uniquement le premier élément correspondant au sélecteur spécifié. Pour obtenir toutes les correspondances, utilisez plutôt Méthode querySelectorAll().

Veuillez également consulter :

Manuel de référence :

Attribut classList

Attribut className

Méthode querySelectorAll()

Méthode getElementsByTagName()

Méthode getElementsByClassName()

Objet Style HTML DOM

Tutoriel :

Syntaxe CSS

Sélecteurs CSS

Manuel de référence des sélecteurs CSS

Exemple

Exemple 1

Modifier le texte du premier élément fils avec la classe="example" dans l'élément <div> :

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

Essayez-le vous-même

Des exemples supplémentaires sont fournis en bas de page.

Syntaxe

element.querySelector(CSSselectors)

Paramètres

Paramètres Description
CSSselectors

Obligatoire. Chaîne. Spécifiez un ou plusieurs sélecteurs CSS pour correspondre aux éléments.

Les sélecteurs CSS sont utilisés pour sélectionner des éléments HTML en fonction de l'id, de la classe, du type, des attributs, des valeurs d'attributs, etc.

Pour plusieurs sélecteurs, séparez-les par des virgules.

L'élément retourné dépend du premier élément trouvé dans le document (voir les "plus d'exemples" ci-dessous).

Avis :Pour une liste complète des sélecteurs CSS, veuillez consulter notre Manuel de référence des sélecteurs CSS.

Détails techniques

Valeur de retour :

Correspond à l'élément premier correspondant au sélecteur CSS spécifié.

Si aucune correspondance n'est trouvée, retourne null.

Si le sélecteur spécifié est invalide, une exception SYNTAX_ERR est lancée.
Version du DOM : Objectif de niveau 1 des sélecteurs

Plus d'exemples

Exemple 2

Modifier le texte de la première balise <p> dans l'élément <div> :

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

Essayez-le vous-même

Exemple 3

Modifier le texte de la première balise <p> avec la classe="example" dans l'élément <div> :

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

Essayez-le vous-même

Exemple 4

Modifier le texte de l'élément avec l'id="demo" dans l'élément <div> :

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

Essayez-le vous-même

Exemple 5

Ajoutez une bordure rouge à l'élément <a> premier avec l'attribut target à l'intérieur de l'élément <div> :

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

Essayez-le vous-même

Exemple 6

Cet exemple montre comment plusieurs sélecteurs fonctionnent.

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

Le code suivant ajoutera une couleur de fond à l'élément <h2> premier dans <div> :

<div id="myDIV">
  <h2>Un élément h2</h2>
  <h3>Un élément h3</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Essayez-le vous-même

Exemple 7

Cependant, si l'élément <h3> dans <div> est placé avant l'élément <h2> . L'élément <h3> recevra une couleur de fond rouge.

<div id="myDIV">
  <h3>Un élément h3</h3>
  <h2>Un élément h2</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Essayez-le vous-même

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette méthode pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

Pages associées

Tutoriel CSS :Sélecteurs CSS

Manuel de référence CSS :Manuel de référence des sélecteurs CSS

Tutoriel JavaScript :Liste de nœuds HTML DOM JavaScript

Manuel de référence JavaScript :document.querySelector()

Manuel de référence JavaScript :element.querySelectorAll()

Manuel de référence HTML DOM :document.querySelectorAll()