Recently, I wrote a post about how jQuery’s prevalence on the web was causing web developers to learn less JavaScript and more jQuery due to how it conceals many of the more complicated inner workings of JavaScript in wrapper methods like bind and ready.

Michael Enger over at The Lonely Coder seems to agree with me and he put together a really cool guide on how to replace some of the more common jQuery methods with their native JavaScript counterparts. In addition to going over how to replace ready and how to do event delegation, he does an excellent job of covering CSS selectors. From the guide:

One of the greatest benefits of jQuery is to be able to drill down into the DOM by using CSS-style selector strings to specify which element you’re looking for. Something as complicated as “#app ul .title a:hover > span.left” can be used to choose one specific element, or a set of elements that are situated in various places around the document. Unfortunately there isn’t a direct replacement in native JavaScript, but a combination of getElementById, getElementsByTagName and getElementsByClassName, as well as iterating through the results, can be used to select the element(s) you need and not being able to rely on CSS pseudo-classes or some of the more esoteric selectors may result in structuring the HTML in a less convoluted way, avoiding unnecessary strain on the browser who has to deal with all your crazy shenanigans.

// Get the data-foo attribute of all links inside a .button list
var buttons = document.getElementsByClassName('buttons'),
    foo = '';
for (var i = 0; i < buttons.length; i++) {
    var links = buttons[i].getElementsByTagName('a');
    for (var j = 0; j < links.length; j++) {
        var link = links[j];
        foo += link.attributes['data-foo'];
    }
}

Edit: My good friend Torjus Bjåen made me aware of the querySelectorAll function, which provides the same CSS-style selector capabilities that jQuery does, albeit without some of the more “magical” selectors. It works like you’d expect and can be used to easily fetch elements that may be spread about the DOM.

var links = document.querySelectorAll('.buttons a.special');
for (var i = 0; i < links.length; i++) {
    links[i].style.backgroundColor = '#f09';
}

I highly suggest you check out his guide, it’s an excellent starting place for those looking to move away from jQuery and to a more native approach.