61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith<div class="intro">
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith The Node Utility provides an expressive way to collect, create, and
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith manipulate DOM nodes. Each `Node` instance represents an underlying
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith DOM node, and each `NodeList` represents a collection of DOM nodes.
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith In addition to wrapping the basic DOM API and handling cross browser
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith issues, `Node`s provide convenient methods for managing CSS classes,
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith setting or animating styles, subscribing to events, updating or
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith dynamically loading content, and lots more.
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith <strong>Note:</strong> The <em>`Y.get()`, `node.query()`, and
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith `node.queryAll()` methods have been removed. Use `Y.one()`,
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith "<a href="{{apiDocs}}/modules/node-deprecated.html">node-deprecated</a>"
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith module in your `use()` statement to restore them</em>.
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>getting-started}}
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith<h2 id="node-using">Using Nodes</h2>
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith `Node` is the interface for DOM operations in YUI 3. The Node API is
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith based on the standard DOM API, and provides additional sugar properties
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith and methods that make common operations easier, and implementation code
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith more concise. Developers familiar with the standard DOM API will find
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith Node instances to be very familiar.
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith<h3 id="using-node">Getting a Node</h3>
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith// Use Y.one( [css selector string] )
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithvar node = Y.one('#main');
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith// Or pass an HTML element
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith The simplest way to get a `Node` instance is using your YUI instance's
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith `one` method. `Y.one` accepts either an existing DOM element or a CSS
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith selector. If a selector string is used, the first matching element is used.
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith <a href="#nodelist">NodeLists</a> are also available for working with
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith collections of `Node`s.
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith <strong>Note:</strong> CSS3 selector support is not included by default
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith with Node. Add support by including the "selector-css3" module in your
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith `use()` statement.
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith<h3 id="create">Creating Nodes and Modifying Content</h3>
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith// Create a new Node
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithvar item = Y.Node.create('<li id="step3" class="highlight"><em>Profit</em></li>');
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith// Replace the content in a Node
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke SmithY.one("#hello").setContent("<h1>Hello, <em>World</em>!</h1>");
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith// Append new markup inside a Node
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke SmithbodyNode.append("<p>This is the end, beautiful friend, the end.</p>");
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith `Node`s have methods for
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith <a href="{{apiDocs}}/classes/Node.html#method_append">appending</a>,
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith <a href="{{apiDocs}}/classes/Node.html#method_prepend">prepending</a>,
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith <a href="{{apiDocs}}/classes/Node.html#method_setContent">replacing</a>, and
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith <a href="{{apiDocs}}/classes/Node.html#method_insert">inserting</a>
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith content. The static method
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith <a href="{{apiDocs}}/classes/Node.html#method_create">`Y.Node.create()`</a>
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith is provided to create new `Node`s that you want to work with a bit more
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith before attaching them to the DOM.
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith As noted in <a href="#node-methods">DOM Methods</a> below, the standard DOM
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith API methods, such as `appendChild` and `insertBefore` are also available to
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith manipulate the DOM structure.
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith<h3 id="node-properties">Accessing Node Properties</h3>
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithvar imgNode = Y.one('#preview');
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithvar labelNode = imgNode.get('nextSibling'); // Node instance
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithvar bigSrc = thumbnail.get('src').slice(0, -4) + '-big.jpg';
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke SmithimgNode.set('src', bigSrc);
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith Properties of the underlying DOM node are accessed via the `Node`
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith instance's `set` and `get` methods. For simple property types (strings,
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith numbers, booleans), these pass directly to/from the underlying node, but
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith properties that normally return DOM nodes return `Node` instances
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith<h3 id="node-events">DOM Events</h3>
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke SmithY.one('#demo').on('click', function(e) {
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith alert('event: ' + e.type + ' target: ' + e.target.get('tagName'));
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith Use the `on` method to add an event listener to a `Node` instance. The
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith event object passed as the first argument to each listener is an event
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith facade that, like the Node API, normalizes browser differences and provides
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith a standard API for working with DOM events based on the W3C standard. All
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith properties of the event object that would normally return DOM elements
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith return `Node` instances.
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith For more details, check out <a href="../event/index.html">the Event user
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith<h3 id="node-methods">DOM Methods</h3>
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithvar tasklist = Y.one('ul#tasklist');
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithvar item3 = tasklist.appendChild( Y.one('#pending .item-3') );
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith The `Node` API provides all of the DOM methods you would expect, plus a
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith few extras to help with common tasks. As with properties and events, any
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith methods that would normally return DOM nodes instead return `Node`
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith<h3 id="nodelist">Working With Collections of Nodes</h3>
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith `NodeList` is the class for working with groups of `Node`s.
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithvar doneTasks = Y.all('#tasklist .completed');
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith// NodeLists host most Node methods for simple iterative operations
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith// or call each() to do more work on each Node
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke SmithdoneTasks.each(function (taskNode) {
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith taskNode.transition({ opacity: 0 }, function () {
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith The `Y.all` method is the simplest way to get a `NodeList`, but throughout
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith the library, any property or method that would return a collection of HTML
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith elements will return a `NodeList`.
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithvar nodelist = taskList.get('childNodes');
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith The `NodeList` provides a `Node`-like interface for manipulating multiple
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith `Node`s through a single interface. The `NodeList` API is a pared-down
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith version of the `Node` API for simple operations, plus common `Array`
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith methods such as
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith <a href="{{apiDocs}}/classes/NodeList.html#method_slice">`slice()`</a> and
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith <a href="{{apiDocs}}/classes/NodeList.html#method_pop">`pop()`</a> for
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith modifying the internal list of wrapped `Node`s, and some general purpose
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith iteration methods such as
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith <a href="{{apiDocs}}/classes/NodeList.html#method_each">`each()`</a> and
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith <a href="{{apiDocs}}/classes/NodeList.html#method_some">`some()`</a>.
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith<h3 id="node-query">Query a Node's Descendants</h3>
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smithvar node = Y.one('#demo');
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithvar firstPara = node.one('p');
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithif (firstPara) { // might be null
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith // adds "bar" to the first paragraph descendant of #demo
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith// adds class "syntax-highlight" to all <pre> descendants of #demo
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smithnode.all('pre').addClass('syntax-highlight');
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith Like `Y.one()` and `Y.all()`, `Node` instances have `one()` and `all()`
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith methods for querying their descendants.
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith Using selectors to capture descendants is faster and more convenient than
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith relying on DOM properties such as `childNodes` and `nextSibling` since you
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith don't have to worry about working around text nodes or recursing into
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith element subtrees.
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith Using `one()` and `all()` from a `Node` rather than `Y` can aid performance
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith in large pages as well, because `Y.one()` and `Y.all()` always query from
6ddf4e4f62fc31cf9b1b98f12f0f1ab863881d4aLuke Smith the `document`, which will scan a lot more elements.
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith For more information on selector queries, see the following W3C
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith specifications:
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith <li><a href="http://www.w3.org/TR/css3-selectors/">CSS Level 3 Selectors</a></li>
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith <li><a href="http://www.w3.org/TR/selectors-API/">Selectors API</a></li>
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith <strong>Note:</strong> CSS3 selector support is not included by default
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith with Node, you will need to include the "selector-css3" module for CSS3
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith<h2 id="node-aria">ARIA Support</h2>
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith The Node interface has support for <a
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith href="http://www.w3.org/TR/wai-aria/">ARIA</a>. When used with Node's
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith built-in support for CSS selector queries, it is easy to both apply and
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith manage a Node's <a href="http://www.w3.org/TR/wai-aria/#roles">roles</a>,
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith <a href="http://www.w3.org/TR/wai-aria/#supportedState">states and
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith properties</a>.
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith The ARIA Roles, States and Properties enhance the semantics of HTML,
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith allowing developers to more accurately describe the intended purpose of a
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith region of a page, or a DHTML widget, thereby improving the user experience
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith for users of assistive technology, such as screen readers.
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith Apply any of the ARIA Roles, States and Properties via the `set` method.
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith For example, to apply the role of <a
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith href="http://www.w3.org/TR/wai-aria/#toolbar">`toolbar`</a> to a `<div>`
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith with an id of "toolbar":
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smithvar node = Y.one('#toolbar').set('role', 'toolbar');
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith Node's built-in support for CSS selector queries, method chaining, and
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith ability to set multiple attributes on a single Node instance makes it
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith especially easy to apply the ARIA Roles, States, and Properties when
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith building DHTML widgets with a large subtree. For example, when building a
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith menubar widget it is necessary to apply a role of
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith <a href="http://www.w3.org/TR/wai-aria/#menubar">`menubar`</a> to the root
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith DOM element representing the menubar, and the role of
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith <a href="http://www.w3.org/TR/wai-aria/#menu">`menu`</a> to the root DOM
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith element representing each submenu. Additionally, as each submenu is hidden
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith by default, the
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith <a href="http://www.w3.org/TR/wai-aria/#aria-">`aria-hidden`</a> state will
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith need to be applied to each submenu as well. The Node interface makes it
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith possible to do all of this in one line of code:
33ba1088378b236bdb1ccdb65751b072eb5d4b60Luke SmithY.one('#root').set('role', 'menubar').all('.menu').setAttrs({ role: 'menu', 'aria-hidden': true });
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith<h2 id="node-migration">Migration Table</h2>
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith The following table is included to help users migrating from YUI 2. Most
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith of the functionality from `YAHOO.util.Dom` is available via `Node`.
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith <strong>Note</strong> In the snippets below, `myNode` is an instance of
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith `Node`. Methods that normally would return DOM nodes now return Node
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith<table class="yui-table">
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith <th>3.0</th>
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.get('elementId');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Y.one('#elementId');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.getElementsBy(someFilterFunction);
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.all('selectorString');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.all('.highlight');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.getChildrenBy(someFilterFunction);
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.all('selectorString');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.getFirstChildBy(someFilterFunction);
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.one('> selectorString');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.getLastChildBy(someFilterFunction);
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.get('children').slice(-1).item(0);
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith // OR target the node with a selector
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.one('> selector:last-of-type');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.getNextSiblingBy(someFilterFunction);
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.getPreviousSiblingBy(someFilterFunction);
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.next('selectorString');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.previous('selectorString');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.getAncestorBy(someFilterFunction);
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.ancestor(someFilterFunction);
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith Dom.isAncestor(ancestorEl, el);
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith Dom.insertBefore(el, beforeNode);
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith afterNode.insert(myNode, 'after');
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith beforeNode.insert(myNode, 'before');
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith Dom.removeClass(el, 'highlight');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.replaceClass(el, 'high', 'low');
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith Dom.hasClass(el, 'highlight');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.getStyle(el, 'backgroundColor');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.getStyle('backgroundColor');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.setStyle(el, 'borderColor', '#C0FFEE');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.setStyle('borderColor', '#C0FFEE');
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith Dom.setXY(el, [ 500, 300 ]);
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith myNode.setXY([ 500, 300 ]);
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.batch(elementArray,
370551b70c89bce123f68ae5340791562b03db2dLuke Smith Dom.addClass, 'highlight');
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith myNodelist.each(function (node) {
61d056e25c884bc5635cfe38d3c4a1099977644eLuke Smith Y.Array.each(myNodelist, function (node) {
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.get('winHeight');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.get('docHeight');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.get('viewportRegion');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.get('docScrollX');
370551b70c89bce123f68ae5340791562b03db2dLuke Smith myNode.get('docScrollY');