Inscrivez-vous ou connectez-vous pour rejoindre votre communauté professionnelle.
It depends what you want to do with the node requested !
If you need to apply a jquery function (like data(), show(), etc...), jQuery selector is more efficient.
In terms of rapidity, getElementById is faster. You can try this on jsperf.com website.
In addition, lot of web develop are in the habit to use jQuery, because 10 years ago, javascript language was poor. By now, JavaScript language has much improved with EcmaScript 5 and 6, and some usage of jQuery are deprecated. You can see if you really need jQuery on http://youmightnotneedjquery.com/
Always go for native function because it is fast and has no dependecies on external libraries.
Both are good :)
But pain javascript is independent whereas jQuery code will depend on jQuery Library.
So its a choice of a developer and project requirement.
Like everyone who has answered before me, I would like to repeat the same, But with a clause,
Ofcourse document.getElementById( "logo" ); is much better than the jQuery equivalent.
BUT, This depends on your need for selecting that element. For instance, if you would like to add some HTML content or change some attribute of that element, it can be achieved via plain JS document.getElementById( "logo" ).innerHtml = "Something". Nothing fancy here. So the above statement is true for this case.
In case, you want to do something else like use any special jQuery functions like closest("#logoOuterDiv") which is used to find the closest parent of the current element, instead of re-inventing the wheel and typing your own code to traverse through the DOM, let jQuery handle that for you because they have a well optimized algorithm in place for you to traverse the DOM. And cooking up something yourself is time consuming and you can't promise yourself the best performance compared to jQuery. In these kind of situations, it is better to go for jQuery selection itself.
In conclusion, it depends on your need. The performance difference however is very small and unnoticeable, unless you are selecting hundreds of elements in a loop.
of course document.getElementById( "logo" ); is more efficient because it's written in native javascript code, and cause no extra processing than $( "#logo" );,
$( "#logo" ); is written in jQuery framewok, and this method still calls the native javascript function getElementById but it causes more processing in jQuery framework
To start with "document.getElementById( "logo" );" is native javascrip while "$( "#logo" )" is a syntax of a jquery library written in javascript.
There are things to always consider before deciding which one to use.
1. Staying away from libraries to achieve simple tasks that can be done with native JS
2. Library is already loaded either way for other functions so why not use it.
In case of number 1, you should always stay away from third party libraries when you can period. Thats a good habit to have as a programmer because its always easier to debug your own code.
incase of number 2, you should use it in the right way as selectors can affect efficiency of site but not load time as the library is already loaded. I strongly don't believe that the two approaches will have any significant impact on performance as the other have suggested. Because you are using simple id selector :
"$( "#logo" );" will be parsed as "document.getElementById( "logo" );".
What will affect performance is how you might use a selector.
“$(img#logo)” is very much slower than “$(#logo)”
“$(img#logo)” equivalent of "getElementByTagName()" which will be an array of “img” elements and then "getElementById()" will be used to filter that array.
As you can see even if you end up using jquery, knowing how to use your selectors wisely is the important part.
Hope thats clear enough :)
Cheers
getElementById is faster because it uses native code.
vanilaJS one is more efficient because at the end jquery is going to execute same thing to select element.
document.getElementById( "logo" ); wil work faster then $( "#logo" ).
document.getElementById( "logo" ); its a plain JS code and $( "#logo" ) a jQuery code. and jQuery is itself use javascript.
It is a good idea to remember that jQuery is not always better than plain old JavaScript.
