A.Node

Uses:

Node

Defined in: alloy-ui/src/aui-node/js/aui-node-base.js:106

Module: aui-node-base
Parent Module: aui-node

Augments the YUI3 Node with more util methods.

Check the live demo.

Constructor

`A.Node`

()

Defined in alloy-ui/src/aui-node/js/aui-node-base.js:106

Example:

<div id="toggleColor">Click me!</div>

// Create an AUI instance and load the 'aui-node' module
                                    YUI().use(
                                     'aui-node',
                                     function(Y) {
                                       // Select the node(s) using a css selector string
                                       var node = Y.one('#toggleColor');
                                    
                                       // Change the background color on a click event
                                       node.on(
                                         'click',
                                         function() {
                                           var randomColor = Math.floor(Math.random() * 16777215).toString(16);
                                           node.setStyle('background', '#' + randomColor);
                                         }
                                       );
                                     }
                                    );

Index

Methods

`_get`

(

attr

)

Any private

Inherited from Node: yui3/src/node/js/node-core.js:410

Helper method for get.

Parameters:

attr String

The attribute

Returns:

Any:

The current value of the attribute

`_getBoxStyleAsNumber`

(

sides
map

)

Number private

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:899

Returns the combined size of the box style for the specified sides.

Parameters:

sides String

Can be t, r, b, l or any combination of those to represent the top, right, bottom, or left sides.
map String

An object mapping mapping the "sides" param to the a CSS value to retrieve

Returns:

Number:

`_getText`

(

childNodes

)

private

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:934

Extracts text content from the passed nodes.

Parameters:

childNodes Native NodeList

`_hide`

() private

Inherited from Node but overwritten in alloy-ui/src/aui-node/js/aui-node-base.js:966

Overrides Y.Node._hide. Adds aui-hide to the node's cssClass

`_hoverOutHandler`

(

event

)

private

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:980

The event handler for the "out" function that is fired for events attached via the hover method.

Parameters:

event EventFacade

`_hoverOverHandler`

(

event

)

private

Inherited from Node but overwritten in alloy-ui/src/aui-node/js/aui-node-base.js:996

The event handler for the "over" function that is fired for events attached via the hover method.

Parameters:

event EventFacade

`_ioComplete`

(

code
response
args

)

protected

Inherited from Node: yui3/src/node/js/node-load.js:7

The default IO complete handler.

Parameters:

code String

The response code.
response Object

The response object.
args Array

An array containing the callback and selector

`_isHidden`

() Boolean private

Inherited from Node: yui3/src/node/js/node-view.js:44

Returns whether the node is hidden by YUI or not. The hidden status is determined by the 'hidden' attribute and the value of the 'display' CSS property.

Returns:

Boolean:

true if the node is hidden.

`_place`

(

newNode
refNode

)

private

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:1048

Places a node or html string at a specific location

Parameters:

newNode Node | String
refNode Node

`_show`

() private

Inherited from Node but overwritten in alloy-ui/src/aui-node/js/aui-node-base.js:1072

Overrides Y.Node._show. Removes aui-hide from the node's cssClass

`addClass`

(

className

)

chainable

Inherited from Node: yui3/src/node/js/node-class.js:16

Adds a class name to the node.

Parameters:

className String

the class name to add to the node's class attribute

`all`

(

selector

)

NodeList

Inherited from Node: yui3/src/node/js/node-core.js:638

Retrieves a NodeList based on the given CSS selector.

Parameters:

selector String

The CSS selector to test against.

Returns:

NodeList:

A NodeList instance for the matching HTMLCollection/Array.

`ancestor`

(

fn
testSelf
stopFn

)

Node

Inherited from Node: yui3/src/node/js/node-core.js:545

Returns the nearest ancestor that passes the test applied by supplied boolean method.

Parameters:

fn String | Function

A selector string or boolean method for testing elements. If a function is used, it receives the current node being tested as the only argument. If fn is not passed as an argument, the parent node will be returned.
testSelf Boolean

optional Whether or not to include the element in the scan
stopFn String | Function

optional A selector string or boolean method to indicate when the search should stop. The search bails when the function returns true or the selector matches. If a function is used, it receives the current node being tested as the only argument.

Returns:

Node:

The matching Node instance or null if not found

`ancestors`

(

fn
testSelf

)

NodeList

Inherited from Node: yui3/src/node/js/node-core.js:568

Returns the ancestors that pass the test applied by supplied boolean method.

Parameters:

fn String | Function

A selector string or boolean method for testing elements.
testSelf Boolean

optional Whether or not to include the element in the scan If a function is used, it receives the current node being tested as the only argument.

Returns:

NodeList:

A NodeList instance containing the matching elements

`ancestorsByClassName`

(

className
testSelf

)

NodeList

Defined in alloy-ui/src/aui-node/js/aui-node-base.js:141

Returns the current ancestors of the node element filtered by a className. This is an optimized method for finding ancestors by a specific CSS class name.

Example:

A.one('#nodeId').ancestorsByClassName('aui-hide');

Parameters:

className String

A selector to filter the ancestor elements against.
testSelf Boolean

optional Whether or not to include the element in the scan

Returns:

NodeList:

`append`

(

content

)

chainable

Inherited from Node: yui3/src/node/js/node-create.js:100

Inserts the content as the lastChild of the node.

Parameters:

content String | Node | HTMLElement

The content to insert. Use <a href="../classes/Escape.html#method_html">Y.Escape.html()</a> to escape html content.

`appendChild`

(

node

)

Node

Inherited from Node: yui3/src/node/js/node-create.js:112

Parameters:

node String | HTMLElement | Node

Node to be appended. Use <a href="../classes/Escape.html#method_html">Y.Escape.html()</a> to escape html content.

Returns:

Node:

The appended node

`appendTo`

(

node

)

chainable

Inherited from Node: yui3/src/node/js/node-create.js:135

Appends the node to the given node.

Parameters:

node Node | HTMLElement | String

The node to append to. If node is a string it will be considered as a css selector and only the first matching node will be used.

