Monday, November 29, 2010

HTML5: New in the javascript Selector API

Because I finally got the MCTS 70-536 certification out of the way, I can start experimenting with some fun stuff again. One of the things on the top of my list is HTML5. I started reading the book Pro HTML5 Programming, so expect more posts on HTML5 in the near future.

In this post I will show you two new methods in the javascript Selector API which are extremely useful to find elements.


Methods we can now use to find elements are getElementById(), getElementsByName() and getElementsByTagName(). In HTML5 there are two new methods in the Selector API: querySelector() and querySelectorAll(). These new methods find elements by matching against a group of selectors.

Their description as in the W3C specifications is:
The querySelector() method on the NodeSelector interface must, when invoked, return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null.
The querySelectorAll() method on the NodeSelector interface must, when invoked, return a NodeList containing all of the matching Element nodes within the node’s subtrees, in document order. If there are no such nodes, the method must return an empty NodeList.

Throwing out some feelers

To play with these new methods I made a simple page which displays an unordered list of methods in the Selector API. Existing methods have the class exists and new methods have the class new.

<!DOCTYPE html>
        <title>HTML5: Selector API</title>        
        <style type="text/css">
            html {
                font-family: Verdana;
                font-size: 1.2em;
            #header {
                width: 100%;
            .exists {
                font-style: italic;
            .new {
                color: green;
                font-weight: bold;
        <div id="header">
            <h1>HTML5: Selector API</h1>
        <div id="content">
            <ul id="methodslist">
                <li class="exists">getElementById</li>
                <li class="exists">getElementsByName</li>
                <li class="exists">getElementsByTagName</li>
                <li class="new">[NEW] querySelector</li>
                <li class="new">[NEW] querySelectorAll</li>                

To select the first new method we can use the querySelector() method with the Selector. The first matching element is returned.

function selectFirstNewMethod(){
    var firstNewMethod = document.querySelector(''); = 'Red';

To select all new methods we can use the querySelectorAll() method with the Selector. All matching elements are returned.

function selectAllNewMethods(){
    var allNewMethods = document.querySelectorAll('');
    for (var i = 0; i < allNewMethods.length; i++){
        allNewMethods[i].style.color = 'Blue';

To select all methods (existing and new) we can use the querySelectorAll() method with the li.exists, Selector.

function selectExistingAndNewMethods(){
    var existingAndNewMethods = document.querySelectorAll('li.exists,');
    for (var i = 0; i < existingAndNewMethods.length; i++){
        existingAndNewMethods[i].style.color = 'Yellow';

These examples just demonstrate the tip of the iceberg. Check out the Selectors specifications to see how they can be used to greatly improve the way of finding elements in the DOM.

Demo and source

You can find the demo and source here.

The HTML5 Selector API and jQuery?

I am far from a jQuery or javascript expert, so I wonder: how will these methods and selectors influence jQuery? Will they be encapsulated into jQuery, because I can imagine that these natively implemented methods will be a few times faster than jQuery Selectors?

Edit: querySelectorAll is being used by jQuery since version 1.4.3. (Source).


  1. Great work came at a perfect time for me,html5 would be really cool if we could at least get an option to enable the HTML5 mode player in the next Subsonic release. Not only would it bypass the need for flash, but it also has some extra features (wav playback, etc).It seems the biggest issue would be with flv video, but by transcoding to mp4 instead of flv, that could be solved. Even without the video fix, making it optional would allow those of us the mainly use Subsonic for music to benefit from the new player.

  2. wow! thanks a lot for sharing..i am glad that i have found your site..its pretty helpful and informative..


  3. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.
    Docker online training

  4. I am really very happy to find this particular site. I just wanted to say thank you for this huge read!! I absolutely enjoying every petite bit of it and I have you bookmarked to test out new substance you post.
    reactjs online training

  5. love to hear that you have got your MCTS 70-536 certification and I appreciate your hardwork thou. But I'm more like a blogger than a tech guy who love to read blog on the topic like difference between a Blog and a Website. But you are doing great and best of luck for your future.

  6. Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us
    java training in Bangalore