Legacy Javascript DOM vs Modern javascript DOM vs jquery DOM
dom, javascript, jquery
Solution
In the end, it comes down to
- Processing time.
- Cross-browser compatibility. (moreso)
- Maintainability
JavaScript is fast. Normally speaking you won't be writing a script so intense that runtime is affected. Native javascript is obviously the fastest, as jQuery methods invariably call native JS.
According to JSPerf, `querySelector` is about 42% slower than the native `getElementByID`, but still is an impressive speed, almost 6x faster than jQuery if I'm remembering correctly.
Perks of jQuery: it's very cross browser compatible. I work for a company that requires me to test compatibility back to IE7, and I find that jQuery normalization is very helpful instead of having to remember which JS methods do not function in IE7/8/9 etc.
However, if you don't have to support IE7 (8 isn't THAT bad, but still poses issues), native JS is the way to go. It's almost prestigious now to have a vanilla script, and with modern updates, it's making DOM traversal much easier and faster than jQuery. Not to mention the 90kb load (33kb min.) you'll be avoiding by applying proper code.
As for what Kevin said, "maintainability" can be tricky. In your situation, you said you know jQuery better than you do JavaScript (weird, but ok). My personal view is biased because I'm an advocate for less-jQuery, but I would honestly say jQuery is easier to maintain than JS for the reason major functionality might change, but the way to call it remains basically the same (example, the change from `bind()` => `live()` (or was it reversed?) => `on()`. Event delegation changed, but the way it is called is almost identical with each update. So maintainability is quite easy.
Problem
I have learned web development through jQuery only. As I advanced, I started using javascript to write custom code to my requirement. But If we need to support old browsers we must use jQuery. As of now we have Modern Javascript which has standardized lot of features. For example registering event listeners. In legacy javascript, we have used hacks or we used jQuery to fetch the elements fo the DOM. I know this is broad question, but I want to know details specific to DOM. I want to know what is the best approach considering the huge advances in the web development today. We all know how jQuery is good enough for dom access as it resolves all the cross browser issues. I am looking for detailed explanations which follows current web trends. It will be a bonus if the answer compares Plain old javascript, jQuery and Modern javascript. We have one more good news that jQuery2 dropped suport for ie8 and below. So any points on that also be more useful to me. I have collected few inputs and presenting few points below. 1 – Fetch a div with id With jQuery ``` $('#container'); ``` This will create the jQuery object with the required DOM Element. Plain old Javascript ``` var container = document.getElementById('container'); ``` Modern JavaScript ``` var container = document.querySelector('#container'); ``` querySelector is part of the Selectors API, which provides us with the ability to query the DOM using the CSS selectors that we’re already familiar with. 2 – Find all specific element(s) with in another element. With jQuery ``` $('#container').find('li'); ``` Here we find all li descendants of container. Plain old Javascript ``` document.getElementsByTagName("li"); ``` Here we need to do additional processing. Modern JavaScript ``` var lis = document.querySelectorAll('#container li'); ``` querySelectorAll will return all elements that match the specified CSS selector. 3 – Registering event listeners If we want to register a click event listener to all anchor tags on the page. With jQuery ``` $('a').on('click', fn); ``` Plain old Javascript ``` var anchors = document.getElementsbyTagName('a'); ``` We need to write the custom code which handles the differences between browsers. For ie8 and below we have to use attachEvent and for the rest we have to use addEventListener for registering listeners. Modern JavaScript ``` [].forEach.call( document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // anchor was clicked }, false); }); ``` Reference: from jquery to javascript