Equivalent of jQuery Selectors in Pure Javascript

javascript
Published on November 18, 2016

Native Javascript Makes a Big Difference in Web Animations

In normal day to day tasks you can get away with jQuery. But web animations — they are very performance oriented. A developer that makes an animation go smooth has done some really hard work. The more complex animation becomes, the more performance oriented code it needs. Native Javascript definitely raises the performance of animations.

In your application you may write the AJAXs, form validations and all those things in jQuery. But the section of code dealing with animations — it is recommended you use pure Javascript.

In this post selectors are discussed — how you can select elements with pure Javascript.

Functions Based on CSS Selectors

  • document.querySelectorAll : This method returns all elements in the document that matches a specified CSS selector. An array like collection is returned, and each element in it is a HTML DOM element (div, button, span etc). Since this is an array you can loop through it using a for loop.
  • document.querySelector : This method returns returns the first element that matches a specified CSS selector. It returns only a single HTML element.

Just like jQuery these functions takes a selector as parameter and returns the matching elements. The difference is these functions expect valid CSS selectors, whereas jQuery has some additional custom selectors also (for example :selected is not a valid CSS selector, but works ion jQuery).

Go through the CSS Selector Reference to understand the difference between jQuery selectors and CSS selectors. They are almost the same.

  • Selecting by id :

    <div id="element"></div>
    // jQuery 
$("#element") 

    // Pure JS : Selecting by id will return only a single element 
// So we use document.querySelector (instead of document.querySelectorAll)
document.querySelector("#element")

  • Selecting by class :

    <div class="round">Round 1</div>
    // jQuery 
$(".round")

    // Pure JS : Selecting by class may return many elements 
// So we use document.querySelectorAll (instead of document.querySelector)
document.querySelectorAll(".round")

// document.querySelectorAll(".round")[0] refers to the first element
// document.querySelectorAll(".round")[1] refers to the second element
// and so on

  • Selecting by a combination of id and class :

    <div id="element">
	<div class="inner">Inner</div>
</div>

    // jQuery 
$("#element .inner")

    // Pure JS
document.querySelectorAll("#element .inner")

// Looping through the matched elements through the "length" property of the returned collection of elements
for(var i=0; i<document.querySelectorAll("#element .inner").length; i++) {
	// document.querySelectorAll("#element .inner")[i]
}

  • Selecting by data attributes :

    <div class="round">Round 1</div>
<div class="round" data-index="1">Round 2</div>

    // jQuery
$(".round[data-index='1']")

    // Pure JS
document.querySelectorAll(".round[data-index='1']")

  • Selecting by disabled attribute :

    <input class="textbox" type="text" disabled />
<input class="textbox" type="text" />

    // jQuery
$(".textbox:disabled")

    // Pure JS
document.querySelectorAll(".textbox:disabled")

  • Selecting by selected attribute :

    <select class="round" id="dropdown" autocomplete="off">
	<option>One</option>
	<option selected>Two</option>
</select>

    // jQuery 
$("#dropdown option:selected")

    // Pure JS [ CSS provides a :checked selector that is the same as :selected in jQuery ]
document.querySelectorAll("#dropdown option:checked")

Functions Based on ID, Class and Tagname

  • document.getElementById : This method returns the element that matches the id attribute. Only a single element is returned.

    <div id="element"></div>
    // jQuery 
$("#element") 

    // Pure JS
document.getElementById("element")

  • document.getElementsByClassName : This method returns a collection of all elements in the document that matches the class name.

    <div class="round">Round 1</div>
    // jQuery 
$(".round")

    // Pure JS
document.getElementsByClassName("round")

// document.getElementsByClassName("round")[0] refers to the first element
// document.getElementsByClassName("round")[1] refers to the second element
// and so on

  • document.getElementsByTagName : This method returns a collection of all elements in the document that matches the tag name.

    <p>Paragraph</p>
    // jQuery 
$("p")

    // Pure JS
document.getElementsByTagName("p")

Note that in these functions # and . are not used.

A Note on Performance

You may be tempted to use queryselector functions instead of using the function by id, tagname & class. However the functions using id, tagname and class work much faster than querySelector functions. This is understandable because it must be easier for browsers to search directly than going in a round about fashion. It is said that getElementById works at least 10-30 times faster than querySelector. This boost up can be helpful in cases of animations.

In this Tutorial