Javascript Query Selectors and the Selectors API September 20, 2008
Posted by fofo in Javascript, XHTML.Tags: IE8, Javascript, XHTML
trackback
When using Javascript one of the most common tasks is to use the DOM to obtain references to the various HTML elements. The only way to accomplish that with the DOM Level 2 API was to use either document.getElementByid or document.getElementsByTagName. With CSS we can have selectors that match HTML elements. Web browsers can see this matching and implement it. So the question was “Why can’t i do that with Javascript?”. The latest development in the DOM world is the W3C Selectors API .
This new selector API defines the querySelector, and querySelectorAll methods that take a CSS selector string and return the first matching element or a StaticNodeList of matching elements, respectively. The methods can be called from the document object.I will demonstrate the new methods of the W3C with an example.
Just copy and paste the 2 HTML code snippets below in 2 different .html files in your desktop. Then open them with IE and hit the button.
Imagine if we have a very simple HTML document and we want to access an HTML element and change its font size by clicking a button.
Using only the APIs from DOM Level 2, we use the getElementById method.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<HTML>
<HEAD>
<TITLE>setFontSize</TITLE>
<SCRIPT TYPE=”text/javascript”>
<!–
function setFontSize(){
document.getElementById(‘test1′).style.fontSize = ’200px’;
}
//–>
</SCRIPT>
</HEAD>
<BODY>
<p ID=”test”>Hi</p>
<p ID=”test1″>Hello there</p>
<FORM>
<INPUT TYPE=”button” VALUE=”change Size” onClick=”setFontSize()”>
</FORM>
</BODY>
</HTML>
and now using the Selectors API and the querySelector method.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<HEAD>
<TITLE>setFontSize</TITLE>
<SCRIPT TYPE=”text/javascript”>
<!–
function setFontSize(){
var myitem = document.querySelector(‘#test1′);
myitem.style.fontSize=’200px’;
}
//–>
</SCRIPT>
</HEAD>
<BODY>
<p ID=”test”>Hi</p>
<p ID=”test1″>Hello there</p>
<FORM>
<INPUT TYPE=”button” VALUE=”change Size” onClick=”setFontSize()”>
</FORM>
</BODY>
</HTML>
Safari 3.1, Internet Explorer 8 beta and Firefox 3.1 alpha1,support the Selector API.Opera is going to add support for this API very soon.
Maaplai, this is nice… i did not try the code but i can understand this. i was browsing the firefox wikipedia entry and i found this query selector to be new and ofcourse yet it is. anyway… thank you for reminding people from this post.