XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.

advertisement

What's New in Prototype 1.5?
by Scott Raymond | Pages: 1, 2, 3, 4, 5

The 1.5 release brought a ton of new methods to Element.Methods:

  • replace(html) is a cross-browser implementation of the outerHTML property; replaces the entire element (including its start and end tags) with html. For example:

    $('target').replace('<p>Hello</p>');

  • toggleClassName(className) adds or removes the class className to/from the element. For example:

    $('target').toggleClassName('active');

  • getWidth() returns the width of the element in pixels. For example:

    $('target').getWidth();

  • getElementsByClassName(className) returns an array of all descendants of the element that have the class className. For example:

    $('target').getElementsByClassName('foo');

  • getElementsBySelector(expression1[, expression2 [...]) returns an array of all descendants of the element that match any of the given CSS selector expressions. For example:

    $('target').getElementsBySelector('.foo');
    $('target').getElementsBySelector('li.foo', 'p.bar');

  • childOf(ancestor) returns true when the element is a child of ancestor. For example:

    $('target').childOf($('bar')); // => false

  • inspect() returns a string representation of the element useful for debugging, including its name, id, and classes. For example:

    $('target').inspect(); // => '<div id="target">'

  • ancestors(), descendants(), previousSiblings(), nextSiblings(), and siblings() return arrays of related elements. For example:

    $('target').ancestors();
    $('target').descendants();
    $('target').previousSiblings();
    $('target').nextSiblings();
    $('target').siblings();

  • immediateDescendants() returns an array of the element's child nodes without text nodes. For example:

    $('target').immediateDescendants();

  • up([expression[, index]]) returns the first ancestor of the element that optionally matches the CSS selector expression. If index is given, it returns the nth matching element.

    $('target').up();
    $('target').up(1);
    $('target').up('li');
    $('target').up('li', 1);

  • down([expression[, index]]) returns the first child of the element that optionally matches the CSS selector expression. If index is given, it returns the nth matching element.

    $('target').down();
    $('target').down(1);
    $('target').down('li');
    $('target').down('li', 1);

  • previous([expression[, index]]) returns the previous sibling of the element that optionally matches the CSS selector expression. If index is given, it returns the nth matching element.

    $('target').previous();
    $('target').previous(1);
    $('target').previous('li');
    $('target').previous('li', 1);

  • next([expression[, index]]) returns the next sibling of the element that optionally matches the CSS selector expression. If index is given, it returns the nth matching element.

    $('target').next();
    $('target').next(1);
    $('target').next('li');
    $('target').next('li', 1);

  • Pages: 1, 2, 3, 4, 5

    Next Pagearrow