Requêtes facile avec l'API Selectors

Vous êtes probablement déjà familiers avec getElementById(), getElementByTagName() et getElementByName().

// Récupérer l'attribut "id" d'un élément
document.getElementById('#id');
// Récupérer tous les éléments de la famille
document.getElementByTagName('div');
// Récupérer les éléments qui possèdent
// un attribut "name" que vous spécifiez
document.getElementByName('nom');

L'API Selectors introduit deux nouvelles méthodes pour interroger les DOM (querySelector(), querySelectorAll()).
Maintenant, nous pouvons utiliser les sélecteurs CSS que vous êtes déjà familier avec Au niveau du DOM.

Support:

querySelector()

Cette fonction renvoie le premier élément trouvé correspondant au sélecteur CSS spécifié.

// Trouver le premier élément avec un id = content
document.querySelector('#content');
 
// Trouver le premier élément input qui a un attribut type
document.querySelector('input[type]');
 
// trouver le premier élément li dans l'élémeny nav
 document.querySelector('nav li');

Un élément sélectionner peut également être utilisé sous forme de base, pour effectuer d'autres requêtes.

// Trouver le premier élément ayant un id = content
var content = document.querySelector('#content');

// Trouver le premier élément li dans notre content
content.querySelector('li');

querySelectorAll()

Lorsque vous n'avez besoin que d'un seul élément du DOM, utilisez querySelector(), il est optimisé dans ce but. Cependant, si nous avons besoin de capturer plusieurs éléments dans le DOM. Dans ces situations, querySelectorAll() est le bon choix.
Il va renvoyer tous les éléments (sous forme de tableau) correspondant au sélecteur CSS fourni.

// Select tous les éléments span
document.querySelectorAll('span');

Pour sélectionner tous les éléments span et li par exemple dans un du document, vous pouvez simplement les séparées par des virgules.

// Trouver le premier élément span ou bien li
document.querySelector('span, li');

// Trouver les éléments span et li
document.querySelectorAll('span, li');