Simple javascript object-oriented way to handle DOM elements

http://zerobytes.github.io/Elemental/

##Elemental options

default_tag: 'div' ######Example

Elemental.options.default_tag = 'span';

##Elemental Static Methods

###String methods Trim - Will remove extra spaces from the begining and the end of the string

Elemental.trim(string)

toUnderscore - Transform string - thisString = this_string

Elemental.toUnderscore(string)

toDash - Transform string - thisString = this-string

Elemental.toDash(string)

toCamel - Transform string - this-string = thisString

Elemental.toCamel(string)

###Message methods This method will make a replace on each '@?' string found inside of the first argument with all parameters after the first one, ordered as used on method call

Elemental.message.apply(message,[n...]) ######Example

Elemental.message.apply("Hello @?. Have a good @?","Guilherme","night");

talk - Will make a screen reader say a given phrase It has an algorithym that calculates the avarage time for JAWS to say a phrase based on the amount of characters. ######Only works using a screen reader (e.g. JAWS)

Elemental.message.talk(text,optional removeTimer)

###DOM Methods

find - Will find a given selector within the DOM and return an Elemental object collection

Elemental.find(selector)

matchSelector - Will check if a given element matches a given selector

Elemental.matchSelector(element, selector)

new - Will create a new Elemental object collection based on first argument

Elemental.new(object, optional parent, optional forcetag) ######Example

//Gives <a href="#" class="link">
Elemental.new({tag:'a', href:'#',className:'link'});
//Gives
//<div some-attribute-that-shall-be-dashed-written="It Worked" style="height: 100px; width: 100px; background: rgb(170, 170, 170);">
//    Example of a div with children and events
//    <span style="color: red;">Span 1</span>
//    <span>Span 2</span>
//</div>
Elemental.new({
    style:{
        background:'#aaa',
        height:'100px',
        width:'100px'
    },
    text:'Example of a div with children and events',
    on:{
        click:function(event){
            //this = div element
            alert("I was clicked")
        }
    },
    items:[
        {tag:'span',text:'Span 1',style:{color:'red'}},
        {tag:'span',text:'Span 2'}
    ],
    someAttributeThatShallBeDashedWritten:'It Worked'
})

##Elemental Object Collection Methods get - Will return the DOM Element Object with the given index (parameter) or the list of all DOM Elements inside of Elemental Object Collection

get (index)

toString - Returns the HTML string of the first DOM element on this collection

toString:function(){

find - Will search within all the children elements for a given selector returning an Elemental Object Collection

find (selector)

append - Appends inside the DOM Elements the given item. item Can be a DOM Element or an Elemental Object Collection

append (item)

attr - Set an attribute in all DOM Elements inside the collection but gets only from the first. If no param is passed will return a full list of attributes for the first element

attr (attr, value)

objectAttr - Will set an attribute on each DOM Element Object inside this collection independent if it beeing and html attr or not

objectAttr (attr, value)

height - Returns the client height of the first DOM Element of this collection

height ()

width - Returns the client width of the first DOM Element of this collection

width ()

scrollTop - Returns the scroll top of the first DOM Element of this collection

scrollTop (scroll)

scrollLeft - Returns the scroll left of the first DOM Element of this collection

scrollLeft (scroll)

hasClass - Check if an element (with index, if given) has a given class. If no index is passed will check only the first

hasClass (className, index)

addClass - Add a given class to all DOM Elements inside collection

addClass (className)

removeClass - Removes a given class from all DOM Elements inside the collection

removeClass (className)

toggleClass - Adds or Removes a given class from all DOM Elements inside the collection

toggleClass (className)

css - Set or get a CSS property on all DOM Elements inside the collection. It is possible to pass an object on first argument with property=>value to set multiple css rules.

css (property, value)

is - check if the first DOM Element inside the collection matches the given selector Will support (individually) :visible, :disabled and :readonly and all common css selectors with multiple use

is (prop) ######Example

Elemental.find("input").is("[type=text], .form-control")

skipOut - Will return the element that matches the hierarchy with N levels above the first DOM Element inside collection

skipOut (levels)

parent - Will return the parent node of the first DOM Element inside the collection, with a given selector (if passed)

parent (selector)

focus - Will focus on the first DOM Element inside the collection

focus ()

blur - Will blur from the first DOM Element inside the collection

blur ()

next - Will jump to the next sibling DOM Element. If a selector is passed than it will jump to the next DOM Element that matches the given selector

next (selector)

prev - Will jump to the previous sibling DOM Element. If a selector is passed than it will jump to the previous DOM Element that matches the given selector

prev (selector)

index - Returns the index of the first DOM Element. If a selector is passed the index will be based on the given selector

index (selector)

siblings - Return all siblings of the first DOM Element inside the collection

siblings ()

show - Display all the DOM Elements inside the collection

show ()

hide - Hide all the DOM Elements inside the collection

hide ()

toggle - Display or Hide all the DOM Elements inside the collection

toggle ()

remove - Remove all the DOM Elements inside the collection from javascript DOM tree

remove ()

on - Binds an event to all DOM Elements inside the collection

on (event, fnCallback)

size - Returns the count of items inside the collection

size ()

conditionalAttribute - Sets a conditional attribute to all DOM Elements inside the collection

conditionalAttribute:

each - Iterates thru all items inside the Collection executing a callback function

each (callback, args)