The use of DOM is for adding interaction and dynamic content to the web-page. So, if you have an element on the web-page like this:
<button id="myBtn">Click Me</button>
The DOM functions are used to manipulate the properties of that element. What will happen when we click the button?
As a beginner, writing some utility functions for yourself would not only be a good exercise for you, but would also give you an idea on how those libraries actually work!
jQuery hides all the errors!
Yep, jQuery does not throw errors. It is designed to fail silently. If an error occurs, it is not printed to the console. There is nothing. For beginners, this is not a good thing at all. So, if your code is not working, you have no hints on how to debug it.
In jQuery, the browser developer tools do not offer any such error handling mechanism. You have to be on your own.
jQuery is not always easy
outerHTML of an element.
// jQuery $('div').append($(elem).clone()).html(); // This is hardly readable, and actually a mess for a beginner to even understand what is going on. // Vanilla JS el.outerHTML;
Here is another example, which is code you’d use when you have to check if two DOM elements are the same or not.
//jQuery $(elem).is($(someElem)); //Vanilla JS elem===someElem;
Both the code snippets would return either
false, based on whether
// jquery $(elem).hasClass('myClass'); // checks the elem is assigned the class "myClass" or not. elem.classList.contains('myClass'); // vanilla js version for the above, works in IE10+
I am pretty sure one can write the second one as easily as the first one. And it is fairly cross-browser compatible. Other than Opera Mini, and IE 6-9, all browsers support it.
Also, since you are a beginner, you are at a stage when you don’t have to worry a lot about cross-browser compatibility issues, but rather about learning good code practices. Most new versions of browsers such as Firefox, Chrome, Safari, IE10+, Opera, etc. would work with 80% of the code without a hitch.
There still exists some things like
dispatchEvent and getting computed styles which are hard to shim in IE6-9, and Opera Mini. But if you’re just learning, you are good to go.
Furthermore, jQuery in particular is loosing momentum (partly because of the decline of old browsers for which jQuery was good). For front-end web development, more modern frameworks like Angular and React are taking place. Angular is even backed by Google, and the amount of popularity it has gained in little time can’t be neglected. React is also an open-source project by Facebook.