Example:

 // appendTo returns the node that has been created beforehand
                                                 Y.Node.create('<p></p>').appendTo('body').set('text', 'hello world!');

`attr`

(

name
value

)

String

Defined in alloy-ui/src/aui-node/js/aui-node-base.js:181

Gets or sets the value of an attribute for the first element in the set of matched elements. If only the name is passed it works as a getter.

Example:

var node = A.one('#nodeId');
                                                node.attr('title', 'Setting a new title attribute');
                                                // Alert the value of the title attribute: 'Setting a new title attribute'
                                                alert( node.attr('title') );

Parameters:

name String

The name of the attribute
value String

The value of the attribute to be set. Optional.

Returns:

String:

`blur`

() chainable

Inherited from Node: yui3/src/node/js/node-imports.js:62

Passes through to DOM method.

`center`

(

val

)

chainable

Defined in alloy-ui/src/aui-node/js/aui-node-base.js:282

Centralizes the current Node instance with the passed val Array, Node, String, or Region, if not specified, the body will be used.

Example:

var node = A.one('#nodeId');
                                                // Center the node with the #container.
                                                node.center('#container');

Parameters:

val Array | Node | Region | String

Array, Node, String, or Region to center with.

`clearData`

(

name

)

chainable

Inherited from Node: yui3/src/node/js/node-data.js:107

Clears internally stored data.

Parameters:

name String

The name of the field to clear. If no name is given, all data is cleared.

`clone`

() Node

Defined in alloy-ui/src/aui-node/js/aui-node-base.js:236

Normalizes the behavior of cloning a node, which by default should not clone the events that are attached to it.

Example:

var node = A.one('#nodeId');
                                                node.clone().appendTo('body');

Returns:

Node:

`cloneNode`

(

deep

)

Node

Inherited from Node: yui3/src/node/js/node-imports.js:23

Passes through to DOM method.

Parameters:

deep Boolean

Whether or not to perform a deep clone, which includes subtree and attributes

Returns:

Node:

The clone

`compareTo`

(

refNode

)

Boolean

Inherited from Node: yui3/src/node/js/node-core.js:498

Compares nodes to determine if they match. Node instances can be compared to each other and/or HTMLElements.

Parameters:

refNode HTMLElement | Node

The reference node to compare to the node.

Returns:

Boolean:

True if the nodes match, false if they do not.

`contains`

(

needle

)

Boolean

Inherited from Node: yui3/src/node/js/node-imports.js:125

Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.

Parameters:

needle Node | HTMLElement

The possible node or descendent

Returns:

Boolean:

Whether or not this node is the needle its ancestor

`create`

(

html
doc

)

Node

Inherited from Node: yui3/src/node/js/node-create.js:28

Creates a new Node using the provided markup string.

Parameters:

html String

The markup used to create the element. Use <a href="../classes/Escape.html#method_html">Y.Escape.html()</a> to escape html content.
doc HTMLDocument

An optional document context

Returns:

Node:

A Node instance bound to a DOM node or fragment

`createCaption`

() chainable

Inherited from Node: yui3/src/node/js/node-imports.js:92

Passes through to DOM method. Only valid on TABLE elements

`delegate`

(

type
fn
spec
context
args

)

EventHandle

Inherited from Node: yui3/src/node/js/node-event-delegate.js:7

Sets up a delegation listener for an event occurring inside the Node. The delegated event will be verified against a supplied selector or filtering function to test if the event references at least one node that should trigger the subscription callback.

Selector string filters will trigger the callback if the event originated from a node that matches it or is contained in a node that matches it. Function filters are called for each Node up the parent axis to the subscribing container node, and receive at each level the Node and the event object. The function should return true (or a truthy value) if that Node should trigger the subscription callback. Note, it is possible for filters to match multiple Nodes for a single event. In this case, the delegate callback will be executed for each matching Node.

For each matching Node, the callback will be executed with its 'this' object set to the Node matched by the filter (unless a specific context was provided during subscription), and the provided event's <code>currentTarget</code> will also be set to the matching Node. The containing Node from which the subscription was originally made can be referenced as <code>e.container</code>.

Parameters:

type String

the event type to delegate
fn Function

the callback function to execute. This function will be provided the event object for the delegated event.
spec String | Function

a selector that must match the target of the event or a function to test target and its parents for a match
context Object

optional argument that specifies what 'this' refers to.
args Any multiple

0..n additional arguments to pass on to the callback function. These arguments will be added after the event object.

Returns:

EventHandle:

the detach handle

`destroy`

(

recursivePurge

)

Inherited from Node: yui3/src/node/js/node-core.js:725

Nulls internal node references, removes any plugins and event listeners. Note that destroy() will not remove the node from its parent or from the DOM. For that functionality, call remove(true).

Parameters:

recursivePurge Boolean

(optional) Whether or not to remove listeners from the node's subtree (default is false)

`empty`

() chainable

Inherited from Node but overwritten in alloy-ui/src/aui-node/js/aui-node-base.js:326

Removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element.

Example:

var node = A.one('#nodeId');
                                                node.empty();

`focus`

() chainable

Inherited from Node: yui3/src/node/js/node-imports.js:55

Passes through to DOM method.

`generateID`

() String

Inherited from Node: yui3/src/node/js/node-imports.js:168

Applies a unique ID to the node if none exists

Returns:

String:

The existing or generated ID

`get`

(

attr

)

Any

Inherited from Node: yui3/src/node/js/node-core.js:384

Returns an attribute value on the Node instance. Unless pre-configured (via Node.ATTRS), get hands off to the underlying DOM node. Only valid attributes/properties for the node will be queried.

Parameters:

attr String

The attribute

Returns:

Any:

The current value of the attribute

`getAttribute`

(

name

)

String

Inherited from Node: yui3/src/node/js/node-imports.js:142

Allows getting attributes on DOM nodes, normalizing in some cases. This passes through to the DOM node, allowing for custom attributes.

Parameters:

name String

The attribute name

Returns:

String:

The attribute value

`getAttrs`

(

attrs

)

Object

Inherited from Node: yui3/src/node/js/node-core.js:479

Returns an object containing the values for the requested attributes.

