Simple JavaScript Selector

If you are writing a lot of JavaScript that needs to interact with the web page and you are not using a library such as jQuery then you will probably find yourself typing in document.getElementById a large number of times and possibly even an occasional document.getElementsByClassName or document.getElementsByTagName. Having to type these in a lot of times means that almost inevitably you will get typos that stop your code from working and which take some time to spot. A lot of people get so fed up with typing these calls that they either switch to using jQuery where they can perform the calls with a simple $ or if they don't care that they are writing proprietary code that is intended primarily for Internet Explorer 4, they will make use of the variables that some browsers pollute the global namespace with in order to provide direct references to the ids (not sure what these people do when they need a specific class or tag). Of course this latter option also doesn't work in all browsers and so their code will only work some of the time.

The way that jQuery allows you to access ids, classes and tags all through the same command inspired those responsible for the JavaScript standards to introduce two new commands into JavaScript itself that will accept CSS style references to the ids, classes and tags - document.querySelector and document.querySelectorAll. These differ from the getElement style calls in that the new calls provide a static view from the HTML at the time of the call while the getElement calls link to the live HTML and update automatically if the subsequent JavaScript updates the page.

By making use of these new selectors we can create our own $ function that can make use of these new calls to provide similar functionality to the selector functionality in jQuery with a much smaller piece of code. If the powerful selectors that jQuery offers is your only reason for using jQuery and you no longer consider it necessary to support antiquated browsers that don't support JavaScript commands introduced several years ago then switching to using a much smaller function that can hande all the same selectors will dramatically speed up the loading of your page.

Here is the code for this new replacement $() function that will accept CSS style selectors in the first parameter and which also has an optional second parameter to allow you to apply the lookup to a portion of the page rather than the entire document should you have already determined which part of the document you want to look at.

var $ = function (el,o) {
"use strict";
var d = (undefined===o) ? document : o;
return (/^#\S+$/.test(el)) ? d.querySelector(el) : [].slice.call(d.querySelectorAll(el));
}

So now instead of document.getElementById('myid') we simply call $('#myid') and instead of document.getElementsByClassName('myclass') we call $('.myclass'). If we only want the occurrences of myclass inside of myid then we can call $('#id .myclass) or if we want the occurrences of myclass inside of whatever id we already have stored in a variable called elem we can call $('.myclass',elem) to restrict the class lookup to the already identified element(regardless of how that element was found in the first place).

Defining this simple function dramatically reduces the amount of typing required (and so eliminates a lot of potential typos) while providing the maximum flexibility in how we can provide the references. While these calls (which comply with the standards) may be a couple of characters longer than some of the non-standard ways that used to be used with IE4, the extra couple of characters not only makes the calls comply with the standard, it also provides much greater flexibility.

Note that a large part of the code is there to ensure that when you request a specific id that you get the static node returned directly whereas requesting a class or tag or classes or tags within an id will return an array making processing of multiple elements far easier by using forEach instead of a loop..

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate