Lecture 14
Using Prototype
Ketan Mayer-Patel
University of North Carolina
The $ function
- Selects an Element node by id attribute
var element = $(id);
If no element with that id attribute exists, returns null.
The $$ function
- Selects element nodes by CSS selector
var elements = $$(css selector);
Always returns an array.
- Even if just one matches.
- Even if there are no matches.
Extended Element objects
- Prototype extends Element objects
- $() and $$() objects always return extended elements.
Creating New Elements
- Extended element constructor
var element = new Element(tag);
Modifying Elements
- element.remove()
- Removes the element from the DOM
- element.update(content)
- Changes the content inside the element.
- element.replace(content)
- Replaces the element in the DOM with content
- element.insert(content)
- Inserts at end of any existing content (i.e., 'bottom').
- Alternate form exists for inserting content at top, before, or after.
What is Content
- Several extended Element methods accept content as a parameter
- Content can be:
- A string interpreted as XHTML
- A DOM element object
Moving Around The DOM
- Element methods for moving around.
var ancestor = element.up();
var descendent = element.down();
var sibling = element.previous();
var sibling element.next();
All can take CSS selectors to serve as criteria for matching.
Without criteria, first avaiable returned
If none, undefined returned.
Manipulating class
- Element methods for working with class attribute.
element.addClassName(classname);
element.removeClassName(classname);
Example 1
Example 2
Escaping HTML text
- Prototype extends strings with an HTML escape method.
var a_string = "Here is some text
";
var escaped = a_string.escapeHTML();