Parameters:

attrs Array

an array of attributes to get values

Returns:

Object:

An object with attribute name/value pairs.

`getBorderWidth`

(

sides

)

Number

Defined in alloy-ui/src/aui-node/js/aui-node-base.js:369

Returns the combined width of the border for the specified sides.

Parameters:

sides String

Can be t, r, b, l or any combination of those to represent the top, right, bottom, or left sides.

Returns:

Number:

`getCenterXY`

() Array

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:383

Gets the current center position of the node in page coordinates.

Returns:

Array:

The XY position of the node

`getComputedStyle`

(

attr

)

String

Inherited from Node: yui3/src/node/js/node-style.js:47

Returns the computed value for the given style property. Use camelCase (e.g. 'backgroundColor') for multi-word properties.

Parameters:

attr String

The style attribute to retrieve.

Returns:

String:

The computed value of the style property for the element.

`getData`

(

name

)

Any | Object

Inherited from Node: yui3/src/node/js/node-data.js:16

Retrieves arbitrary data stored on a Node instance. If no data is associated with the Node, it will attempt to retrieve a value from the corresponding HTML data attribute. (e.g. node.getData('foo') will check node.getAttribute('data-foo')).

Parameters:

name String

Optional name of the data field to retrieve. If no name is given, all data is returned.

Returns:

Any | Object:

Whatever is stored at the given field, or an object hash of all fields.

`getDOM`

() HTMLNode

Defined in alloy-ui/src/aui-node/js/aui-node-base.js:356

Retrieves the DOM node bound to a Node instance. See getDOMNode.

Returns:

HTMLNode:

The DOM node bound to the Node instance.

`getDOMNode`

() HTMLElement

Inherited from Node: yui3/src/node/js/node-core.js:840

Returns the DOM node bound to the Node instance

Returns:

HTMLElement:

`getElementsByTagName`

(

tagName

)

NodeList

Inherited from Node: yui3/src/node/js/node-imports.js:47

Passes through to DOM method.

Parameters:

tagName String

The tagName to collect

Returns:

NodeList:

A NodeList representing the HTMLCollection

`getHTML`

() String

Inherited from Node: yui3/src/node/js/node-create.js:184

Returns the node's current html content (e.g. innerHTML)

Returns:

String:

The html content

`getMargin`

(

sides

)

Number

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:397

Returns the combined size of the margin for the specified sides.

Parameters:

sides String

Can be t, r, b, l or any combination of those to represent the top, right, bottom, or left sides.

Returns:

Number:

`getPadding`

(

sides

)

Number

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:411

Returns the combined width of the border for the specified sides.

Parameters:

sides String

Can be t, r, b, l or any combination of those to represent the top, right, bottom, or left sides.

Returns:

Number:

`getStyle`

(

attr

)

String

Inherited from Node: yui3/src/node/js/node-style.js:34

Returns the style's current value. Use camelCase (e.g. 'backgroundColor') for multi-word properties.

Parameters:

attr String

The style attribute to retrieve.

Returns:

String:

The current value of the style property for the element.

`getX`

() Number

Inherited from Node: yui3/src/node/js/node-screen.js:122

Gets the current position of the node in page coordinates.

Returns:

Number:

The X position of the node

`getXY`

() Array

Inherited from Node: yui3/src/node/js/node-screen.js:106

Gets the current position of the node in page coordinates.

Returns:

Array:

The XY position of the node

`getY`

() Number

Inherited from Node: yui3/src/node/js/node-screen.js:137

Gets the current position of the node in page coordinates.

Returns:

Number:

The Y position of the node

`guid`

() String

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:425

Sets the id of the Node instance if the object does not have one. The generated id is based on a guid created by the stamp method.

Returns:

String:

The current id of the node

`hasAttribute`

(

attribute

)

Boolean

Inherited from Node: yui3/src/node/js/node-imports.js:32

Passes through to DOM method.

Parameters:

attribute String

The attribute to test for

Returns:

Boolean:

Whether or not the attribute is present

`hasChildNodes`

() Boolean

Inherited from Node: yui3/src/node/js/node-imports.js:16

Passes through to DOM method.

Returns:

Boolean:

Whether or not the node has any childNodes

`hasClass`

(

className

)

Boolean

Inherited from Node: yui3/src/node/js/node-class.js:7

Determines whether the node has the given className.

Parameters:

className String

the class name to search for

Returns:

Boolean:

Whether or not the node has the specified class

`height`

() Number

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:1120

Returns the height of the content, not including the padding, border or margin. If a height is passed, the node's overall height is set to that size.

Example:

var node = A.one('#nodeId');
                                                node.height(); //return content height
                                                node.height(100); // sets box height

Returns:

Number:

`hide`

(

name
config
callback

)

chainable

Inherited from Node: yui3/src/node/js/node-view.js:93

Hides the node. If the "transition" module is loaded, hide optionally animates the hiding of the node using either the default transition effect ('fadeOut'), or the given named effect.

Parameters:

name String

A named Transition effect to use as the show effect.
config Object

Options to use with the transition.
callback Function

An optional function to run after the transition completes.

`hideAccessible`

()

Provided by the aui-node-accessible module.

Defined in alloy-ui/src/aui-node/js/aui-node-accessible.js:13

Hides the node, while still keeping it accessible by screen readers.

`hover`

(

overFn
outFn

)

Node

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:446

Creates a hover interaction.

Parameters:

overFn String
outFn String

Returns:

Node:

The current Node instance

`html`

(

value

)

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:490

Gets or sets the HTML contents of the node. If the value is passed it's set the content of the element, otherwise it works as a getter for the current content.

Example:

var node = A.one('#nodeId');
                                                node.html('Setting new HTML');
                                                // Alert the value of the current content
                                                alert( node.html() );

Parameters:

value String

A string of html to set as the content of the node instance.

`inDoc`

(

doc

)

Boolean

Inherited from Node: yui3/src/node/js/node-core.js:514

Determines whether the node is appended to the document.

Parameters:

doc Node | HTMLElement

optional An optional document to check against. Defaults to current document.

