Méthode querySelector() Document DOM HTML

Définition et utilisation

querySelector() La méthode renvoie les éléments correspondant au sélecteur CSSPremieréléments.

Pour retournerTousPour correspondre à des éléments correspondants (et non pas seulement au premier), utilisez querySelectorAll().

lance une exception si le sélecteur est invalide. querySelector() et querySelectorAll() tous SYNTAX_ERR Exception.

Exemple

Exemple 1

Obtenir le premier élément <p> :

document.querySelector("p");

Essayez-le vous-même

Exemple 2

Obtenir le premier élément avec la classe "example" :

document.querySelector(".example");

Essayez-le vous-même

Exemple 3

Obtenir le premier élément <p> avec la classe "example" :

document.querySelector("p.example");

Essayez-le vous-même

Exemple 4

Modifier le texte de l'élément avec id="demo" :

document.querySelector("#demo").innerHTML = "Hello World!";

Essayez-le vous-même

Exemple 5

Sélectionnez le premier élément <p> dont l'élément parent est <div> :

document.querySelector("div > p");

Essayez-le vous-même

Exemple 6

Sélectionnez le premier élément <a> possédant l'attribut "target" :

document.querySelector("a[target]");

Essayez-le vous-même

Exemple 7

Sélectionnez le premier <h3> ou le premier <h4> :

<h3>Un élément h3</h3>
<h4>Un élément h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Essayez-le vous-même

Exemple 8

Sélectionnez le premier <h3> ou le premier <h4> :

<h4>Un élément h4</h4>
<h3>Un élément h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Essayez-le vous-même

Syntaxe

document.querySelector(cssSelectors)

Paramètre

Paramètre Description
cssSelectors

Obligatoire. Un ou plusieurs sélecteurs CSS.

Les sélecteurs CSS sélectionnent des éléments HTML en fonction de l'ID, de la classe, du type, des attributs, des valeurs d'attributs, etc.

Pour une liste complète, visitez notre Manuel de sélecteurs CSS.

Pour plusieurs sélecteurs, séparez-les par des virgules (consultez l'exemple en haut de la page).

Valeur de retour

Type Description
Objet

NodeList contenant le premier élément correspondant au sélecteur CSS.

Retourne null si aucun élément correspondant n'est trouvé.

La différence entre HTMLCollection et NodeList

NodeList et HTMLcollection Très similaires.

Les deux sont des collections de nœuds (éléments) extraits du document sous forme de collections de tableaux (listes) similaires. Les nœuds peuvent être accédés par leur numéro d'index (index). L'index commence à 0.

Les deux ont length Propriété, qui retourne le nombre d'éléments (ensemble) dans la liste (ensemble).

L'HTMLCollection estÉlément de documentdu ensemble.

Le NodeList estNœud de documentdu ensemble (nœuds d'élément, nœuds d'attribut et nœuds de texte).

Les éléments de l'HTMLCollection peuvent être accédés par leur nom, leur id ou leur numéro d'index.

Les éléments du NodeList ne peuvent être accédés que par leur numéro d'index.

L'HTMLCollection est toujoursEn temps réeldu ensemble.

Par exemple : si vous ajoutez un élément <li> à une liste dans le DOM, la liste de l'HTMLCollection changera également.

Le NodeList est généralementStatiquedu ensemble.

Par exemple : si vous ajoutez un élément <li> à une liste dans le DOM, la liste du NodeList ne changera pas.

getElementsByClassName() et getElementsByTagName() Toutes les méthodes retournent un HTMLCollection en temps réel.

querySelectorAll() La méthode retourne un NodeList statique.

childNodes L'attribut retourne un NodeList en temps réel.

Support du navigateur

document.querySelector() C'est une caractéristique de DOM Level 1 (1998).

Tous les navigateurs le supportent :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Pages associées

Tutoriel :

Sélecteurs CSS

Manuel de sélecteurs CSS

Manuel de NodeList DOM HTML

Méthode QuerySelector :

Méthode querySelector()

Méthode querySelectorAll()

Méthode GetElement :

Méthode getElementById()

Méthode getElementsByTagName()

Méthode getElementsByClassName()