Pure Javascript selectors

Javascript made jQuery, well jQuery made coding easy. However there many developers out there trying to find pure and native Javascript solutions to tackle out the addiction caused by jQuery. jQuery is short, easy to code and easy to understand. If you really wanna shift to pure Javascript then its time to go hard (or go home, anyways).
Well, this blog post is not about fighting that jQuery is harmful or not, neither I neglect the power of jQuery. This post is about learning native stuff. Right? Otherwise if you want a debate google it and you will find thousands of results fighting on this topic.

Lets dive into it with....id selector.

Select element by id

Alternate to:  $('#foo')

Selecting a DOM object with its id attribute is the simplest way you will find, even today teaching websites use this to get a better understanding. element.getElementById() returns a single element.

<span id='foo'>  This is a demo</span>
<script>
var e=document.getElementById('foo');
console.log(e.innerHTML);  // This is a demo
</script>

Select by class

Alternate to: $('.number')

Selecting an element by class name is also a simple way unless there is only one element with that class. element.getElementsByClassName() returns an array of elements with all the class name provided. As class is something that can be added to more than one element so technically you can get more than one elements.

<span class='number'> This is one </span>
<span class='number'> This is two </span>
<script>
    var e = document.getElementsByClassName('number');
    // Above one returns an array
    // Make a loop
    for (var i = 0; i < e.length; i++) {
        console.log(e[i].innerHTML);
        // This is one
        // This is two
    }
</script>

If you are sure that there is only one element with a class name, then its more than easy, just use [0] with selector which will represent the first element of an array.

<span class='number'> This is one </span>
<script>
    var e = document.getElementsByClassName('number')[0];
    console.log(e.innerHTML);
    // This is one
</script>

Select by tag name

Alternate to: $('span')
This one is similar to class name selector, difference is we use tag instead of class name. The better part is that if you wanted to select head or body tag then its quite easy since they do exist only once in DOM so you can select them with [0], like we did above to select first element of array. But for repeated tags like div and span we need to use loops.

<span>This is one</span>
<span>This is two</span>
<span>This is three</span>
<script>
    var e = document.getElementsByTagName('span');
    for (var i = 0; i < e.length; i++) {
    console.log(e[i].innerHTML);
    // This is one
    // This is two
    // This is three
    }
</script>

Select with CSS query selector

Well, this is the most easier way to select your desired element. element.querySelector() returns the first element matches, while element.querySelectorAll() returns an array of matched elements. However querySelector is supported in IE8 where querySelectorAll is supported in IE9 and on wards.

If you really do not care about IE7 then querySelector is the best of all can be used. Here is a working example of that.

<span class='number'> This is one </span>
<span class='number'> This is two </span>
<script>
    var e = document.querySelector('.number');
    console.log(e.innerHTML);
    // This is one
</script>

If used querySelectorAll then I've to use loop, well this is better.

Select child elements of an element

I'm taking about child element not the child nodes. Child elements are selected with element.childern and returns an array of all child elements. Here is a example of that

<ul>
    <li>This is one</li>
    <li>This is two</li>
    <li>This is three</li>
</ul>
<script>
    var e=document.querySelector('ul');
    var x=e.children;
    console.log(x.length);
    //3
    for(var i=0;i<x.length;i++){
    console.log(x[i].innerHTML);
    // This is one
    // This is two
    // This is three
    }
</script>

Conclusion

Plain Javascript makes the things a bit difficult but if you will stick with easier way then there are limitations there too. Due to jQuery file size it is a hard decision to put that in page or no. This is a start of converting your jQuery to Javascript. I would try to update this post later with some more complex selections. Got something, add in comments.