Css Query related function and Element extensions
Moo.js, Function.js, Array.js, String.js, Element.js
Valerio Proietti, http://mad4milk.net
MIT-style license.
| 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. |
function $S()
Selects DOM elements based on css selector(s). Extends the elements upon matching.
any number of css selectors
$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"
| array | array of all the dom elements matched |
Same as $S
function $E( selector, filter )
Selects a single (i.e. the first found) Element based on the selector passed in and an optional filter element.
| selector | the css selector to match |
| filter | optional; a DOM element to limit the scope of the selector match; defaults to document. |
$E('a', 'myElement') //find the first anchor tag inside the DOM element with id 'myElement'
| a DOM element | the first element that matches the selector |
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.
| array | an array of dom elements that match the selector within the filter |
| selector | css selector to match |
| filter | optional; a DOM element to limit the scope of the selector match; defaults to document. |
$ES("a") //gets all the anchor tags; synonymous with $S("a")
$ES('a','myElement') //get all the anchor tags within $('myElement')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. |
Gets all the elements within an element that match the given (single) selector.
| selector | the css selector to match |
$('myElement').getElements('a'); // get all anchors within myElement
Say thanks to Christophe Beyls http://digitalia.be for the new regular expression that rules getElements, a big step forward in terms of speed.
Same as Element.getElements, but returns only the first. Alternate syntax for $E, where filter is the Element.
Same as Element.getElements, but allows for comma separated selectors, as in css. Alternate syntax for $S, where filter is the Element.
| Functions | |
| document. getElementsByClassName | Returns all the elements that match a specific class name. |
Returns all the elements that match a specific class name. Here for compatibility purposes. can also be written: document.getElements(‘.className’), or $S(‘.className’)
Methods for dom queries arrays, as $S.
| Properties | |
| action | Applies the supplied actions collection to each Element in the collection. |
Applies the supplied actions collection to each Element in the collection.
| 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. |
$S('a').action({
initialize: function() {
this.addClassName("anchor");
},
onclick: function(){
alert('clicked!');
},
mouseoverevent: function(){
alert('mouseovered!');
}
});returns the element passed in with all the Element prototypes applied.
function $( el )
Selects DOM elements based on css selector(s).
function $S()
Selects a single (i.e.
function $E( selector, filter )
Returns a collection of Elements that match the selector passed in limited to the scope of the optional filter.
function $ES( selector, filter )
function $A( array )