The Extend Namespace

Extend allows you to chain one function after another, and introduces support for helper functions.

Summary

The Extend Namespace	Extend allows you to chain one function after another, and introduces support for helper functions.
Version	1.0
Element	These functions are bound to elements.
Properties
addClass	Adds class name to element
removeClass	Removes class name to element
replaceClass	Replaces element’s class with another one
hasClass	Tests if element has class
toggleClass	Toggles a class on/off
getElementsByAttribute	Grabs elements By Attribute and optional Value pair
insertAfter	Inserts an element after a specified reference point (Honestly, why the heck isn’t this spec’d?)
elementName	Returns the proper (lowercased) nodeName
getFirstChild	Returns the first child of a parent element
getLastChild	Returns the last child of a parent element
hasChildNode	Tests if element has a specified child node
hasParentNode	Tests if element has a specified parent node
getChildNodes	Get an element’s child nodes
getParentNode	Get an element’s parentNode (can be specified)
removeNode	Remove an element from the DOM http://msdn2.microsoft.com- /en-us- /library- /ms536708.aspx (shock!)
getText	Get an element’s text value
setText	Set an element’s text value
setOpacity	Set an element’s opacity value
getComputedStyle	Shortcut for the verbose document.defaultView.getComputedStyle
setStyle	Shortcut for foo.style[property] = value;
getPosition	Get an element’s current position relative to its parent
getDocumentPosition	Get an element’s current position relative to the document
setInnerHTML	Set an element’s innerHTML
getInnerHTML	Get an element’s innerHTML
Chaining	Extend introduces a way to chain getters and setters.

Version

1.0

License

Flow is licensed under a Creative Commons Attribution-Share Alike 3.0 License http://creativecommons.org/licenses/by-sa/3.0/us/. You are free to share, modify and remix our code as long as you share alike.

Requires

Flow.js.
Dom.js.
Event.js.

Element

These functions are bound to elements.

Summary

Properties
addClass	Adds class name to element
removeClass	Removes class name to element
replaceClass	Replaces element’s class with another one
hasClass	Tests if element has class
toggleClass	Toggles a class on/off
getElementsByAttribute	Grabs elements By Attribute and optional Value pair
insertAfter	Inserts an element after a specified reference point (Honestly, why the heck isn’t this spec’d?)
elementName	Returns the proper (lowercased) nodeName
getFirstChild	Returns the first child of a parent element
getLastChild	Returns the last child of a parent element
hasChildNode	Tests if element has a specified child node
hasParentNode	Tests if element has a specified parent node
getChildNodes	Get an element’s child nodes
getParentNode	Get an element’s parentNode (can be specified)
removeNode	Remove an element from the DOM http://msdn2.microsoft.com- /en-us- /library- /ms536708.aspx (shock!)
getText	Get an element’s text value
setText	Set an element’s text value
setOpacity	Set an element’s opacity value
getComputedStyle	Shortcut for the verbose document.defaultView.getComputedStyle
setStyle	Shortcut for foo.style[property] = value;
getPosition	Get an element’s current position relative to its parent
getDocumentPosition	Get an element’s current position relative to the document
setInnerHTML	Set an element’s innerHTML
getInnerHTML	Get an element’s innerHTML

Properties

addClass

Adds class name to element

Parameters

elClass

the class to add.

Example

var foo = document.getElementById("foo");
foo.addClass("zomg");

removeClass

Removes class name to element

Parameters

elClass

(optional) the class to remove.

Example

var foo = document.getElementById("foo");
foo.removeClass("zomg"); // removes class "zomg"
foo.removeClass(); // removes all classes

replaceClass

Replaces element’s class with another one

Parameters

elClass

the class to replace.

Example

var foo = document.getElementById("foo");
foo.replaceClass("zomg", "lolz");

hasClass

Tests if element has class

Parameters

elClass

the class to test.

Example

var foo = document.getElementById("foo");
if (foo.hasClass("zomg")) {
   console.log("lolz");
}

toggleClass

Toggles a class on/off

Parameters

elClass

the class to toggle.

Example

var foo = document.getElementById("foo");
foo.toggleClass("zomg");

getElementsByAttribute

Grabs elements By Attribute and optional Value pair

Shorthand

getByAttr

Parameters

elAttribute	the attribute to retrieve.
elValue	(optional) a matching value pair

Example

var foo = document.getElementsByAttribute("type", "submit");
var foo = document.getByAttr("type", "submit"); // shortcut

insertAfter

Inserts an element after a specified reference point (Honestly, why the heck isn’t this spec’d?) http://developer.mozilla.org- /en- /docs- /DOM:element.insertBefore#Specification

Parameters

newNode	the node to insert.
referenceNode	the reference point to insert after

Example

var foo = document.createElement("div").addClass("foo");
foo.insertAfter(foo, document.getById("zomg"));

elementName

Returns the proper (lowercased) nodeName

Example

var foo = document.getElementById("foo");
console.log(foo.nodeName); // returns "DIV" in some browsers, "div" in others
console.log(foo.elementName()); // always returns "div"

