Document HTML DOM querySelector()
Exemples
Obtenez le premier élément <p> :
document.querySelector("p");
Obtenez le premier élément avec class="example":
document.querySelector(".example");
Plus d'exemples ci-dessous.
Définition et utilisation
La querySelector()méthode renvoie le premier élément qui correspond à un sélecteur CSS.
Pour renvoyer toutes les correspondances (pas seulement la première), utilisez querySelectorAll()plutôt le .
Les deux querySelector()et querySelectorAll()renvoient une NodeList .
Les deux querySelector()et querySelectorAll()lèvent une exception SYNTAX_ERR si le ou les sélecteurs ne sont pas valides.
Tutoriels :
Le tutoriel des sélecteurs CSS
La référence des sélecteurs CSS
Le didacticiel de la liste de nœuds JavaScript
Méthodes QuerySelector :
La méthode de l'élément querySelector()
La méthode de l'élément querySelectorAll()
La méthode document querySelector()
La méthode Document querySelectorAll()
Méthodes GetElement :
La méthode Document getElementById()
Liste de nœuds HTML DOM / HTMLCollection
Les différences entre une HTMLCollection et une NodeList
Une NodeList et une HTMLCollection sont toutes deux des collections de type tableau (listes) de nœuds (éléments) extraits d'un document. Les nœuds sont accessibles par des numéros d'index. L'indice commence à 0.
Les deux objets ont une propriété length qui renvoie le nombre d'éléments dans la liste.
Une HTMLCollection est une collection dynamique : si vous ajoutez un élément <li> à une liste dans le DOM, la liste dans la HTMLCollection changera également.
Une NodeList est une collection statique : Si vous ajoutez un élément <li> à une liste dans le DOM, la liste dans NodeList ne changera pas.
Les méthodes getElementsByClassName()et getElementsByTagName()
renvoient une HTMLCollection.
Les méthodes querySelector()et querySelectorAll()
renvoient une NodeList.
Syntaxe
document.querySelector(CSS selectors)
Paramètres
| Parameter | Description |
| CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Valeur de retour
| Taper | La description |
| Objet | Une NodeList avec le premier élément qui correspond au(x) sélecteur(s) CSS. Si aucune correspondance n'est trouvée, nullest retourné. |
Plus d'exemples
Obtenez le premier élément <p> avec class="example":
document.querySelector("p.example");
Changez le texte de l'élément avec id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Sélectionnez le premier élément <p> dont le parent est un élément <div>.
document.querySelector("div > p");
Sélectionnez le premier élément <a> qui a un attribut "target" :
document.querySelector("a[target]");
Sélectionnez le premier <h3> ou le premier <h4> :
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Sélectionnez le premier <h3> ou le premier <h4> :
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Prise en charge du navigateur
document.querySelector() est une fonctionnalité DOM niveau 1 (1998).
Il est entièrement pris en charge dans tous les navigateurs :
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |