Différence entre $ (document.body) et $ ('body')

104

Je suis un débutant jQuery et en parcourant quelques exemples de code, j'ai trouvé:

$(document.body) et $('body')

Y a-t-il une différence entre ces deux?

jquery document document-body ashleedawg
la source
1
On est plus rapide, mais compte tenu que ne serait jamais appelé plus de quelques fois sur une seule page, la différence entre les deux est très faible.
Kevin B le
$(body)ne fonctionne pas pour les .on('click'...événements, alors que $(document.body)et les $(document)deux fonctionnent.
rybo111
3
La déclaration ci-dessus est fausse et il y a également une petite différence de performance, environ 10% en faveur de $ (document.body). Vous pouvez voir la comparaison ici sitepoint.com/jquery-body-on-document-on
Sigismund

Réponses:

77

Ils font référence au même élément, la différence est que lorsque vous dites que vous document.bodypassez l'élément directement à jQuery. Alternativement, lorsque vous passez la chaîne 'body', le moteur de sélection jQuery doit interpréter la chaîne pour déterminer à quel (s) élément (s) il fait référence.

Dans la pratique, l'un ou l'autre fera le travail.

Si vous êtes intéressé, vous trouverez plus d'informations dans la documentation de la fonction jQuery .

Justin Ethier
la source
1
La première affirmation n'est pas tout à fait correcte. Ils peuvent faire référence au même élément. Habituellement même. Mais pas toujours :). Voir ma réponse ci-dessous.
jvenema
18

Les réponses ici ne sont pas vraiment tout à fait correctes. Proche, mais il y a un cas limite.

La différence est que $ ('body') sélectionne réellement l'élément par le nom de la balise, alors que document.body fait référence à l'objet direct sur le document.

Cela signifie que si vous (ou un script non autorisé) écrasez l'élément document.body (honte!) $ ('Body') fonctionnera toujours, mais $ (document.body) ne fonctionnera pas. Donc, par définition, ils ne sont pas équivalents.

Je me risquerais à penser qu'il existe d'autres cas extrêmes (tels que les éléments globalement identifiés dans IE) qui déclencheraient également ce qui équivaut à un élément de corps écrasé sur l'objet document, et la même situation s'appliquerait.

jvenema
la source
Je ne pense pas qu'il soit possible de définir document.bodyautre chose que a <body>: i.imgur.com/unJVwXy.png
mpen
Pourrait être résolu maintenant. Il fut un temps où FF et IE vous laissaient faire cela, et / ou se confondaient avec des éléments avec un identifiant de "corps" (l'erreur que j'ai frappée était un client utilisant notre script sur le site d'un chirurgien plasticien avec une image étiquetée avec l'identifiant "corps"). J'espère que ce n'est plus un problème :)
jvenema
12

J'ai trouvé une assez grande différence de timing lors des tests dans mon navigateur.

J'ai utilisé le script suivant:

AVERTISSEMENT: exécuter ceci gèlera un peu votre navigateur, pourrait même le planter.

var n = 10000000, i;
i = n;
console.time('selector');
while (i --> 0){
    $("body");
}

console.timeEnd('selector');

i = n;
console.time('element');
while (i --> 0){
    $(document.body);
}

console.timeEnd('element');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Développer l'extrait

J'ai fait 10 millions d'interactions, et voici les résultats (Chrome 65):

sélecteur: 19591.97509765625ms
élément: 4947.8759765625ms

Passer l'élément directement est environ 4 fois plus rapide que passer le sélecteur.

Phiter
la source
7
Vous obtenez un vote positif juste pour la "notation fléchée", vous êtes effronté!
KlaymenDK
1
J'ai lu quelque part à ce sujet et je voulais l'utiliser tout de suite XD
Phiter
Oui, mais - allez-vous vraiment faire cela 10 millions de fois? Pourquoi ne pas faire ce genre d'analyse là où ça compte?
scrayne le
@scrayne ces tests de performances ne concernent pas de vrais cas d'utilisation. Il est assez rare de faire 10 millions d'opérations sur un élément comme celui-ci. Mais OP voulait connaître la différence et j'ai remarqué qu'il y avait une différence de performance, donc je suppose que cela vaut la peine de le noter.
Phiter
9

$(document.body)utilise la référence globale documentpour obtenir une référence au body, alors qu'il $('body')s'agit d'un sélecteur dans lequel jQuery obtiendra la référence à l' <body>élément sur le document.

Aucune différence majeure que je peux voir, pas de gain de performance notable de l'un à l'autre.

Gabe
la source
9
$(document.body)est nettement plus rapide selon cet article: sitepoint.com/jquery-body-on-document-on
Steve Harrison
6

Il ne devrait y avoir aucune différence, peut-être que le premier est un peu plus performant mais je pense que c'est trivial (vous ne devriez pas vous en soucier, vraiment).

Avec les deux, vous enveloppez la <body>balise dans un objet jQuery

Nicola Peluchetti
la source
3

En sortie, les deux sont équivalents. Bien que la deuxième expression passe par une recherche de haut en bas à partir de la racine DOM. Vous voudrez peut-être éviter la surcharge supplémentaire (aussi minuscule soit-elle) si vous avez déjà l'objet document.body en main pour que JQuery se termine. Voir http://api.jquery.com/jQuery/ #Selector Context

santon
la source