Removing jQuery From Your Project With JavaScript: Part 1

Learn to replace the jQuery DOM operation with JavaScript

The reasons for removing jQuery are:

• To get native performance
• To understand what’s happening inside jQuery functions so we can decide whether we go for jQuery or JavaScript

Part 1 of this series only focuses on getting elements without using jQuery. I’ve added alternative JavaScript methods for more frequently used jQuery functions.

---

1 . Selecting an Element Using Selector

// jQuery
$('selector');

// JavaScript
document.querySelectorAll('selector'); //returns NodeList

If we want to get the first element — which matches the selector — then use:

document.querySelector('selector');

---

2. Get Elements By Class Names

To get an element by its class name, we can use getElementsByClassName or querySelector with a prefixed .

// jQuery
$('.className');

// JavaScript
document.querySelectorAll('.className');

// or
document.getElementsByClassName('className');

---

3. Get Element by ID

To get an element by its ID, we can use getElementById or querySelector with a prefixed #.

// jQuery
$('#id');

// JavaScript
document.querySelector('#id');

// or
document.getElementById('id');

//or
window['id']

---

4. Get Elements by TagName

To get an element by its tag name, we can either use getElementsByTagName, or we can use the querySelectorAll function.

//jQuery
$('tagName'); // Example : $('li');

//JavaScript 
document.getElementsByTagName('tagName'); 

// To get elements from another element using tag name 

parentElement.querySelectorAll('li');

---

5. Get Elements by Attribute

// jQuery
$('a[target=_blank]');

// JavaScript
document.querySelectorAll('a[target=_blank]');

---

6. To Get the Previous Element

Use previousElementSibling to get the previous element.

// jQuery
$el.prev();

// JavaScript
el.previousElementSibling;

---

7. To Get the Next Element

Use nextElementSibling to get the next element.

// jQuery
$el.next();

// JavaScript
el.nextElementSibling;

---

8. To Get All Siblings

To get all siblings:

• Get parent
• Get children of parent
• Create a siblings array
• Push children to siblings, if the children are not equal to the current element
• Return siblings

function getSiblings(el) {
  let parentNode = el.parentNode,
      children = parentNode.children,
      totalChildren = children.length,
      siblings = [];

  for(let i = 0; i < totalChildren; i++) {
     let currentChild = children[i];
     if(el != currentChild) {
        siblings.push(currentChild);
     }
   }

   return siblings;

}

The above code can also be written like:

Array.from( el.parentNode.children ).filter((child) =>
  child !== el
);

---

9. Get All Previous Siblings

We can use previousElementSibling to get the previous element of the current element. Then we can loop until the first element.

// jQuery
$el.prevAll();

// JavaScript

function getPreviousSiblings(elem) {
  var siblings = [];

  while ( elem = elem.previousSibling ) {     
      if ( elem.nodeType === 3) { // ignore texts
         continue; 
      }
      siblings.push(elem);
}

   return siblings;
}

---

10. Get All of the Next Siblings

We can use nextElementSibling to get the next element of the current element. Then we can loop until the last element.

// jQuery
$el.prevAll();

// JavaScript

function getNextSiblings(elem) {
  var siblings = [];

   while ( elem = elem.nextElementSibling ) {     
      if ( elem.nodeType === 3) { // ignore texts
         continue; 
      }
      siblings.push(elem);
}

   return siblings;
}

---

11. Find the Closest Element That Matches the Selector

el.matches checks if the element is the selector.

// jQuery
$el.closest(selector);

// Native - Only latest, NO IE
el.closest(selector);

// Native - IE10+
function closest(el, selector) {
  const matchesSelector = el.matches || 
                          el.webkitMatchesSelector ||    
                          el.mozMatchesSelector || 
                          el.msMatchesSelector;

  while (el) {
    if (matchesSelector.call(el, selector) ) {
      return el;
    } else {
      el = el.parentElement;
    }
  }
  return null;
}

---

12. To Get the Parent of the Element

To get the parent of the current element, we can use the parentElement attribute on the currentElement.

// jQuery
$(el).parent();

//JavaScript
el.parentElement

---

13. To Get Children of the Element

To get children of the current element, we can use the children attribute on the currentElement.

//jQuery

$(el).children();

//JavaScript

el.children

---

14. To Get the Body

To get the body element, we can use:

// jQuery
$('body');

// JavaScript
document.body;

---

15. IFrame document

To get the document of the IFrame:

// jQuery
$iframe.contents();

// Native
iframe.contentDocument;

Thanks for reading. Hope you like this.