Dom.js

Css Query related function and Element extensions

Dependencies

Moo.js, Function.js, Array.js, String.js, Element.js

Author

Valerio Proietti, http://mad4milk.net

License

MIT-style license.

Summary
Dom.js Css Query related function and Element extensions
Utility Functions
Functions
$S() Selects DOM elements based on css selector(s).
$$ Same as $S
$E Selects a single (i.e.
$ES Returns a collection of Elements that match the selector passed in limited to the scope of the optional filter.
Element Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties
getElements Gets all the elements within an element that match the given (single) selector.
getElement Same as Element.getElements, but returns only the first.
getElement Same as Element.getElements, but allows for comma separated selectors, as in css.
document related functions
Functions
document. getElementsByClassName Returns all the elements that match a specific class name.
Elements Methods for dom queries arrays, as $S.
Properties
action Applies the supplied actions collection to each Element in the collection.

Utility Functions

Summary
Functions
$S() Selects DOM elements based on css selector(s).
$$ Same as $S
$E Selects a single (i.e.
$ES Returns a collection of Elements that match the selector passed in limited to the scope of the optional filter.

Functions

$S()

function $S()

Selects DOM elements based on css selector(s).  Extends the elements upon matching.

Arguments

any number of css selectors

Example

$S('a') //an array of all anchor tags on the page
$S('a', 'b') //an array of all anchor and bold tags on the page
$S('#myElement') //array containing only the element with id = myElement
$S('#myElement a.myClass') //an array of all anchor tags with the class "myClass" within the DOM element with id "myElement"

Returns

array array of all the dom elements matched

$$

Same as $S

$E

function $E( selector,
filter )

Selects a single (i.e. the first found) Element based on the selector passed in and an optional filter element.

Arguments

selector the css selector to match
filter optional; a DOM element to limit the scope of the selector match; defaults to document.

Example

$E('a', 'myElement') //find the first anchor tag inside the DOM element with id 'myElement'

Returns

a DOM element the first element that matches the selector

$ES

function $ES( selector,
filter )

Returns a collection of Elements that match the selector passed in limited to the scope of the optional filter.  See Also: Element.getElements for an alternate syntax.

Retunrs

array an array of dom elements that match the selector within the filter

Arguments

selector css selector to match
filter optional; a DOM element to limit the scope of the selector match; defaults to document.

Examples

$ES("a") //gets all the anchor tags; synonymous with $S("a")
$ES('a','myElement') //get all the anchor tags within $('myElement')

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties
getElements Gets all the elements within an element that match the given (single) selector.
getElement Same as Element.getElements, but returns only the first.
getElement Same as Element.getElements, but allows for comma separated selectors, as in css.

Properties

getElements

Gets all the elements within an element that match the given (single) selector.

Arguments

selector the css selector to match

Example

$('myElement').getElements('a'); // get all anchors within myElement

Credits

Say thanks to Christophe Beyls http://digitalia.be for the new regular expression that rules getElements, a big step forward in terms of speed.

getElement

Same as Element.getElements, but returns only the first.  Alternate syntax for $E, where filter is the Element.

getElement

Same as Element.getElements, but allows for comma separated selectors, as in css.  Alternate syntax for $S, where filter is the Element.

document related functions

Summary
Functions
document. getElementsByClassName Returns all the elements that match a specific class name.

Functions

document. getElementsByClassName

Returns all the elements that match a specific class name.  Here for compatibility purposes. can also be written: document.getElements(‘.className’), or $S(‘.className’)

Elements

Methods for dom queries arrays, as $S.

Summary
Properties
action Applies the supplied actions collection to each Element in the collection.

Properties

action

Applies the supplied actions collection to each Element in the collection.

Arguments

actions an Object with key/value pairs for the actions to apply.  The initialize key is executed immediatly.  Keys beginning with on will add a simple event (onclick for example).  Keys ending with event will add an event with Element.addEvent.  Other keys are useless.

Example

$S('a').action({
initialize: function() {
this.addClassName("anchor");
},
onclick: function(){
alert('clicked!');
},
mouseoverevent: function(){
alert('mouseovered!');
}
});
function $( el )
returns the element passed in with all the Element prototypes applied.
Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
function $S()
Selects DOM elements based on css selector(s).
function $E( selector,
filter )
Selects a single (i.e.
function $ES( selector,
filter )
Returns a collection of Elements that match the selector passed in limited to the scope of the optional filter.
Gets all the elements within an element that match the given (single) selector.
My Object Oriented javascript.
Contains Function prototypes, utility functions and Chain.
function $A( array )
Copy the array and returns it.
Same as Array.copy, but as function.
Contains Array prototypes and the function $A;
Contains String prototypes and Number prototypes.
Contains useful Element prototypes, to be used with the dollar function $.
Attaches an event listener to a DOM element.