logo oujood
🔍

jQuery sélecteur * : sélectionner tous les éléments

Le sélecteur * cible chaque élément du document — ou uniquement les descendants d'un élément parent si on le combine avec un autre sélecteur.

OUJOOD.COM

Définition et utilisation du sélecteur *

Utilisé seul, le sélecteur * sélectionne tous les éléments du document sans exception : <html>, <head>, <body>, <script>, <style> et tout ce qu'ils contiennent.

Combiné à un élément parent — comme dans $("body *") — il ne sélectionne que les descendants de cet élément, pas le reste du document. C'est cette forme combinée qu'on utilise en pratique, car cibler l'intégralité du DOM avec $("*") seul est coûteux en performance et rarement utile.

Syntaxe

$("*")

Exemple : sélectionner tous les éléments à l'intérieur de <body>

Ce code applique un fond jaune à chaque élément du <body> et affiche leur nombre en haut de la page. Les nœuds texte bruts — ceux qui ne sont pas encadrés par une balise HTML — ne sont pas ciblés par $("body *").

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery sélecteur * — démonstration</title>
  <!-- jQuery 4.0.0 — version stable actuelle depuis janvier 2026 -->
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
  $(document).ready(function() {
    // Applique un fond jaune à tous les descendants du body
    $("body *").css("background-color", "#ffa");
    // Compte et affiche le nombre d'éléments trouvés
    var nb = $("body *").length;
    $("body").prepend("<h3>" + nb + " éléments trouvés</h3>");
  });
  </script>
</head>
<body>
  <h1>Ce titre sera sélectionné.</h1>
  <p class="intro">Ce paragraphe avec classe sera sélectionné.</p>
  <p>Ce paragraphe sera sélectionné.</p>
  <p>Cet autre paragraphe sera sélectionné.</p>
  Ce texte n'est pas dans une balise — il ne sera pas sélectionné. <br />
  Tous les éléments sélectionnés prendront un fond jaune. <br />
  <ul id="liste">
    <li>Livres</li>
    <li>Cahiers</li>
    <li>Stylos</li>
  </ul>
</body>
</html>

Pour cibler l'ensemble du document plutôt que les seuls descendants du <body>, remplacez $("body *") par $("*"). Le fond jaune s'appliquera alors à tous les éléments sans exception, y compris <html> et <head> — ce qui produit rarement un résultat visuel utile, mais peut servir à un diagnostic rapide du DOM.

   Sommaire   

Par gerywa 25 juillet 2014 | Mis à jour le 22 mai 2026