Diferencia entre $ (document.body) y $ ('body')

104

Soy un principiante de jQuery y mientras revisaba algunos ejemplos de código encontré:

$(document.body) y $('body')

¿Hay alguna diferencia entre estos dos?

jquery document document-body Ashleedawg
fuente
1
Uno es más rápido, sin embargo, considerando que nunca se llamaría más de unas pocas veces en una sola página, la diferencia entre los dos es muy pequeña.
Kevin B
$(body)no funciona para .on('click'...eventos, mientras que $(document.body)y $(document)ambos funcionan.
rybo111
3
La afirmación anterior es falsa y también hay una pequeña diferencia en el rendimiento, aproximadamente un 10% a favor de $ (document.body). Puede ver la comparación aquí sitepoint.com/jquery-body-on-document-on
Sigismund

Respuestas:

77

Se refieren al mismo elemento, la diferencia es que cuando dices document.bodyque estás pasando el elemento directamente a jQuery. Alternativamente, cuando pasa la cadena 'body', el motor de selección jQuery tiene que interpretar la cadena para averiguar a qué elemento (s) se refiere.

En la práctica, cualquiera de los dos hará el trabajo.

Si está interesado, hay más información en la documentación de la función jQuery .

Justin Ethier
fuente
1
La primera afirmación no es del todo correcta. Ellos pueden hacer referencia al mismo elemento. Generalmente incluso. Pero no siempre :). Vea mi respuesta a continuación.
jvenema
18

Las respuestas aquí no son completamente correctas. Cerca, pero hay un caso límite.

La diferencia es que $ ('body') realmente selecciona el elemento por el nombre de la etiqueta, mientras que document.body hace referencia al objeto directo en el documento.

Eso significa que si usted (o un script deshonesto) sobrescribe el elemento document.body (¡lástima!) $ ('Body') seguirá funcionando, pero $ (document.body) no. Entonces, por definición, no son equivalentes.

Me atrevería a suponer que hay otros casos extremos (como elementos identificados globalmente en IE) que también activarían lo que equivale a un elemento de cuerpo sobrescrito en el objeto del documento, y se aplicaría la misma situación.

jvenema
fuente
No creo que sea posible establecerlo document.bodyen otra cosa que no sea <body>: i.imgur.com/unJVwXy.png
mpen
Podría resolverse ahora. Hubo un momento en que FF e IE le permitían hacer esto y / o se confundían con elementos con una identificación de "cuerpo" (el error que encontré fue un cliente que usaba nuestro script en el sitio de un cirujano plástico con una imagen etiquetada con el id "cuerpo"). Ojalá ya no sea un problema :)
jvenema
12

He encontrado una gran diferencia en el tiempo al probar en mi navegador.

Usé el siguiente script:

ADVERTENCIA: ejecutar esto congelará un poco su navegador, incluso podría bloquearlo.

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>
Expandir fragmento

Hice 10 millones de interacciones, y esos fueron los resultados (Chrome 65):

selector: 19591.97509765625ms
elemento: 4947.8759765625ms

Pasar el elemento directamente es 4 veces más rápido que pasar el selector.

Phiter
fuente
7
¡Obtienes un voto a favor solo por la "notación de flecha", descarado!
KlaymenDK
1
Leí sobre esto en alguna parte y quería usarlo de inmediato XD
Phiter
Sí, pero, ¿realmente vas a hacer esto 10 millones de veces? ¿Por qué no hacer este tipo de análisis donde importa?
scrayne
@scrayne, esas pruebas de rendimiento no se tratan de casos de uso reales. Es bastante raro realizar 10 millones de operaciones en un elemento como este. Pero OP quería saber la diferencia y noté que hay una diferencia de rendimiento, así que supongo que vale la pena señalarlo.
Phiter
9

$(document.body)está usando la referencia global documentpara obtener una referencia a body, mientras que $('body')es un selector en el que jQuery obtendrá la referencia al <body>elemento en document.

No puedo ver ninguna diferencia importante, ni una ganancia de rendimiento notable de uno a otro.

Gabe
fuente
9
$(document.body)es considerablemente más rápido según este artículo: sitepoint.com/jquery-body-on-document-on
Steve Harrison
6

No debería haber ninguna diferencia en absoluto, tal vez el primero sea un poco más eficaz, pero creo que es trivial (no deberías preocuparte por esto, de verdad).

Con ambos, envuelve la <body>etiqueta en un objeto jQuery

Nicola Peluchetti
fuente
3

Outputwise ambos son equivalentes. Aunque la segunda expresión pasa por una búsqueda de arriba hacia abajo desde la raíz DOM. Es posible que desee evitar la sobrecarga adicional (por minúscula que sea) si ya tiene el objeto document.body en la mano para que JQuery lo envuelva. Ver http://api.jquery.com/jQuery/ #Selector Context

santon
fuente