Introducing the Prototype JavaScript Library - Handling specific elements of a web page: introducing the $ function
(Page 2 of 4 )
One of the most useful functions that comes bundled with Prototype is undoubtedly the $ function. Despite its short name, this handy function allows you to retrieve a specific element of a web page by passing to it the corresponding ID attribute (this is similar to the "getElementById" method that belongs to the DOM).
However, this function is much more flexible. It accepts multiple arguments, which means that it's possible to work with many elements included in same web document.
Having outlined generally how the $ function works, let me show you a pair of brief examples, where single and multiple parameters are passed to the function in question. Here are the respective code samples:
The $ function using one parameter
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of $ function</title>
<script language="javascript" src="prototype-1.4.0.js"></script>
<script language="javascript">
// example using the $ function with one element
function displayHTML(){
var div=$('samplediv');
var htmlcont=$('htmlcontainer');
htmlcont.innerHTML=div.innerHTML;
}
window.onload=function(){
if(document.getElementById && document.createElement
&& document.getElementsByTagName){
var btn=$('testbutton');
if(!btn){return};
btn.onclick=displayHTML;
}
}
</script>
</head>
<body>
<div id="samplediv">
<p>This is a sample paragraph, which is wrapped by a DIV</p>
</div>
<div id="htmlcontainer"></div>
<input type="button" value="Show innerHTML" id="testbutton" />
</body>
</html>
The $ function using three parameters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of $ function</title>
<script language="javascript" src="prototype-1.4.0.js"></script>
<script language="javascript">
// example using the $ function with multiple arguments
function displayHTML(){
var divs=$('samplediva','sampledivb','sampledivc');
for(var i=0;i<divs.length;i++){
var htmlcont=$('htmlcontainer');
htmlcont.innerHTML+=divs[i].innerHTML;
}
}
window.onload=function(){
if(document.getElementById && document.createElement &&
document.getElementsByTagName){
var btn=$('testbutton');
if(!btn){return};
btn.onclick=displayHTML;
}
}
</script>
</head>
<body>
<div id="samplediva">
<p>This is a sample paragraph, which is wrapped by the first
DIV</p>
</div>
<div id="sampledivb">
<p>This is a sample paragraph, which is wrapped by the
second DIV</p>
</div>
<div id="sampledivc">
<p>This is a sample paragraph, which is wrapped by the third
DIV</p>
</div>
<div id="htmlcontainer"></div>
<input type="button" value="Show innerHTML" id="testbutton" />
</body>
</html>
As shown above, the first example demonstrates a simple implementation of the $ function with only one argument to first retrieve a "samplediv" DIV element, and then manipulate its "innerHTML" property. As you saw, the process is indeed simple and straightforward.
The second example is slightly more complex. It shows how the $ function can be used for retrieving multiple elements of the same web document. In this case, three DIVs are fetched, and then their "innerHTML" property is also modified in a simple way.
In addition, you should notice how the $ function returns an array of elements when called with multiple parameters. This feature places it several steps ahead of the conventional "getElementById()" method that corresponds to the DOM. Now do you see how handy this function can be for manipulating diverse web page elements?
Based upon the two concrete examples that you saw before, I think that you should have a good idea of how the $ function does its thing. But I'm only scratching the surface when it comes to exploring the diverse possibilities offered by this cool function.
Nevertheless, the Prototype library has many other useful functions, so it's time to move on and take a quick look at some of them. In the next section I'll be explaining how to use two handy functions that come bundled with this library: the $A and $H functions respectively.
To learn how these functions can be used successfully, please click on the link below and keep reading.
Next: Working easily with arrays and hashes: using the $A and $H functions >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