getFirstChild

Returns the first child of a parent element

Parameters

childNode

(optional) Filter results by element type

Example

var foo = document.getElementById("foo");
var child = foo.getFirstChild(); // returns first child
child = foo.getFirstChild("li"); // returns first li child

getLastChild

Returns the last child of a parent element

Parameters

childNode

(optional) Filter results by element type

Example

var foo = document.getElementById("foo");
var child = foo.getLastChild(); // returns last child
child = foo.getLastChild("li"); // returns last li child

hasChildNode

Tests if element has a specified child node

Parameters

childNode

The specified child node

Example

var foo = document.getElementById("foo");
if (foo.hasChildNode("li")) {
   console.log("zomg");
}

hasParentNode

Tests if element has a specified parent node

Parameters

parentNode

The specified parent node

Example

var foo = document.getElementById("foo");
if (foo.hasParentNode("body")) {
   console.log("zomg");
}

getChildNodes

Get an element’s child nodes

Parameters

parentNode

(optional) Filter results by element type

Example

var foo = document.getElementById("foo");
var children = foo.getChildNodes(); // Returns all child nodes
children = foo.getChildNodes("li"); // Returns all child "li" nodes

getParentNode

Get an element’s parentNode (can be specified)

Parameters

parentNode

(optional) Filter results by element type

Example

var foo = document.getElementById("foo");
var children = foo.getParentNode(); // Returns immediate parentNode
children = foo.getChildNodes("div"); // Returns first "div" parent

removeNode

Remove an element from the DOM http://msdn2.microsoft.com- /en-us- /library- /ms536708.aspx (shock!)

Example

var foo = document.getElementById("foo");
foo.parentNode.removeChild(foo); // The DOM 3 way
foo.removeNode(); // faster method

getText

Get an element’s text value

Example

var foo = document.getElementById("foo");
var text = foo.getText();

setText

Set an element’s text value

Parameters

range	(optional) Set a range to replace (can be string or RegExp)
text	The text to insert

Example

var foo = document.getElementById("foo");
var text = /I are bored/; // can also be a string
foo.setText(text, "NOT!");

foo.setText("I am so not bored.");

setOpacity

Set an element’s opacity value

Parameters

value

(optional) The opacity value (1-100 scale)

Example

var foo = document.getElementById("foo");
foo.setOpacity(50); // Set to 50% opaque

getComputedStyle

Shortcut for the verbose document.defaultView.getComputedStyle

Parameters

cssProp

The property to retrieve

Example

var foo = document.getElementById("foo");
var width = document.defaultView.getComputedStyle(foo, null).getPropertyValue("width");
width = foo.getComputedStyle("width"); // Much shorter

setStyle

Shortcut for foo.style[property] = value;

Parameters

cssProp	The property to retrieve
value	The value to set

Example

var foo = document.getElementById("foo");
foo.setStyle("width", "200px");
foo.setStyle({
   width : "200px",
   opacity : 40,
   display : "block"
});

getPosition

Get an element’s current position relative to its parent

Example

var foo = document.getElementById("foo");
var pos = foo.getPosition(); // returns {x, y} coordinates
console.log(pos.x, pos.y);

getDocumentPosition

Get an element’s current position relative to the document

Example

var foo = document.getElementById("foo");
var pos = foo.getDocumentPosition(); // returns {x, y} coordinates
console.log(pos.x, pos.y);

setInnerHTML

Set an element’s innerHTML

Parameters

markup	The markup to insert
method	(optional) If defined, append or prepend to element

Example

var foo = document.getElementById("foo");
foo.setInnerHTML("<li>zomg</li>"); // overrides innerHTML
foo.setInnerHTML("<li>lolz</li>", "append"); // appends HTML to foo
foo.setInnerHTML("<li>wtf</li>", "prepend"); // prepends HTML to foo

getInnerHTML

Get an element’s innerHTML

Example

var foo = document.getElementById("foo");
var inner = foo.getInnerHTML();
console.log(inner); // returns foo's innerHTML

Chaining

Extend introduces a way to chain getters and setters.

Example

Chaining getters:

Grab all .zomg elements inside all .foo elements

var foo = document.getByClass("foo").getByClass("zomg");

Let’s filter that. Grab all li.zomg elements inside all ul.foo elements

var foo = document.getByTag("ul").filter(function(ul) {
    return ul.hasClass("foo");
}).getByTag("li").filter(function(li) {
    return li.hasClass("zomg");
});

Chaining setters:

Grab all .zomg elements inside all ul.foo elements, add an event listener to each

var foo = document.getByTag("ul").filter(function(ul) {
    return ul.hasClass("foo");
}).getByClass("zomg").addEventListener("click", function() {
    console.log(this);
});

Grab all .zomg elements inside all ul.foo elements, add an event listener to each, add classname "done"

var foo = document.getByTag("ul").filter(function(ul) {
    return ul.hasClass("foo");
}).getByClass("zomg").addEventListener("click", function() {
    console.log(this);
}).addClass("done");