jQuery to Pure Javascript, Part 1 : Selectors

My life as a Javascript developer came as a full circle. I started writing with pure Javascript. I soon got tired of writing those big document.getElementByIds and shifted to jQuery. I wrote in jQuery for a few years but then realized that it may not be the most optimized solution. Suddenly pure Javascript started to look attractive once again.

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 as butter 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.

jQuery to pure Javascript will be discussed as a series. 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 as a NodeList. A NodeList is an array like collection of Nodes. A Node is basically an element in the HTML DOM like a div, button, span etc.
  • document.querySelector : This method returns returns the first element that matches a specified CSS selector. Basically it returns only a single Node.

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 custom selectors (for example :selected is not a valid CSS selector).

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 #id .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.
  • document.getElementsByClassName : This method returns a collection of all elements in the document that matches the class name.
  • document.getElementsByTagName : This method returns a collection of all elements in the document that matches the tag name.

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

<div id="element"></div> // jQuery $("#element") // Pure JS document.getElementById("element") <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 <p>Paragraph</p> // jQuery $("p") // Pure JS document.getElementsByTagName("p")

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.

Writing jQuery find() in Pure Javascript
Writing jQuery closest() in Pure Javascript