Returns:

Boolean:

Whether or not this node is appended to the document.

`innerHeight`

() Number

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:1151

Returns the size of the box from inside of the border, which is offsetHeight plus the padding on the top and bottom.

Example:

var node = A.one('#nodeId');
                                                node.innerHeight();

Returns:

Number:

`innerWidth`

() Number

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:1136

Returns the size of the box from inside of the border, which is the offsetWidth plus the padding on the left and right.

Example:

var node = A.one('#nodeId');
                                                node.innerWidth();

Returns:

Number:

`inRegion`

(

node2
all
altRegion

)

Boolean

Inherited from Node: yui3/src/node/js/node-region.js:61

Determines whether or not the node is within the given region.

Parameters:

node2 Node | Object

The node or region to compare with.
all Boolean

Whether or not all of the node must be in the region.
altRegion Object

An alternate region to use (rather than this node's).

Returns:

Boolean:

True if in region, false if not.

`insert`

(

content
where

)

chainable

Inherited from Node: yui3/src/node/js/node-create.js:39

Inserts the content before the reference node.

Parameters:

content String | Node | HTMLElement | NodeList | HTMLCollection

The content to insert. Use <a href="../classes/Escape.html#method_html">Y.Escape.html()</a> to escape html content.
where Int | Node | HTMLElement | String

The position to insert at. Possible "where" arguments <dl> <dt>Y.Node</dt> <dd>The Node to insert before</dd> <dt>HTMLElement</dt> <dd>The element to insert before</dd> <dt>Int</dt> <dd>The index of the child element to insert before</dd> <dt>"replace"</dt> <dd>Replaces the existing HTML</dd> <dt>"before"</dt> <dd>Inserts before the existing HTML</dd> <dt>"before"</dt> <dd>Inserts content before the node</dd> <dt>"after"</dt> <dd>Inserts content after the node</dd> </dl>

`insertBefore`

(

newNode
refNode

)

Node

Inherited from Node: yui3/src/node/js/node-create.js:123

Parameters:

newNode String | HTMLElement | Node

Node to be appended
refNode HTMLElement | Node

Node to be inserted before. Use <a href="../classes/Escape.html#method_html">Y.Escape.html()</a> to escape html content.

Returns:

Node:

The inserted node

`intersect`

(

node2
altRegion

)

Object

Inherited from Node: yui3/src/node/js/node-region.js:45

Compares the intersection of the node with another node or region

Parameters:

node2 Node | Object

The node or region to compare with.
altRegion Object

An alternate region to use (rather than this node's).

Returns:

Object:

An object representing the intersection of the regions.

`invoke`

(

method
[args*]

)

Any

Inherited from Node: yui3/src/node/js/node-core.js:763

Invokes a method on the Node instance

Parameters:

method String

The name of the method to invoke
[args*] Any optional

Arguments to invoke the method with.

Returns:

Any:

Whatever the underly method returns. DOM Nodes and Collections return values are converted to Node/NodeList instances.

`load`

(

url
selector
callback

)

chainable

Inherited from Node: yui3/src/node/js/node-load.js:36

Loads content from the given url and replaces the Node's existing content with the remote content.

Parameters:

url String

The URL to load via XMLHttpRequest.
selector String

An optional selector representing a subset of an HTML document to load.
callback Function

An optional function to run after the content has been loaded.

`next`

(

fn
[all]

)

Node

Inherited from Node: yui3/src/node/js/node-core.js:598

Returns the next matching sibling. Returns the nearest element node sibling if no method provided.

Parameters:

fn String | Function

A selector or boolean method for testing elements. If a function is used, it receives the current node being tested as the only argument.
[all] Boolean optional

Whether text nodes as well as element nodes should be returned, or just element nodes will be returned(default)

Returns:

Node:

Node instance or null if not found

`on`

(

type
fn
[context]
[arg*]

)

EventHandle

Inherited from Node: yui3/src/node/js/node-event.js:221

Subscribe a callback function to execute in response to a DOM event or custom event.

Most DOM events are associated with a preventable default behavior such as link clicks navigating to a new page. Callbacks are passed a DOMEventFacade object as their first argument (usually called e) that can be used to prevent this default behavior with e.preventDefault(). See the DOMEventFacade API for all available properties and methods on the object.

If the event name passed as the first parameter is not a whitelisted DOM event, it will be treated as a custom event subscriptions, allowing node.fire('customEventName') later in the code. Refer to the Event user guide for the full DOM event whitelist.

By default, the this object in the callback will refer to the subscribed Node.

Returning false from a callback is supported as an alternative to calling e.preventDefault(); e.stopPropagation();. However, it is recommended to use the event methods.

Parameters:

type String

The name of the event
fn Function

The callback to execute in response to the event
[context] Object optional

Override this object in callback
[arg*] Any optional

0..n additional arguments to supply to the subscriber

Returns:

EventHandle:

A subscription handle capable of detaching that subscription

Example:

Y.one("#my-form").on("submit", function (e) {
                                                    e.preventDefault();
                                                
                                                    // proceed with ajax form submission instead...
                                                });

`one`

(

selector

)

Node | null

Inherited from Node: yui3/src/node/js/node-core.js:624

Retrieves a single Node instance, the first element matching the given CSS selector. Returns null if no match found.

Parameters:

selector String

The CSS selector to test against.

Returns:

Node | null:

A Node instance for the matching HTMLElement or null if no match found.

`outerHeight`

() Number

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:1182

Returns the outer height of the box including the border, if true is passed as the first argument, the margin is included.

Example:

var node = A.one('#nodeId');
                                                node.outerHeight();
                                                node.outerHeight(true); // includes margin

Returns:

Number:

`outerHTML`

() String

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:522

Gets the outerHTML of a node, which islike innerHTML, except that it actually contains the HTML of the node itself.

Returns:

String:

The outerHTML of the given element.

`outerWidth`

() Number

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:1166

Returns the outer width of the box including the border, if true is passed as the first argument, the margin is included.

Example:

var node = A.one('#nodeId');
                                                node.outerWidth();
                                                node.outerWidth(true); // includes margin

Returns:

Number:

`placeAfter`

(

newNode

)

chainable

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:551

Inserts a newNode after the node instance (i.e., as the next sibling). If the reference node has no parent, then does nothing.

Example:

var titleNode = A.one('#titleNode');
                                                var descriptionNode = A.one('#descriptionNode');
                                                // the description is usually shown after the title
                                                titleNode.placeAfter(descriptionNode);

Parameters:

newNode Node

Node to insert.

`placeBefore`

(

newNode

)

chainable

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:574

Inserts a newNode before the node instance (i.e., as the previous sibling). If the reference node has no parent, then does nothing.

Example:

var descriptionNode = A.one('#descriptionNode');
                                                var titleNode = A.one('#titleNode');
                                                // the title is usually shown before the description
                                                descriptionNode.placeBefore(titleNode);

Parameters:

newNode Node

Node to insert.

`prepend`

(

content

)

chainable

Inherited from Node: yui3/src/node/js/node-create.js:88

Inserts the content as the firstChild of the node.

Parameters:

content String | Node | HTMLElement

The content to insert. Use <a href="../classes/Escape.html#method_html">Y.Escape.html()</a> to escape html content.

`prependTo`

(

selector

)

chainable

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:597

Inserts the node instance to the begining of the selector node (i.e., insert before the firstChild of the selector).

Example:

var node = A.one('#nodeId');
                                                node.prependTo('body');

Parameters:

selector Node | String

A selector, element, HTML string, Node

`previous`

(

fn
[all]

)

Node

Inherited from Node: yui3/src/node/js/node-core.js:584

Returns the previous matching sibling. Returns the nearest element node sibling if no method provided.

Parameters:

fn String | Function

A selector or boolean method for testing elements. If a function is used, it receives the current node being tested as the only argument.
[all] Boolean optional

Whether text nodes as well as element nodes should be returned, or just element nodes will be returned(default)

Returns:

Node:

Node instance or null if not found

`purge`

(

recurse
type

)

chainable

Inherited from Node: yui3/src/node/js/node-event.js:73

Removes event listeners from the node and (optionally) its subtree

Parameters:

recurse Boolean

(optional) Whether or not to remove listeners from the node's subtree
type String

(optional) Only remove listeners of the specified type

`radioClass`

(

cssClass

)

chainable

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:620

Adds one or more CSS classes to an element and remove the class(es) from the siblings of the element.

Parameters:

cssClass String

`remove`

(

destroy

)

chainable

Inherited from Node: yui3/src/node/js/node-core.js:669

Removes the node from its parent. Shortcut for myNode.get('parentNode').removeChild(myNode);

Parameters:

destroy Boolean

whether or not to call destroy() on the node after removal.

`removeAttribute`

(

attribute

)

chainable

Inherited from Node: yui3/src/node/js/node-imports.js:108

Passes through to DOM method.

Parameters:

attribute String

The attribute to be removed

`removeChild`

(

node

)

Node

Inherited from Node: yui3/src/node/js/node-imports.js:7

Passes through to DOM method.

Parameters:

node HTMLElement | Node

Node to be removed

Returns:

Node:

The removed node

`removeClass`

(

className

)

chainable

Inherited from Node: yui3/src/node/js/node-class.js:24

Removes a class name from the node.

Parameters:

className String

the class name to remove from the node's class attribute

`replace`

(

newNode

)

chainable

Inherited from Node: yui3/src/node/js/node-core.js:692

Replace the node with the other node. This is a DOM update only and does not change the node bound to the Node instance. Shortcut for myNode.get('parentNode').replaceChild(newNode, myNode);

Parameters:

newNode Node | HTMLElement

Node to be inserted

`replaceChild`

(

node
refNode

)

Node

Inherited from Node: yui3/src/node/js/node-core.js:710

Parameters:

node String | HTMLElement | Node

Node to be inserted
refNode HTMLElement | Node

Node to be replaced

Returns:

Node:

The replaced node

`replaceClass`

(

oldClassName
newClassName

)

chainable

Inherited from Node: yui3/src/node/js/node-class.js:32

Replace a class with another class on the node. If no oldClassName is present, the newClassName is simply added.

Parameters:

oldClassName String

the class name to be replaced
newClassName String

the class name that will be replacing the old class name

`reset`

() chainable

Inherited from Node: yui3/src/node/js/node-imports.js:77

Passes through to DOM method. Only valid on FORM elements

`resetId`

(

prefix

)

chainable

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:656

Generates an unique identifier and reset the id attribute of the node instance using the new value. Invokes the guid.

Parameters:

prefix String

Optional prefix for the guid.

`scrollIntoView`

() chainable

Inherited from Node: yui3/src/node/js/node-imports.js:40

Passes through to DOM method.

`select`

() chainable

Inherited from Node: yui3/src/node/js/node-imports.js:85

Passes through to DOM method.

`selectable`

(

noRecurse

)

chainable

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:717

Enables text selection for this element (normalized across browsers).

Parameters:

noRecurse Object

`selectText`

(

start
end

)

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:672

Selects a substring of text inside of the input element.

Parameters:

start Number

The index to start the selection range from
end Number

The index to end the selection range at

`set`

(

attr
val

)

chainable

Inherited from Node: yui3/src/node/js/node-core.js:432

Sets an attribute on the Node instance. Unless pre-configured (via Node.ATTRS), set hands off to the underlying DOM node. Only valid attributes/properties for the node will be set. To set custom attributes use setAttribute.

Parameters:

attr String

The attribute to be set.
val Any

The value to set the attribute to.

`setAttribute`

(

name
value

)

chainable

Inherited from Node: yui3/src/node/js/node-imports.js:132

Allows setting attributes on DOM nodes, normalizing in some cases. This passes through to the DOM node, allowing for custom attributes.

Parameters:

name String

The attribute name
value String

The value to set

`setAttrs`

(

attrMap

)

chainable

Inherited from Node: yui3/src/node/js/node-core.js:461

Sets multiple attributes.

Parameters:

attrMap Object

an object of name/value pairs to set

`setData`

(

name
val

)

chainable

Inherited from Node: yui3/src/node/js/node-data.js:86

Stores arbitrary data on a Node instance. This is not stored with the DOM node.

Parameters:

name String

The name of the field to set. If no val is given, name is treated as the data and overrides any existing data.
val Any

The value to be assigned to the field.

`setHTML`

(

content

)

chainable

Inherited from Node: yui3/src/node/js/node-create.js:173

Replaces the node's current html content with the content provided. Note that this passes to innerHTML and is not escaped. Use <a href="../classes/Escape.html#method_html">Y.Escape.html()</a> to escape html content or set('text') to add as text.

Parameters:

content String | Node | HTMLElement | NodeList | HTMLCollection

The content to insert

`setStyle`

(

attr
val

)

chainable

Inherited from Node: yui3/src/node/js/node-style.js:9

Sets a style property of the node. Use camelCase (e.g. 'backgroundColor') for multi-word properties.

Parameters:

attr String

The style attribute to set.
val String | Number

The value.

`setStyles`

(

hash

)

chainable

Inherited from Node: yui3/src/node/js/node-style.js:22

Sets multiple style properties on the node. Use camelCase (e.g. 'backgroundColor') for multi-word properties.

Parameters:

hash Object

An object literal of property:value pairs.

`setX`

(

)

chainable

Inherited from Node: yui3/src/node/js/node-screen.js:129

Set the position of the node in page coordinates, regardless of how the node is positioned.

Parameters:

x Number

X value for new position (coordinates are page-based)

`setXY`

(

xy

)

chainable

Inherited from Node: yui3/src/node/js/node-screen.js:114

Set the position of the node in page coordinates, regardless of how the node is positioned.

Parameters:

xy Array

Contains X & Y values for new position (coordinates are page-based)

`setY`

(

)

chainable

Inherited from Node: yui3/src/node/js/node-screen.js:144

Set the position of the node in page coordinates, regardless of how the node is positioned.

Parameters:

y Number

Y value for new position (coordinates are page-based)

`show`

(

name
config
callback

)

chainable

Inherited from Node: yui3/src/node/js/node-view.js:9

Makes the node visible. If the "transition" module is loaded, show optionally animates the showing of the node using either the default transition effect ('fadeIn'), or the given named effect.

Parameters:

name String

A named Transition effect to use as the show effect.
config Object

Options to use with the transition.
callback Function

An optional function to run after the transition completes.

`showAccessible`

()

Provided by the aui-node-accessible module.

Defined in alloy-ui/src/aui-node/js/aui-node-accessible.js:24

Shows the node. Fires after the node-base show method to clean up nodes which were hidden through the hideAccessible method.

`siblings`

(

fn

)

NodeList

Inherited from Node: yui3/src/node/js/node-core.js:612

Returns all matching siblings. Returns all siblings if no method provided.

Parameters:

fn String | Function

A selector or boolean method for testing elements. If a function is used, it receives the current node being tested as the only argument.

Returns:

NodeList:

NodeList instance bound to found siblings

`simulate`

(

type
options

)

Inherited from Node: yui3/src/node/js/node-event-simulate.js:7

Simulates an event on the node.

Parameters:

type String

The type of event (i.e., "click").
options Object

(Optional) Extra options to copy onto the event object.

`simulateGesture`

(

name
[options]
[cb]

)

Inherited from Node: yui3/src/node/js/node-event-simulate.js:19

Simulates the higher user level gesture of the given name on this node. This method generates a set of low level touch events(Apple specific gesture events as well for the iOS platforms) asynchronously. Note that gesture simulation is relying on Y.Event.simulate() method to generate the touch events under the hood. The Y.Event.simulate() method itself is a synchronous method.

Supported gestures are tap, doubletap, press, move, flick, pinch and rotate.

The pinch gesture is used to simulate the pinching and spreading of two fingers. During a pinch simulation, rotation is also possible. Essentially pinch and rotate simulations share the same base implementation to allow both pinching and rotation at the same time. The only difference is pinch requires start and end option properties while rotate requires rotation option property.

The pinch and rotate gestures can be described as placing 2 fingers along a circle. Pinching and spreading can be described by start and end circles while rotation occurs on a single circle. If the radius of the start circle is greater than the end circle, the gesture becomes a pinch, otherwise it is a spread spread.

Parameters:

name String

The name of the supported gesture to simulate. The supported gesture name is one of "tap", "doubletap", "press", "move", "flick", "pinch" and "rotate".
[options] Object optional
Extra options used to define the gesture behavior:
```
 Valid options properties for the tap gesture:
```
- [point] (Optional) Indicates the [x,y] Array optional
  
  coordinates where the tap should be simulated. Default is the center of the node element.
- [hold=10] Number optional
  
  (Optional) The hold time in milliseconds. This is the time between touchstart and touchend event generation.
- [times=1] Number optional
  
  (Optional) Indicates the number of taps.
- [delay=10] Number optional
  (Optional) The number of milliseconds before the next tap simulation happens. This is valid only when times is more than 1.
```
 Valid options properties for the doubletap gesture:
```
- [point] (Optional) Indicates the [x,y] Array optional
  coordinates where the doubletap should be simulated. Default is the center of the node element.
```
 Valid options properties for the press gesture:
```
- [point] (Optional) Indicates the [x,y] Array optional
  
  coordinates where the press should be simulated. Default is the center of the node element.
- [hold=3000] Number optional
  (Optional) The hold time in milliseconds. This is the time between touchstart and touchend event generation. Default is 3000ms (3 seconds).
```
 Valid options properties for the move gesture:
```
- [path] Object optional
  
  (Optional) Indicates the path of the finger movement. It's an object with three optional properties: point, xdist and ydist.
  - [point] Array optional
    A starting point of the gesture. Default is the center of the node element.
  - [xdist=200] Number optional
    A distance to move in pixels along the X axis. A negative distance value indicates moving left.
  - [ydist=0] Number optional
    A distance to move in pixels along the Y axis. A negative distance value indicates moving up.
- [duration=1000] Number optional
  (Optional) The duration of the gesture in milliseconds.
```
 Valid options properties for the flick gesture:
```
- [point] (Optional) Indicates the [x, y] Array optional
  
  coordinates where the flick should be simulated. Default is the center of the node element.
- [axis='x'] String optional
  
  (Optional) Valid values are either "x" or "y". Indicates axis to move along. The flick can move to one of 4 directions(left, right, up and down).
- [distance=200] Number optional
  
  (Optional) Distance to move in pixels
- [duration=1000] Number optional
  (Optional) The duration of the gesture in milliseconds. User given value could be automatically adjusted by the framework if it is below the minimum velocity to be a flick gesture.
```
 Valid options properties for the pinch gesture:
```
- [center] Array optional
  
  (Optional) The center of the circle where two fingers are placed. Default is the center of the node element.
- [r1] Number optional
  
  (Required) Pixel radius of the start circle where 2 fingers will be on when the gesture starts. The circles are centered at the center of the element.
- [r2] Number optional
  
  (Required) Pixel radius of the end circle when this gesture ends.
- [duration=1000] Number optional
  
  (Optional) The duration of the gesture in milliseconds.
- [start=0] Number optional
  
  (Optional) Starting degree of the first finger. The value is relative to the path of the north. Default is 0 (i.e., 12:00 on a clock).
- [rotation=0] Number optional
  (Optional) Degrees to rotate from the starting degree. A negative value means rotation to the counter-clockwise direction.
```
 Valid options properties for the rotate gesture:
```
- [center] Array optional
  
  (Optional) The center of the circle where two fingers are placed. Default is the center of the node element.
- [r1] Number optional
  
  (Optional) Pixel radius of the start circle where 2 fingers will be on when the gesture starts. The circles are centered at the center of the element. Default is a fourth of the node element width or height, whichever is smaller.
- [r2] Number optional
  
  (Optional) Pixel radius of the end circle when this gesture ends. Default is a fourth of the node element width or height, whichever is smaller.
- [duration=1000] Number optional
  
  (Optional) The duration of the gesture in milliseconds.
- [start=0] Number optional
  
  (Optional) Starting degree of the first finger. The value is relative to the path of the north. Default is 0 (i.e., 12:00 on a clock).
- [rotation] Number optional
  
  (Required) Degrees to rotate from the starting degree. A negative value means rotation to the counter-clockwise direction.
[cb] Function optional

The callback to execute when the asynchronouse gesture simulation is completed.
- err Error
  
  An error object if the simulation is failed.

Example:

var node = Y.one("#target");
                                                
                                                // double tap example
                                                node.simulateGesture("doubletap", function() {
                                                    // my callback function
                                                });
                                                
                                                // flick example from the center of the node, move 50 pixels down for 50ms)
                                                node.simulateGesture("flick", {
                                                    axis: y,
                                                    distance: -100
                                                    duration: 50
                                                }, function() {
                                                    // my callback function
                                                });
                                                
                                                // simulate rotating a node 75 degrees counter-clockwise
                                                node.simulateGesture("rotate", {
                                                    rotation: -75
                                                });
                                                
                                                // simulate a pinch and a rotation at the same time.
                                                // fingers start on a circle of radius 100 px, placed at top/bottom
                                                // fingers end on a circle of radius 50px, placed at right/left
                                                node.simulateGesture("pinch", {
                                                    r1: 100,
                                                    r2: 50,
                                                    start: 0
                                                    rotation: 90
                                                });

`submit`

() chainable

Inherited from Node: yui3/src/node/js/node-imports.js:69

Passes through to DOM method. Only valid on FORM elements

`swallowEvent`

(

eventName
preventDefault

)

chainable

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:743

Stops the specified event(s) from bubbling and optionally prevents the default action.

Example:

var anchor = A.one('a#anchorId');
                                                anchor.swallowEvent('click');

Parameters:

eventName String | Array

An event or array of events to stop from bubbling
preventDefault Boolean

(optional) true to prevent the default action too

`swap`

(

otherNode

)

chainable

Inherited from Node: yui3/src/node/js/node-core.js:789

Swap DOM locations with the given node. This does not change which DOM node each Node instance refers to.

Parameters:

otherNode Node

The node to swap with

`swapXY`

(

otherNode

)

chainable

Inherited from Node: yui3/src/node/js/node-screen.js:152

Swaps the XY position of this node with another node.

Parameters:

otherNode Node | HTMLElement

The node to swap with.

`test`

(

selector

)

Boolean

Inherited from Node: yui3/src/node/js/node-core.js:658

Test if the supplied node matches the supplied selector.

Parameters:

selector String

The CSS selector to test against.

Returns:

Boolean:

Whether or not the node matches the selector.

`text`

(

text

)

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:793

Gets or sets the combined text contents of the node instance, including it's descendants. If the text is passed it's set the content of the element, otherwise it works as a getter for the current content.

Example:

var node = A.one('#nodeId');
                                                node.text('Setting new text content');
                                                // Alert the value of the current content
                                                alert( node.text() );

Parameters:

text String

A string of text to set as the content of the node instance.

`toggle`

(

on
callback

)

chainable

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:824

Displays or hide the node instance.

NOTE: This method assume that your node were hidden because of the 'aui-hide' css class were being used. This won't manipulate the inline style.display property.

Parameters:

on Boolean

Whether to force the toggle. Optional.
callback Function

A function to run after the visibility change. Optional.

`toggleAccessible`

(

force

)

Provided by the aui-node-accessible module.

Defined in alloy-ui/src/aui-node/js/aui-node-accessible.js:34

Toggles the node visibility, while still keeping it accessible by screen
readers.

Parameters:

force Boolean

If true the node will be shown, otherwise it will be hidden.

`toggleClass`

(

className
force

)

chainable

Inherited from Node: yui3/src/node/js/node-class.js:42

If the className exists on the node it is removed, if it doesn't exist it is added.

Parameters:

className String

the class name to be toggled
force Boolean

Option to force adding or removing the class.

`toggleView`

(

[on]
[callback]

)

chainable

Inherited from Node: yui3/src/node/js/node-view.js:57

Displays or hides the node. If the "transition" module is loaded, toggleView optionally animates the toggling of the node using given named effect.

Parameters:

[on] Boolean optional

An optional boolean value to force the node to be shown or hidden
[callback] Function optional

An optional function to run after the transition completes.

`toString`

() String

Inherited from Node: yui3/src/node/js/node-core.js:354

The method called when outputting Node instances as strings

Returns:

String:

A string representation of the Node instance

`transition`

(

config
callback

)

chainable

Inherited from Node: yui3/src/transition/js/transition-native.js:468

Animate one or more css properties to a given value. Requires the "transition" module. <pre>example usage: Y.one('#demo').transition({ duration: 1, // in seconds, default is 0.5 easing: 'ease-out', // default is 'ease' delay: '1', // delay start for 1 second, default is 0

    height: '10px',
                                                    width: '10px',
                                                
                                                    opacity: { // per property
                                                        value: 0,
                                                        duration: 2,
                                                        delay: 2,
                                                        easing: 'ease-in'
                                                    }
                                                });

</pre>

Parameters:

config Object

An object containing one or more style properties, a duration and an easing.
callback Function

A function to run after the transition has completed.

`unselectable`

(

noRecurse

)

chainable

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:845

Disables text selection for this element (normalized across browsers).

Parameters:

noRecurse Object

`unwrap`

() chainable

Inherited from Node: yui3/src/node/js/node-imports.js:161

Removes the node's parent node.

`val`

(

value

)

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:871

Gets or sets the value attribute of the node instance. If the value is passed it's set the value of the element, otherwise it works as a getter for the current value.

Example:

var input = A.one('#inputId');
                                                input.val('Setting new input value');
                                                // Alert the value of the input
                                                alert( input.val() );

Parameters:

value String

Value to be set. Optional.

`width`

() Number

Inherited from Node: alloy-ui/src/aui-node/js/aui-node-base.js:1104

Returns the width of the content, not including the padding, border or margin. If a width is passed, the node's overall width is set to that size.

Example:

var node = A.one('#nodeId');
                                                node.width(); //return content width
                                                node.width(100); // sets box width

Returns:

Number:

`wrap`

(

html

)

chainable

Inherited from Node: yui3/src/node/js/node-imports.js:152

Wraps the given HTML around the node.

Parameters:

html String

The markup to wrap around the node.

Properties

`_node`

HTMLElement private

Inherited from Node: yui3/src/node/js/node-core.js:60

The underlying DOM node bound to the Y.Node instance

Attributes

`children`

NodeList readonly

Inherited from Node: yui3/src/node/js/node-attrs.js:56

Returns a NodeList instance of all HTMLElement children.

`docHeight`

Number

Inherited from Node: yui3/src/node/js/node-screen.js:32

Document height

`docScrollX`

Number

Inherited from Node: yui3/src/node/js/node-screen.js:39

Pixel distance the page has been scrolled horizontally

`docScrollY`

Number

Inherited from Node: yui3/src/node/js/node-screen.js:46

Pixel distance the page has been scrolled vertically

`docWidth`

Number

Inherited from Node: yui3/src/node/js/node-screen.js:25

Document width

`for`

String

Inherited from Node: yui3/src/node/js/node-attrs.js:33

Allows for getting and setting the text of an element. Formatting is preserved and special characters are treated literally.

`region`

Node

Inherited from Node: yui3/src/node/js/node-region.js:6

Returns a region object for the node

`text`

String

Inherited from Node: yui3/src/node/js/node-attrs.js:16

Allows for getting and setting the text of an element. Formatting is preserved and special characters are treated literally.

`viewportRegion`

Node

Inherited from Node: yui3/src/node/js/node-region.js:31

Returns a region object for the node's viewport

`winHeight`

Number

Inherited from Node: yui3/src/node/js/node-screen.js:18

Returns the inner height of the viewport (exludes scrollbar).

`winWidth`

Number

Inherited from Node: yui3/src/node/js/node-screen.js:10

Returns the inner width of the viewport (exludes scrollbar).

APIs

A.Node Class

Constructor

Example:

Index

Methods

Properties

Attributes

Methods

_get

Parameters:

Returns:

_getBoxStyleAsNumber

Parameters:

Returns:

_getText

Parameters:

_hide

_hoverOutHandler

Parameters:

_hoverOverHandler

Parameters:

_ioComplete

Parameters:

_isHidden

Returns:

_place

Parameters:

_show

addClass

Parameters:

all

Parameters:

Returns:

ancestor

Parameters:

Returns:

ancestors

Parameters:

Returns:

ancestorsByClassName

Parameters:

Returns:

append

Parameters:

appendChild

Parameters:

Returns:

appendTo

Parameters:

Example:

attr

Parameters:

Returns:

blur

center

Parameters:

clearData

Parameters:

clone

Returns:

cloneNode

Parameters:

Returns:

compareTo

Parameters:

Returns:

contains

Parameters:

Returns:

create

Parameters:

Returns:

createCaption

delegate

Parameters:

Returns:

destroy

Parameters:

`A.Node`

`_get`

`_getBoxStyleAsNumber`

`_getText`

`_hide`

`_hoverOutHandler`

`_hoverOverHandler`

`_ioComplete`

`_isHidden`

`_place`

`_show`

`addClass`

`all`

`ancestor`

`ancestors`

`ancestorsByClassName`

`append`

`appendChild`

`appendTo`

`attr`

`blur`

`center`

`clearData`

`clone`

`cloneNode`

`compareTo`

`contains`

`create`

`createCaption`

`delegate`

`destroy`

`empty`

`focus`

`generateID`

`get`

`getAttribute`

`getAttrs`

`getBorderWidth`

`getCenterXY`

`getComputedStyle`

`getData`

`getDOM`

`getDOMNode`

`getElementsByTagName`

`getHTML`

`getMargin`

`getPadding`

`getStyle`

`getX`

`getXY`

`getY`

`guid`

`hasAttribute`

`hasChildNodes`

`hasClass`

`height`

`hide`

`hideAccessible`

`hover`

`html`

`inDoc`