Deprecated Javascript DOM vs modern javascript DOM vs jquery DOM

I studied web development only through jQuery. As I progressed, I started using javascript to write custom code for my requirement. But if we need to support older browsers, we must use jQuery. At the moment, we have modern Javascript that has standardized many functions. For example, registering event listeners.

In legacy javascript, we used hacks, or we used jQuery to extract elements for the DOM.

I know this is a broad question, but I want to know the details specific to the DOM. I want to know what constitutes the best approach, given the tremendous success in the development of the Internet today.

We all know how jQuery is good enough to access the house, as it solves all the problems with the cross browser. I am looking for detailed explanations that follow current trends on the Internet.

It will be a bonus if the response compares plain JavaScript javascript, jQuery and modern javascript.

We have some more good news that jQuery2 fell 3.8 or lower. Therefore, any points in this are also more useful to me.

I collected a few inputs and presented a few points below.

1 - select div with id

With jQuery

$('#container');

This will create a 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 CSS selectors that were already familiar.

2 - Find all specific elements (elements) in another element.

With jQuery

$('#container').find('li');

li .

Javascript

document.getElementsByTagName("li");

.

JavaScript

var lis = document.querySelectorAll('#container li');

querySelectorAll , CSS.

3 -

click .

jQuery

$('a').on('click', fn);

Javascript

var anchors = document.getElementsbyTagName('a');

, . ie8 attachEvent, addEventListener .

JavaScript

[].forEach.call( document.querySelectorAll('a'), function(el) {
   el.addEventListener('click', function() {
     // anchor was clicked
  }, false);  

});

:

jquery javascript