Difference between document body and body

Question

I am a jQuery beginner and while going through some code examples I found     document body  and    body    Is there any difference between these two

User · Answer

I have found a pretty big difference in timing when testing in my browser.

I used the following script:

WARNING: running this will freeze your browser a bit, might even crash it.

_x000D_

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

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

_x000D_

I did 10 million interactions, and those were the results (Chrome 65):

selector: 19591.97509765625ms
element: 4947.8759765625ms

Passing the element directly is around 4 times faster than passing the selector.

User · Answer

Outputwise both are equivalent  Though the second expression goes through a top down lookup from the DOM root  You might want to avoid the additional overhead  however minuscule it may be  if you already have document body object in hand for JQuery to wrap over  See http   api jquery com jQuery    Selector Context

User · Answer

The answers here are not actually completely correct  Close  but there s an edge case   The difference is that    body   actually selects the element by the tag name  whereas document body references the direct object on the document   That means if you  or a rogue script  overwrites the document body element  shame      body   will still work  but   document body  will not  So by definition they re not equivalent   I d venture to guess there are other edge cases  such as globally id ed elements in IE  that would also trigger what amounts to an overwritten body element on the document object  and the same situation would apply

User · Answer

document body  is using the global reference document to get a reference to the body  whereas    body   is a selector in which jQuery will get the reference to the  lt body gt  element on the document   No major difference that I can see  not any noticeable performance gain from one to the other

User · Answer

They refer to the same element  the difference is that when you say document body you are passing the element directly to jQuery  Alternatively  when you pass the string  body   the jQuery selector engine has to interpret the string to figure out what element s  it refers to   In practice either will get the job done   If you are interested  there is more information in the documentation for the jQuery function

User · Answer

There should be no difference at all maybe the first is a little more performant but i think it s trivial   you shouldn t worry about this  really     With both you wrap the  lt body gt  tag in a jQuery object

[jquery] Difference between $(document.body) and $('body')

Examples related to jquery

Examples related to document

Examples related to document-body