Latest web development tutorials

méthode HTML DOM querySelector ()

Document Object Reference Document Object

Exemples

Obtenez le premier élément du document id = "demo" de:

document.querySelector ( "# demo");

Essayez »

Définition et utilisation

querySelector () retourne un élément dans le document qui correspondent au sélecteur CSS spécifié.

Remarque: La méthode querySelector () retourne simplement le premier élément qui correspond au sélecteur spécifié. Si vous avez besoin de retourner tous les éléments, utilisez la méthode querySelectorAll () à la place.

Plus sélecteurs CSS, s'il vous plaît visitez nos sélecteurs CSS tutoriel et nos sélecteurs CSS manuel de référence .


support du navigateur

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la méthode.

manière
querySelector () 4.0 8.0 3.5 3.1 10.0


grammaire

document.querySelector (sélecteurs CSS)

Paramètre Valeur

Paramètres type description
sélecteurs CSS chaîne Must. Spécifiez un ou plusieurs éléments correspondants dans les sélecteurs CSS. Vous pouvez utiliser leurs id, classes, types, les attributs, les valeurs des attributs, etc. pour sélectionner des éléments.

Pour plusieurs sélecteurs, séparés par des virgules, pour retourner un élément correspondant.

Astuce: Pour plus de sélecteurs CSS, s'il vous plaît voir nos sélecteurs CSS manuel de référence .

détails techniques

Version DOM: Niveau sélecteurs 1 Document Object
Retours: Le premier élément correspondant spécifié sélecteur CSS. Si non trouvé, renvoie null. Si vous spécifiez une exception sélecteur de SYNTAX_ERR non valide est levée.


D'autres exemples

Exemples

Être le premier document dans un élément <p>:

document.querySelector ( "p");

Essayez »

Exemples

Obtenez la classe de document = "exemple" le premier élément:

document.querySelector ( "exemple.");

Essayez »

Exemples

Obtenez la classe de document = "exemple" le premier élément <p>:

document.querySelector ( «p.example»);

Essayez »

Exemples

Accéder au document est "cible" attribuer des premiers éléments de <a>:

document.querySelector ( «un [cible]");

Essayez »

Exemples

L'exemple suivant illustre l'utilisation d'une pluralité de sélecteurs.

Supposons que vous choisissez les deux sélecteurs: <h2> et <h3> élément.

Le premier élément <h2> dans le code suivant ajoutera une couleur du document de fond:

<H2> Un élément h2 </ h2>
<H3> Un élément h3 </ h3>

document.querySelector ( "h2, h3") style.backgroundColor = "red" .;

Essayez »

Toutefois, si votre document <h3> est <h2> élément avant, <h3> élément seront fixés pour spécifier la couleur d'arrière-plan.

<H3> Un élément h3 </ h3>
<H2> Un élément h2 </ h2>

document.querySelector ( "h2, h3") style.backgroundColor = "red" .;

Essayez »


Pages associées

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


Document Object Reference Document Object