7

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.

0

3 respuestas 3

10

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

5

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.

3

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.