Hace un tiempo me estuve preguntando la siguiente cuestión:
Cual es la diferencia entre:
$(document.body)
$('body')
Si me pudieran fundamentar, sería de gran ayuda.
Cuando haces la referencia a $(document.body)
entregas directamente el elemento BODY al jquery. Mientras que cuando haces $('body')
jquery tiene que buscar e interpretar la cadena (en este caso body) y encontrar el elemento.
Algunos sitios webs te explican como cambia el rendimiento de respuesta en distintos casos.
Teniendo el rendimiento mas rapido utilizando $(document.body)
y el mas lento $('body)
aqui puedes encontrar algunos ejemplos
Realmente son lo mismo. Haciendo referencia mediante document
haces referencia directamente al elemento dentro del DOM mientras que utilizando el selector $('body')
, JQuery tendrá que interpretar que es la etiqueta <body>
que se encuentra dentro de la página y por lo tanto este segundo selector será más lento.
Como te ponen en otras respuestas: el resultado final va a ser el mismo (se seleccionará el elemento body
) y una de las opciones (document.body
) será más rápida que la otra ("body"
).
Si nos ponemos un poco tiquismiquis, sí que existe una pequeña diferencia en versiones antiguas de jQuery: el contexto que se pasaba y en el que se ejecutaba el código de jQuery.
.context
está disponible en jQuery 1.x (a partir de 1.3) y 2.x, se marcó como obsoleto en la versión 1.10, y fue eliminado completamente en la versión 3.0. Con ese método se puede ver el contexto del nodo DOM que se le pasó originalmente a jQuery()
; si ninguno se pasa, entonces el contexto seguramente sea document
.
Si se usara .context
, sí que habría una diferencia entre hacer $(document.body)
y $("body")
, porque el contexto sería body
y #document
respectivamente y no son lo mismo (p.e. se pueden añadir elementos a body
pero no a document
).
Ejemplo usando context
con $(document.body)
:
var body = $(document.body);
var h1 = $("<h1>Encabezado</h1>")[0];
body.context.append(h1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Ejemplo usando context
con $("body")
:
var body = $("body");
var h1 = $("<h1>Encabezado</h1>")[0];
body.context.append(h1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>