Introduction
This chapter demonstrates about the Prototype.js Utility Methods Prototype have several convenience methods which cover DOM nodes with its functionality and following are the concepts covered in this chapter.
- Utility Methods
Description
Prototype have several utility methods in which most are the aliases of other prototype methods with an exception of $ method which covers all the nodes of DOM with fully functionalities. All utility methods have commonly starts with $. Following are the some utility methods are briefly described below.
$
$ is the most commonly used utility method which is represented with the syntax as shown below.
[code]
$(id/element);
[/code]
If Provided with string which returns the element with matching ID otherwise which returns the passed element and it takes an arbitrary number of arguments. In which all elements returned with the DOM extension. The code below demonstrates the $ as shown below.
[jscript]
<html>
<head>
<title>Prototype</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function test() {
node = $("firstDiv");
alert(node.innerHTML);
}
</script>
</head>
<body>
<div id = "firstDiv">
<p>first paragraph of SPlesson</p>
</div>
<div id = "secondDiv">
<p>Another paragraph of SPlesson</p>
</div>
<input type = "button" value = "Test $()" onclick = "test();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
$$
$$ is an arbitary utility method which can be represented with the syntax as shown below.
[code]
$$(cssRule...);
[/code]
Which takes an arbitrary number of CSS selectors and which returns document ordered-array with DOM extended elements which can be match any of them. The code below demonstrates the $$ as shown below.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type="text/javascript" src = "/javascript/prototype.js"></script>
<script>
function test() {
allNodes = $$("div");
for(i = 0; i < allNodes.length; i++) {
alert(allNodes[i].innerHTML);
}
}
</script>
</head>
<body>
<div id = "firstDiv" name = "div">
<p>first paragraph of SPlesson</p>
</div>
<div id = "secondDiv" name = "div">
<p>first paragraph of SPlesson</p>
</div>
<input type = "button" value = "Test $()" onclick = "test();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
$A
$A is an arbitary utility method which can be represented with the syntax as shown below.
[code]
$A(iterable)
[/code]
Which accepts an array like collections and it returns its equivalent array object which is an convincing method alias of array The code below demonstrates the $A as shown below.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showOptions() {
var NodeList = $('employees').getElementsByTagName('option');
var nodes = $A(NodeList);
nodes.each(function(node) {
alert(node.nodeName + ': ' + node.innerHTML);
});
}
</script>
</head>
<body>
<select id = "employees" size = "10" >
<option value = "5">john, Mohd</option>
<option value = "8">Devid, kate</option>
<option value = "1">Roy, Steve</option>
</select>
<br />
<input type = "button" value = "Show the options" onclick = "showOptions();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- $ is the mostly used utility method.
- Prototype library have lot of predefined objects.
- $$ have one or more filtering expressions.