Contains useful Element prototypes, to be used with the dollar function $.
Moo.js, Function.js, Array.js, String.js
Valerio Proietti, http://mad4milk.net
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. |
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. |
adopt | Inserts the passed element 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 == 1. |
getStyle | Returns the style of the Element given the property passed in. |
addEvent | Attaches an event listener to a DOM element. |
removeEvent | Works as Element.addEvent, but instead removes the previously added event listener. |
getPrevious | Returns the previousSibling of the Element, excluding text nodes. |
getNext | Works as Element.getPrevious, but tries to find the nextSibling. |
getNext | Works as Element.getPrevious, but tries to find the firstChild. |
getLast | Works as Element.getPrevious, but tries to find the lastChild. |
setProperty | Sets an attribute for the Element. |
setProperties | Sets numerous attributes for the Element. |
setHTML | Sets the innerHTML of the Element. |
getProperty | Gets the an attribute of the Element. |
getTag | Returns the tagName of the element in lower case. |
getTop | Returns the distance from the top of the window to the Element. |
getLeft | Returns the distance from the left of the window to the Element. |
getValue | Returns the value of the Element, if its tag is textarea, select or input. |
Utility Functions | |
Functions | |
$Element | Applies a method with the passed in args to the passed in element. |
$() | 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 $.
Properties | |
initialize | Creates a new element of the type passed in. |
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. |
adopt | Inserts the passed element 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 == 1. |
getStyle | Returns the style of the Element given the property passed in. |
addEvent | Attaches an event listener to a DOM element. |
removeEvent | Works as Element.addEvent, but instead removes the previously added event listener. |
getPrevious | Returns the previousSibling of the Element, excluding text nodes. |
getNext | Works as Element.getPrevious, but tries to find the nextSibling. |
getNext | Works as Element.getPrevious, but tries to find the firstChild. |
getLast | Works as Element.getPrevious, but tries to find the lastChild. |
setProperty | Sets an attribute for the Element. |
setProperties | Sets numerous attributes for the Element. |
setHTML | Sets the innerHTML of the Element. |
getProperty | Gets the an attribute of the Element. |
getTag | Returns the tagName of the element in lower case. |
getTop | Returns the distance from the top of the window to the Element. |
getLeft | Returns the distance from the left of the window to the Element. |
getValue | Returns the value of the Element, if its tag is textarea, select or input. |
Creates a new element of the type passed in.
el | the tag name for the element you wish to create. |
var div = new Element('div');
Inserts the Element before the passed element.
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. |
html:
<div id="myElement"></div>
<div id="mySecondElement"></div>
js:
$('mySecondElement').injectBefore('myElement');
resulting html
<div id="myElement"></div>
<div id="mySecondElement"></div>
Same as Element.injectBefore, but inserts the element after.
Same as Element.injectBefore, but inserts the element inside.
Inserts the passed element inside the Element. Works as Element.injectInside but in reverse.
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. |
Clones the Element and returns the cloned one.
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 | 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 | 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 |
$('myElement').setStyle('width', '300px'); //the width is now 300px
Applies a collection of styles to the Element.
source | an object or string containing all the styles to apply |
$('myElement').setStyles({
border: '1px solid #000',
width: '300px',
height: '400px'
});
OR
$('myElement').setStyle('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 == 1.
opacity | Accepts numbers 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
Attaches an event listener to a DOM element.
action | the event to monitor (‘click’, ‘load’, etc) |
fn | the function to execute |
$('myElement').addEvent('click', function(){alert('clicked!')});
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.
Sets an attribute for the Element.
property | 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 | the new innerHTML for the element. |
$('myElement').setHTML(newHTML) //the innerHTML of myElement is now = newHTML
Gets the an attribute of the Element.
property | the attribute to retrieve |
$('myImage').getProperty('src') // returns whatever.gif
the value, or an empty string
Returns the tagName of the element in lower case.
$('myImage').getTag() // returns 'img'
The tag name in lower case
function $Element( el, method, args )
Applies a method with the passed in args to the passed in element. Useful if you dont want to extend the element
el | the element |
method | a string representing the Element Class method to execute on that element |
args | an array representing the arguments to pass to that method |
$Element(el, 'hasClass', className) //true or false
function $( el )
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.
returns the element passed in with all the Element prototypes applied.
function $( el )
Applies a method with the passed in args to the passed in element.
function $Element( el, method, args )
function $A( array )