Best IT Recipes

Difference between $ (document.body) and $ ('body') jQuery

I am starting jQuery and looking through some examples in some found codes.

$(document.body) and $('body')

Can someone tell me if there is a difference between the two?

+91
jquery
Sep 06 '12 at 19:33
source share
6 answers

They refer to the same element, the difference is that when you say document.body , you pass the element directly to jQuery. In addition, when you pass the string 'body' , the jQuery selector mechanism must interpret the string to find out which elements (s) it refers to.

In practice, either do their job.

If you're interested, the documentation for the jQuery function has more information.

+70
Sep 06 '12 at 19:36
source share

The answers here are actually not entirely correct. Close, but there is an edge case.

The difference is that $ ('body') actually selects the element by tag name, while document.body refers to a direct object on the document.

This means that if you (or a rogue script) overwrite the document.body (shame!) Element, $ ('body') will still work, but $ (document.body) will not. Therefore, by definition, they are not equivalent.

I would venture to guess that there are other cases of edges (e.g. globally id'ed elements in IE) that will also trigger what constitutes the rewritten body element in the document object, and the same situation would apply.

+15
03 Feb '16 at 16:19
source share

$(document.body) uses the global link document to get a reference to body , while $('body') is a selector in which jQuery will get a link to the <body> element of document .

There is no significant difference that I can see, and not a noticeable increase in productivity from one to the other.

+9
Sep 06 '12 at 19:36
source share

I found a rather large time difference when testing in my browser.

I used the following script:

ATTENTION: running this code will freeze your browser a little, it may even cause a crash.

 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>

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

selector: 19591.97509765625ms
element: 4947.8759765625ms

Direct element transfer is about 4 times faster than selector transmission.

+8
Mar 23 '18 at 12:43
source share

There shouldn't be any difference, maybe a little more productive at first, but I think it's trivial (you shouldn't worry about that, really).

When wrapping <body> in jQuery object

+6
Sep 06 '12 at 19:35
source share

Weekends are both equivalent. Although the second expression is looked up from the root of the DOM. You might want to avoid the extra overhead (however insignificant) if you already have a document.body object for transporting jQuery. See http://api.jquery.com/jQuery/# selector context

+3
Sep 06 '12 at 19:55
source share


More articles:


All Articles