WebKit has introduced another development towards greater support of W3C initiatives – Selectors API, currently in the status of Working Draft. 

Until now, without a specific JS framework (e.g. jQuery, Prototype or MooTools), one could just get to the HTML element in the old fashioned way:

var myDiv = document.getElementById('myDiv');

Now what W3C has worked out, is a splendid initiative just because the fact that you can dump those heavy JS frameworks if you only need the selectors.

Here’s the example of how Selectors API helps you:

JavaScript of the above example:

function detectLangs() {
    var divs = document.querySelectorAll(".reddiv, .greendiv, .bluediv");
    var rd = document.querySelector("#resultContainer");
    var langs = new Array();
    var divCount = divs.length;
    for (var i=0; i < divCount; i++) langs.push(divs[i].innerHTML);
    rd.innerHTML = "Markup languages are: " + langs.toString();
    rd.style.display = "block";
}

Note the querySelectorAll() and querySelector() methods in the code making it way more convenient than with the getElemenById() method.

Apart from the convenience it’s also much speedier to use native support compared to common JavaScript libraries. Here’s the modified slickspeed benchmark in which the Native column represents the superiority of the Selectors API.

More: