méthode HTML DOM querySelector ()

Exemples

L'id premier élément enfant contenu du texte de modification = "demo" de l'élément <div>:

var x = document.getElementById ( "myDiv");
x.querySelector ( "# demo") innerHTML = "Bonjour tout le monde!" .;

Définition et utilisation

querySelector () retourne le sélecteur CSS spécifié premier élément enfant élément correspondant.

Remarque: La méthode querySelector () retourne simplement le premier élément qui correspond au sélecteur spécifié. Si vous voulez récupérer tous les éléments correspondants, utilisez la méthode querySelectorAll () à la place.

Pour plus de sélecteurs CSS, vous pouvez visiter 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

élément .querySelector (Les 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 Élément d'objet
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

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

var x = document.getElementById ( "myDiv");
x.querySelector ( "p") innerHTML = "Bonjour tout le monde!" .;

Essayez »

Exemples

Modifier <div> dans la première class = "exemple" contenu sous-élément:

var x = document.getElementById ( "myDiv");
x.querySelector ( «exemple».) innerHTML = "Bonjour tout le monde!" .;

Essayez »

Exemples

Modifier <div> dans la première class = "exemple" de l'élément <p>:

var x = document.getElementById ( "myDiv");
x.querySelector ( "p.example") innerHTML = "Bonjour tout le monde!" .;

Essayez »

Exemples

Ajouter une bordure rouge comme un élément <div> a les éléments d'une première cible attribut:

var x = document.getElementById ( "myDiv");
. X.querySelector ( «un [cible]") style.border = "rouge 10px solide";

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.

Les premiers <h2> pour l'élément suivant code <div> pour ajouter une couleur de fond:

<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 »

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

<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 »