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.

Specificiations

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>
<html>
    <head>
        <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;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>HTML5: Selector API</h1>
        </div>
        <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>                
            </ul>            
        </div>
    </body>
</html>

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

function selectFirstNewMethod(){
    var firstNewMethod = document.querySelector('li.new');
    firstNewMethod.style.color = 'Red';
}

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

function selectAllNewMethods(){
    var allNewMethods = document.querySelectorAll('li.new');
    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, li.new Selector.

function selectExistingAndNewMethods(){
    var existingAndNewMethods = document.querySelectorAll('li.exists, li.new');
    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).

2 comments:

  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.

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


    html5

    ReplyDelete