- Prototype Tutorial
- Prototype - Home
- Prototype - Short Overview
- Prototype - Useful Features
- Prototype - Utility Methods
- Prototype - Element Object
- Prototype - Number Processing
- Prototype - Strings Processing
- Prototype - Array Processing
- Prototype - Hash processing
- Prototype - Basic Object
- Prototype - Templating
- Prototype - Enumerating
- Prototype - Event Handling
- Prototype - Form Management
- Prototype - JSON Support
- Prototype - AJAX Support
- Prototype - Expressing Ranges
- Prototype - Periodical Execution
- Prototype Useful Resources
- Prototype - Quick Guide
- Prototype - Useful Resources
- Prototype - Discussion
Prototype - $$() Method
The $$() method parses one or more CSS filtering expressions, analogous to the ones used to define CSS rules, and returns the elements that match these filters.
Syntax
$$(cssRule...);
Return Value
An array of HTML elements.
Example
Here is an old way of writing Javascript statement to get all the nodes of DOM with name div.
nodes = document.getElementsByTagName('div');
Using $$(), we can shorten it up as follows −
nodes = $$('div');
Following is same as $('contents'), only it returns an array anyway.
$$('#contents');
Example
<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>This is first paragraph</p> </div> <div id = "secondDiv" name = "div"> <p>This is another paragraph</p> </div> <input type = "button" value = "Test $()" onclick = "test();"/> </body> </html>
Output
More Examples
Following returns all links inside the element of ID "contents" with a rel attribute.
$$('#contents a[rel]');
Following returns all links with a href attribute of value "#" (eyeew!).
$$('a[href="#"]');
Following returns all links within the elements of ID "navbar" or "sidebar".
$$('#navbar a', '#sidebar a');
Following returns all links, excluding those whose rel attribute contains the word "nofollow".
$$('a:not([rel~=nofollow])');
Following returns all even rows within all table bodies.
$$('table tbody > tr:nth-child(even)');
Following returns all DIVs without content (i.e., whitespace-only).
$$('div:empty');