jump to navigation

Javascript Query Selectors and the Selectors API September 20, 2008

Posted by fofo in Javascript, XHTML.
Tags: , ,
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.

Add to FacebookAdd to NewsvineAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to Ma.gnoliaAdd to TechnoratiAdd to Furl

Comments»

1. Jayapal Chandran - October 3, 2009

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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: