mrspoonzy at gmail Cube by Noah Ellman A powerful javascript toolkit, in research © by Noah Ellman

Element And DOM

HTMLElement General functions
DOM related

These methods are new methods that Jwee adds to html elements. You access these methods directly from the element itself, through the $ or wee function, or even without. And unlike JQuery, you can still access all of the standard (native) methods/properties of elements,, even when accessed via ID or CSS expression through $ or With Jwee, you have all the power of old-fasion javascript combined with Jwee's enhancements at your disposal.

Jwee extends DOM (HTML) elements with a variety of additional methods which are cross-compatable and that make many tasks much easier. If you are familiar with the Prototype framework, you'll find that Jweeuses almost all the same function names in this section. This was done on purpose to make it easier for developement.

It is important to note that Jwee has two different methods of extending DOM elements: the old way, and the new way. IE 6.0 and IE 7.0 only support the old way. IE 8.0 (running as IE8), as well as all the other Ghecko browsers use the new way. The new way is better, because it extends all DOM elements in the document all at once, with no overhead and no fuss. The old way uses manual extending. In order to be compatable, here is the proper way to script:

var ele = $('myElement');

ele.setOpacity(50); 	// GOOD

ele.firstChild.setOpacity(50); 	// BAD
// IE 6 and 7 will not know about setOpacity,
// so this line of code will error on those browsers

$(ele.firstChild).setOpacity(50); 	// GOOD :-)
// This is the best way and will work in all browsers
// By wrapping elements in $( ), you ensure they are extended.
var opacity = ele.firstChild.getOpacity();
// However, the second time you do not need to wrap through $(),
// unless you really want to

To ensure you are operating on an extended element, just wrap the element through $( ) first. Once the element has been called by $() once, it is permanently extended. You do not need to wrap through $() on the same element over and over again.

All these special methods are part of the element object, but they are all available as a generic function in the wee.elem object. When calling any of these method from wee.elem you must pass the element as the first argument.

For example:

// You could do this if you wanted to
wee.elem.hide( $("mydiv") );

// However, this is more logical

Chaining methods

Note: When any method has nothing important to return, then the method returns itself, so methods can be chained, such as...

// demonstration of how chaining methods

General functions
method HTMLElement.extend()
method HTMLElement.identify()
Returns a valid unique ID for the element. If the element already has an id attribute assigned to it then it will be returned. If no id is assigned the element it will get a new unique id assigned to it, and that will be returned.
ReturnsThe element's ID
method HTMLElement.tag(...)( [string tag] )
Get the element's tagName, lowercased, or compare the element against a list of tags.
  1. (optional) {string} A tag name or multiple tag names, like “td, th”.
ReturnsCalling this function without any arguments, returns the element's tagName lowercase. Calling this function with a string returns true if the the tagname you passed matches the element's tagname.
method HTMLElement.fullName()
Mostly for debugging purchases, returns a long name for the element, with its style class and id.
Returns{string} String with element's tag name, class name, and id.
method HTMLElement.truncate()
Remove all the the elements children, thus emptying the element.

Remove all the the elements children, thus emptying the element. The element itself remains though. truncate() removes children using appropropriate DOM methods, rather than innerHTML.

method HTMLElement.recycle()
Remove this element from the DOM.
ReturnsThe now removed element and its contents.

Remove this element. This is a generally a better way to remove an element and its contents rather than doing a .innerhtml="".Using innerHTML can cause memory leaks. Frodo's remove function however does a proper removal recursively down the DOM tree from this node.

method HTMLElement.update(...)( string html )
Like "innerHTML", but better. Replace the html contents of a element with your argument.
  1. {string} Some HTML
method HTMLElement.readAttribute(...)( string attr )
Get the value of attribute on an element.
  1. A string of the attribute name.
ReturnsThe atrribute value.
method HTMLElement.writeAttribute(...)( string attr,  value )
Set an attribute on the element
  1. A String of the attribute name
  2. A String of the attribute value
method HTMLElement.getData(...)( string key )
HTML 5.0 support element's new custom attributes,
method HTMLElement.setData(...)( string key,  mixed value )
HTML 5.0 support element's new custom attributes,
method HTMLElement.cleanWhitespace()
method HTMLElement.observe(...)( string event,  function handler )
Attach and event handler. Same as Event.add, but just a shortcut.
  1. The type of event, such as click or mouseover.
  2. Your event handling function.
method HTMLElement.stopObserving(...)( string id )
Remove an event handler you previously added with a special name.
method HTMLElement.setText()
Sets the text inside an element. This is pure text only and any HTML will appear literally.


method HTMLElement.animate(...)( string property,  startValue,  endValue,  float duration )
Run a animation/tween on the element
  1. A CSS property, such as width, top, opacity, font-size. You can use dashes or camel-cases.
  2. Starting value for the style property. If you just specify NULL however, Jwee will figure it out for you, and begin the animation from the styles current value.
  3. Ending value for the style property. You can also enter a value such as "auto", if you are animating height, for example!
  4. Number of seconds like 3 or a float like 1.2. This effects the speed and smoothness of the animation.
Show element. This is a shortcut for setting style.visibility to visible.
method HTMLElement.hide()
Hide element. This is a shorcut for setting style.visibility to hidden.
method HTMLElement.addClass(...)( string className )
Add an additional stylesheet class name to the element.
  1. style class name
method HTMLElement.removeClass(...)( string className ) : self
Remove the stylesheet class name from the element.
  1. style class name
method HTMLElement.hasClass(...)( string className ) : boolean
Returns true if the element has this className or false if it doesn't.
  1. style class name
method HTMLElement.toggleClass(...)( string className ) : self
If the element has the class, then remove it. If it doesn't, then add it.
  1. style class name
method HTMLElement.getStyle(...)( string attr )
Retreives the computed style of attr. For fetching explicit inline styles, use the normal
  1. {string} A style sheet property, in the hyphenated or camelcase syntax ( font-size or fontSize )
method HTMLElement.getStyles()
Gets the computed styles object. Calling this multiple times uses no overhead, as getStyles() caches itself as the currentStyle property of the element.
ReturnsReturns the computed styles object for the element.
??? styles?
method HTMLElement.css()
Update the element's style in an easy way, just using normal CSS syntax like in a stylesheet file.
  1. {string} Plain ol' CSS string, like "font-size:10px;color:blue;". The new style propeties will be added to (or updating) the element's current style.
ImportantThis is a important function/property to know.
method HTMLElement.opacity(...)( [number value] )
Get/set/clear the opacity on the elelment.
  1. Passing nothing return the element's opacity. Passing a numeric value sets the element's opacity. Passing null clear all opacity filters from element.
method HTMLElement.getOpacity(...): number
method HTMLElement.setOpacity(...)( number ) : self
method HTMLElement.clearOpacity(...): self
method HTMLElement.getRect()
Get the element's global (absolute) position in pixels on the page.
Returns{object} An object containing top, left, right, bottom, width, and height values.
Examplewee("#content") = wee("div#header").getRect().bottom + 'px';
method HTMLElement.setRect(...)( object or number,  [number] ,  [number] ,  [number] )

DOM related

method HTMLElement.query(...)( string query )
Just like, but starting from here. Pass a css expression or tag name.
ReturnsArray of elements
method HTMLElement.isChildOf(...)( element )
method HTMLElement.isInsideOf()
method HTMLElement.contains(...)( element )
See if this element contains another element.
  1. An element or ID.
method HTMLElement.insert()
method HTMLElement.append()
method HTMLElement.parent(...)( [tagName] )
Get the parent element that contains this element, like .parentNode but better. ).
  1. (optional) {string} Give a tagname such as "div" to get the closest parent element of that element type.
Returns{element} or null
Get the next element (sibling), after this one.
Returns{element} or null
method HTMLElement.previous()
Get the previous element (sibling), before this one.
Returns{element} or null
method HTMLElement.childs()
Get an array of the element's children, elements only - whitespace or text nodes
Returns{array} Array of elements

Discussion on /learn/api/element-dom-methods

Zacko 11/05/14 :  

Actually...i just didnt realize you had to pass the literal handler function to the .add() method. I figured it was a string. XD Opps

Zacko 11/05/14 :  

Actually its Event.getOwner() thats not working

Zacko 11/05/14 :  

wee.event.add doesn't seem to be working for me. Error: u.apply is not a function. any ideas?

Jwee Ninja 11/05/14 :  

@Xymon: Release date: to be determined

Jwee Ninja 11/05/14 :  

@Xymon: It might be complex to a n0ob. But if you know JS or Java then PHP is babytalk.