the compact javascript framework
in partnership with mediatemple
Contains useful Element prototypes, to be used with the dollar function $.
MIT-style license.
Element.js | Contains useful Element prototypes, to be used with the dollar function $. |
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $. |
Properties | |
initialize | Creates a new element of the type passed in. |
Elements | |
Utility Functions | |
Functions | |
$ | returns the element passed in with all the Element prototypes applied. |
$$ | Selects, and extends DOM elements. |
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $. |
Properties | |
set | you can set events, styles and properties with this shortcut. |
injectBefore | Inserts the Element before the passed element. |
injectAfter | Same as Element.injectBefore, but inserts the element after. |
injectInside | Same as Element.injectBefore, but inserts the element inside. |
injectTop | Same as Element.injectInside, but inserts the element inside, at the top. |
adopt | Inserts the passed elements inside the Element. |
remove | Removes the Element from the DOM. |
clone | Clones the Element and returns the cloned one. |
replaceWith | Replaces the Element with an element passed. |
appendText | Appends text node to a DOM element. |
hasClass | Tests the Element to see if it has the passed in className. |
addClass | Adds the passed in class to the Element, if the element doesnt already have it. |
removeClass | Works like Element.addClass, but removes the class from the element. |
toggleClass | Adds or removes the passed in class name to the element, depending on if it’s present or not. |
setStyle | Sets a css property to the Element. |
setStyles | Applies a collection of styles to the Element. |
setOpacity | Sets the opacity of the Element, and sets also visibility == “hidden” if opacity == 0, and visibility = “visible” if opacity > 0. |
getStyle | Returns the style of the Element given the property passed in. |
getStyles | Returns an object of styles of the Element for each argument passed in. |
getPrevious | Returns the previousSibling of the Element, excluding text nodes. |
getNext | Works as Element.getPrevious, but tries to find the nextSibling. |
getFirst | Works as Element.getPrevious, but tries to find the firstChild. |
getLast | Works as Element.getPrevious, but tries to find the lastChild. |
getParent | returns the $(element.parentNode) |
getChildren | returns all the $(element.childNodes), excluding text nodes. |
hasChild | returns true if the passed in element is a child of the $(element). |
getProperty | Gets the an attribute of the Element. |
removeProperty | Removes an attribute from the Element |
getProperties | same as Element.getStyles, but for properties |
setProperty | Sets an attribute for the Element. |
setProperties | Sets numerous attributes for the Element. |
setHTML | Sets the innerHTML of the Element. |
setText | Sets the inner text of the Element. |
getText | Gets the inner text of the Element. |
getTag | Returns the tagName of the element in lower case. |
empty | Empties an element of all its children. |
Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties | |
initialize | Creates a new element of the type passed in. |
Creates a new element of the type passed in.
el | string; the tag name for the element you wish to create. you can also pass in an element reference, in which case it will be extended. |
props | object; the properties you want to add to your element. Accepts the same keys as Element.setProperties, but also allows events and styles |
the key styles will be used as setStyles, the key events will be used as addEvents. any other key is used as setProperty.
new Element('a', { 'styles': { 'display': 'block', 'border': '1px solid black' }, 'events': { 'click': function(){ //aaa }, 'mousedown': function(){ //aaa } }, 'class': 'myClassSuperClass', 'href': 'http://mad4milk.net' });
$$('myselector').each(function(el){ //... });
some iterations here, $$(‘myselector’) is also an array.
$$('myselector').setStyle('color', 'red');
every element returned by $$(‘myselector’) also accepts Element methods, in this example every element will be made red.
returns the element passed in with all the Element prototypes applied.
el | a reference to an actual element or a string representing the id of an element |
$('myElement') // gets a DOM element by id with all the Element prototypes applied. var div = document.getElementById('myElement'); $(div) //returns an Element also with all the mootools extentions applied.
You’ll use this when you aren’t sure if a variable is an actual element or an id, as well as just shorthand for document.getElementById().
a DOM element or false (if no id was found).
you need to call $ on an element only once to get all the prototypes. But its no harm to call it multiple times, as it will detect if it has been already extended.
document.getElementsBySelector = document.getElementsByTagName; function $$()
Selects, and extends DOM elements. Elements arrays returned with $$ will also accept all the Element methods. The return type of element methods run through $$ is always an array. If the return array is only made by elements, $$ will be applied automatically.
HTML Collections, arrays of elements, arrays of strings as element ids, elements, strings as selectors. Any number of the above as arguments are accepted.
if you load Element.Selectors.js, $$ will also accept CSS Selectors, otherwise the only selectors supported are tag names.
$$('a') //an array of all anchor tags on the page $$('a', 'b') //an array of all anchor and bold tags on the page $$('#myElement') //array containing only the element with id = myElement. (only with <Element.Selectors.js>) $$('#myElement a.myClass') //an array of all anchor tags with the class "myClass" //within the DOM element with id "myElement" (only with <Element.Selectors.js>) $$(myelement, myelement2, 'a', ['myid', myid2, 'myid3'], document.getElementsByTagName('div')) //an array containing: // the element referenced as myelement if existing, // the element referenced as myelement2 if existing, // all the elements with a as tag in the page, // the element with id = myid if existing // the element with id = myid2 if existing // the element with id = myid3 if existing // all the elements with div as tag in the page
array | array of all the dom elements matched, extended with $. Returns as Elements. |
Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties | |
set | you can set events, styles and properties with this shortcut. |
injectBefore | Inserts the Element before the passed element. |
injectAfter | Same as Element.injectBefore, but inserts the element after. |
injectInside | Same as Element.injectBefore, but inserts the element inside. |
injectTop | Same as Element.injectInside, but inserts the element inside, at the top. |
adopt | Inserts the passed elements inside the Element. |
remove | Removes the Element from the DOM. |
clone | Clones the Element and returns the cloned one. |
replaceWith | Replaces the Element with an element passed. |
appendText | Appends text node to a DOM element. |
hasClass | Tests the Element to see if it has the passed in className. |
addClass | Adds the passed in class to the Element, if the element doesnt already have it. |
removeClass | Works like Element.addClass, but removes the class from the element. |
toggleClass | Adds or removes the passed in class name to the element, depending on if it’s present or not. |
setStyle | Sets a css property to the Element. |
setStyles | Applies a collection of styles to the Element. |
setOpacity | Sets the opacity of the Element, and sets also visibility == “hidden” if opacity == 0, and visibility = “visible” if opacity > 0. |
getStyle | Returns the style of the Element given the property passed in. |
getStyles | Returns an object of styles of the Element for each argument passed in. |
getPrevious | Returns the previousSibling of the Element, excluding text nodes. |
getNext | Works as Element.getPrevious, but tries to find the nextSibling. |
getFirst | Works as Element.getPrevious, but tries to find the firstChild. |
getLast | Works as Element.getPrevious, but tries to find the lastChild. |
getParent | returns the $(element.parentNode) |
getChildren | returns all the $(element.childNodes), excluding text nodes. |
hasChild | returns true if the passed in element is a child of the $(element). |
getProperty | Gets the an attribute of the Element. |
removeProperty | Removes an attribute from the Element |
getProperties | same as Element.getStyles, but for properties |
setProperty | Sets an attribute for the Element. |
setProperties | Sets numerous attributes for the Element. |
setHTML | Sets the innerHTML of the Element. |
setText | Sets the inner text of the Element. |
getText | Gets the inner text of the Element. |
getTag | Returns the tagName of the element in lower case. |
empty | Empties an element of all its children. |
Inserts the Element before the passed element.
el | an element reference or the id of the element to be injected in. |
html: <div id="myElement"></div> <div id="mySecondElement"></div> js: $('mySecondElement').injectBefore('myElement'); resulting html: <div id="mySecondElement"></div> <div id="myElement"></div>
Same as Element.injectBefore, but inserts the element after.
Same as Element.injectBefore, but inserts the element inside.
Same as Element.injectInside, but inserts the element inside, at the top.
Inserts the passed elements inside the Element.
accepts elements references, element ids as string, selectors ($$(‘stuff’)) / array of elements, array of ids as strings and collections.
Clones the Element and returns the cloned one.
contents | boolean, when true the Element is cloned with childNodes, default true |
the cloned element
var clone = $('myElement').clone().injectAfter('myElement'); //clones the Element and append the clone after the Element.
Replaces the Element with an element passed.
el | a string representing the element to be injected in (myElementId, or div), or an element reference. If you pass div or another tag, the element will be created. |
the passed in element
$('myOldElement').replaceWith($('myNewElement')); //$('myOldElement') is gone, and $('myNewElement') is in its place.
Appends text node to a DOM element.
text | the text to append. |
<div id="myElement">hey</div> $('myElement').appendText(' howdy'); //myElement innerHTML is now "hey howdy"
Tests the Element to see if it has the passed in className.
true | the Element has the class |
false | it doesn’t |
className | string; the class name to test. |
<div id="myElement" class="testClass"></div> $('myElement').hasClass('testClass'); //returns true
Adds the passed in class to the Element, if the element doesnt already have it.
className | string; the class name to add |
<div id="myElement" class="testClass"></div> $('myElement').addClass('newClass'); //<div id="myElement" class="testClass newClass"></div>
Works like Element.addClass, but removes the class from the element.
Adds or removes the passed in class name to the element, depending on if it’s present or not.
className | the class to add or remove |
<div id="myElement" class="myClass"></div> $('myElement').toggleClass('myClass'); <div id="myElement" class=""></div> $('myElement').toggleClass('myClass'); <div id="myElement" class="myClass"></div>
Sets a css property to the Element.
property | the property to set |
value | the value to which to set it; for numeric values that require “px” you can pass an integer |
$('myElement').setStyle('width', '300px'); //the width is now 300px $('myElement').setStyle('width', 300); //the width is now 300px
Applies a collection of styles to the Element.
source | an object or string containing all the styles to apply. When its a string it overrides old style. |
$('myElement').setStyles({ border: '1px solid #000', width: 300, height: 400 });
OR
$('myElement').setStyles('border: 1px solid #000; width: 300px; height: 400px;');
Sets the opacity of the Element, and sets also visibility == “hidden” if opacity == 0, and visibility = “visible” if opacity > 0.
opacity | float; Accepts values from 0 to 1. |
$('myElement').setOpacity(0.5) //make it 50% transparent
Returns the style of the Element given the property passed in.
property | the css style property you want to retrieve |
$('myElement').getStyle('width'); //returns "400px" //but you can also use $('myElement').getStyle('width').toInt(); //returns 400
the style as a string
Returns an object of styles of the Element for each argument passed in. Arguments: properties - strings; any number of style properties Example:
$('myElement').getStyles('width','height','padding'); //returns an object like: {width: "10px", height: "10px", padding: "10px 0px 10px 0px"}
Returns the previousSibling of the Element, excluding text nodes.
$('myElement').getPrevious(); //get the previous DOM element from myElement
the sibling element or undefined if none found.
Works as Element.getPrevious, but tries to find the firstChild.
Works as Element.getPrevious, but tries to find the lastChild.
returns all the $(element.childNodes), excluding text nodes. Returns as Elements.
Gets the an attribute of the Element.
property | string; the attribute to retrieve |
$('myImage').getProperty('src') // returns whatever.gif
the value, or an empty string
same as Element.getStyles, but for properties
Sets an attribute for the Element.
property | string; the property to assign the value passed in |
value | the value to assign to the property passed in |
$('myImage').setProperty('src', 'whatever.gif'); //myImage now points to whatever.gif for its source
Sets numerous attributes for the Element.
source | an object with key/value pairs. |
$('myElement').setProperties({ src: 'whatever.gif', alt: 'whatever dude' }); <img src="whatever.gif" alt="whatever dude">
Sets the innerHTML of the Element.
html | string; the new innerHTML for the element. |
$('myElement').setHTML(newHTML) //the innerHTML of myElement is now = newHTML
Sets the inner text of the Element.
text | string; the new text content for the element. |
$('myElement').setText('some text') //the text of myElement is now = 'some text'
returns the element passed in with all the Element prototypes applied.
Selects, and extends DOM elements.
document.getElementsBySelector = document.getElementsByTagName; function $$()
Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and GeSHi