index.mustache revision 370551b70c89bce123f68ae5340791562b03db2d
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence<div class="intro">
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <p>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence The Node Utility provides an expressive way to collect, create, and
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence manipulate DOM nodes. Each `Node` instance represents an underlying
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence DOM node, and each `NodeList` represents a collection of DOM nodes.
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence With `Node`, you can manage classNames
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </p>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence myNode.addClass('highlight');
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <p>styles</p>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence myNode.setStyle('opacity', 0.5);
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <p>create elements</p>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence Y.Node.create('<li id="item3" class="highlight"><em>Profit</em></li>');
6a759e38699d133302d0df120d7afcd4af721951David Lawrence ```
fbcd8c7a5c6b843bc53ceddabb0f23b3c70cb79aDavid Lawrence
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <p>and much more.</p>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
bbf390959da5b349f95b8e692240e5f2d8ef7b03David Lawrence <p>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <strong>Note:</strong> The <em>`Y.get()`, `node.query()`, and
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence `node.queryAll()` methods have been removed. Use `Y.one()`,
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence `node.one()`, and `node.all()` or include the
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence "<a href="{{apiDocs}}/modules/node-deprecated.html">node-deprecated</a>"
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence module in your `use()` statement to restore them</em>.
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </p>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence</div>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence{{>getting-started}}
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence<h2 id="node-using">Using Node</h2>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence<h3 id="using-node">Getting a Node</h3>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence<p>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence `Node` is the interface for DOM operations in YUI 3. The Node API is
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence based on the standard DOM API, and provides additional sugar properties
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence and methods that make common operations easier, and implementation code
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence more concise. Developers familiar with the standard DOM API will find
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence Node instances to be very familiar.
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence</p>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence<p>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence The simplest way to get a `Node` instance is using your YUI instance's
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence `one` method. `Y.one` accepts either an existing DOM element or a selector
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence query. If a selector query is used, the first matching element is used.
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence</p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence<p>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence <strong>Note:</strong> CSS3 selector support is not included by default
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence with Node, you will need to include the "selector-css3" module for CSS3
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence support.
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence</p>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence<p>This example demonstrates two ways to get a node instance.</p>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrencevar node1 = Y.one('#main');
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrencevar node2 = Y.one(document.body);
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
882350d11c90de9de6fc1cead25690c8114b0b95Michael Graff<h3 id="node-properties">Accessing Node Properties</h3>
882350d11c90de9de6fc1cead25690c8114b0b95Michael Graff
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence<p>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence Properties of the underlying DOM node are accessed via the `Y.Node`
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence instance's `set` and `get` methods. For simple property types (strings,
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence numbers, booleans), these pass directly to/from the underlying node, but
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence properties that normally return DOM nodes return `Y.Node` instances
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence instead.
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence</p>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence<p>This is an example of getting and setting various properties.</p>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence
fbcd8c7a5c6b843bc53ceddabb0f23b3c70cb79aDavid Lawrence```
b5fd61fd19332ae414ff71cfe6ee02cdbc53badaBob Halleyvar node = Y.one('#foo');
fbcd8c7a5c6b843bc53ceddabb0f23b3c70cb79aDavid Lawrencevar parent = node.get('parentNode'); // Node instance
fbcd8c7a5c6b843bc53ceddabb0f23b3c70cb79aDavid Lawrence
b5fd61fd19332ae414ff71cfe6ee02cdbc53badaBob Halleyvar html = 'I am "' + node.get('id') + '".';
fbcd8c7a5c6b843bc53ceddabb0f23b3c70cb79aDavid Lawrencehtml += 'My parent is "' + parent.get('id') + '"';
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrencenode.set('innerHTML', html);
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence```
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence<h3 id="node-events">DOM Events</h3>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence<p>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence Use the `on` method to add an event listener to a `Node` instance. The
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence event object passed as the first argument to each listener is an event
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence facade that, like the Node API, normalizes browser differences and provides
7f40165c8937083f51236f2cdb4ca3f515a20bc9David Lawrence a standard API for working with DOM events based on the W3C standard. All
7f40165c8937083f51236f2cdb4ca3f515a20bc9David Lawrence properties of the event object that would normally return DOM elements
7f40165c8937083f51236f2cdb4ca3f515a20bc9David Lawrence return `Y.Node` instances.
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence</p>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence```
fbcd8c7a5c6b843bc53ceddabb0f23b3c70cb79aDavid LawrenceY.one('#demo').on('click', function(e) {
fbcd8c7a5c6b843bc53ceddabb0f23b3c70cb79aDavid Lawrence e.preventDefault();
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence alert('event: ' + e.type + ' target: ' + e.target.get('tagName'));
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence});
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence For more details, check out <a href="../event/index.html">the Event user
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence guide</a>.
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence</p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<h3 id="node-methods">DOM Methods</h3>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence The `Y.Node` API provides all of the DOM methods you would expect, plus a
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence few extras to help with common tasks. As with properties and events, any
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence methods that would normally return DOM nodes instead return `Y.Node`
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence instances.
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence</p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrencevar node = Y.one('#demo');
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrencevar node2 = node.appendChild(Y.one('#foo p'));
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrencenode2.addClass('bar');
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<h3 id="nodelist">Using NodeList</h3>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence The `Y.NodeList` provides a node-like interface for manipulating multiple
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence nodes through a single interface. The `NodeList` API is a pared-down
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence version of the `Node` API, allowing for batching of common tasks.
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence</p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<p>The `Y.all` method is the simplest way to get a `NodeList`.</p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence```
737807299dcb3a859e139cfcf4308b8b456d05c9David LawrenceY.all('#demo li').addClass('bar');
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence The `Y.Node` api returns `NodeList` instances when the DOM would normally
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence return a collection of elements.
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence</p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence```
737807299dcb3a859e139cfcf4308b8b456d05c9David LawrenceY.one('#demo').get('children').addClass('bar');
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<h3 id="node-query">Node Queries</h3>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence Selector queries are a powerful way to test and manipulate nodes. All
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence `Y.Node` instances support `one`, `all`, and `test`.
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence</p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrencevar node = Y.one('#demo');
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrencevar node2 = node.one('p');
4997d113e1b0362e25f0a682bb7c7c7ef03b9440David Lawrenceif (node2) { // might be null
4997d113e1b0362e25f0a682bb7c7c7ef03b9440David Lawrence node2.addClass('bar'); // adds "bar" to the first paragraph descendant of #demo
4997d113e1b0362e25f0a682bb7c7c7ef03b9440David Lawrence}
4997d113e1b0362e25f0a682bb7c7c7ef03b9440David Lawrence
4997d113e1b0362e25f0a682bb7c7c7ef03b9440David Lawrencenode.all('p').addClass('bar'); // adds "bar" to all paragraph descendants of #demo
4997d113e1b0362e25f0a682bb7c7c7ef03b9440David Lawrence
4997d113e1b0362e25f0a682bb7c7c7ef03b9440David Lawrenceif (node.test('.foo.bar')) { // "if node has both foo and bar classNames"
4997d113e1b0362e25f0a682bb7c7c7ef03b9440David Lawrence node.removeClass('bar');
4997d113e1b0362e25f0a682bb7c7c7ef03b9440David Lawrence}
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence For more information on selector queries, see the following W3C
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence specifications:
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence</p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<ul>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence <li><a href="http://www.w3.org/TR/css3-selectors/">CSS Level 3 Selectors</a></li>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence <li><a href="http://www.w3.org/TR/selectors-API/">Selectors API</a></li>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence</ul>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence <strong>Note:</strong> CSS3 selector support is not included by default
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence with Node, you will need to include the "selector-css3" module for CSS3
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence support.
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence</p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
51e416ea191f61a046097a5805e6a6e95dcfaca9David Lawrence
51e416ea191f61a046097a5805e6a6e95dcfaca9David Lawrence<h2 id="node-aria">ARIA Support</h2>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<p>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence The Node interface has support for <a
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence href="http://www.w3.org/TR/wai-aria/">ARIA</a>. When used with Node's
266655efae9ed0e5ecdb64de5a5a8049876195c9David Lawrence built-in support for CSS selector queries, it is easy to both apply and
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence manage a Node's <a href="http://www.w3.org/TR/wai-aria/#roles">roles</a>,
266655efae9ed0e5ecdb64de5a5a8049876195c9David Lawrence <a href="http://www.w3.org/TR/wai-aria/#supportedState">states and
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence properties</a>.
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence<p>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence<p>
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence The ARIA Roles, States and Properties enhance the semantics of HTML,
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence allowing developers to more accurately describe the intended purpose of a
266655efae9ed0e5ecdb64de5a5a8049876195c9David Lawrence region of a page, or a DHTML widget, thereby improving the user experience
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence for users of assistive technology, such as screen readers.
266655efae9ed0e5ecdb64de5a5a8049876195c9David Lawrence</p>
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence<p>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence Apply any of the ARIA Roles, States and Properties via the `set` method.
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence For example, to apply the role of <a
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence href="http://www.w3.org/TR/wai-aria/#toolbar">`toolbar`</a> to a `<div>`
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence with an id of "toolbar":
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence</p>
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence```
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrencevar node = Y.one('#toolbar').set('role', 'toolbar');
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence```
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence<p>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence Node's built-in support for CSS selector queries, method chaining, and
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence ability to set multiple attributes on a single Node instance makes it
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence especially easy to apply the ARIA Roles, States, and Properties when
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence building DHTML widgets with a large subtree. For example, when building a
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence menubar widget it is necessary to apply a role of
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence <a href="http://www.w3.org/TR/wai-aria/#menubar">`menubar`</a> to the root
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence DOM element representing the menubar, and the role of
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence <a href="http://www.w3.org/TR/wai-aria/#menu">`menu`</a> to the root DOM
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence element representing each submenu. Additionally, as each submenu is hidden
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence by default, the
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence <a href="http://www.w3.org/TR/wai-aria/#aria-">`aria-hidden`</a> state will
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence need to be applied to each submenu as well. The Node interface makes it
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence possible to do all of this in one line of code:
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence</p>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence```
266655efae9ed0e5ecdb64de5a5a8049876195c9David LawrenceY.one('#root').set('role', 'menubar').all('.menu').setAttrs({ role: 'menu', 'aria-hidden': true });
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence```
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence<h2 id="node-migration">Migration Table</h2>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence<p>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence The following table is included to help users migrating from YUI 2. Most
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence of the functionality from `YAHOO.util.Dom` is available via `Node`.
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence</p>
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence
266655efae9ed0e5ecdb64de5a5a8049876195c9David Lawrence<p>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence <strong>Note</strong> In the snippets below, `myNode` is an instance of
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence `Node`. Methods that normally would return DOM nodes now return Node
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence instances.
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence</p>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence<table class="yui-table">
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence<thead>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence <tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <th>2.x `YAHOO.util.???`</th>
f74b7e5aae8b915055868c93a73cbf3ed7b9975fBob Halley <th>3.0</th>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence</thead>
bbf390959da5b349f95b8e692240e5f2d8ef7b03David Lawrence<tbody>
bbf390959da5b349f95b8e692240e5f2d8ef7b03David Lawrence <tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence ```
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence Dom.get('elementId');
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence </td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence Y.one('#elementId');
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <tr>
6a759e38699d133302d0df120d7afcd4af721951David Lawrence <td>
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence ```
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence Dom.getElementsBy(someFilterFunction);
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence ```
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence </td>
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence <td>
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence ```
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence myNode.all('selectorString');
6a759e38699d133302d0df120d7afcd4af721951David Lawrence ```
6a759e38699d133302d0df120d7afcd4af721951David Lawrence </td>
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence </tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <tr>
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence <td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence Dom.getElementsByClassName('highlight');
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence ```
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence myNode.all('.highlight');
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence ```
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence </td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence </tr>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence <tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
b5fd61fd19332ae414ff71cfe6ee02cdbc53badaBob Halley ```
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence Dom.getChildren(el);
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence <td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence myNode.get('children');
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence Dom.getChildrenBy(someFilterFunction);
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence myNode.all('selectorString');
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence </tr>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence <tr>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence <td>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence Dom.getFirstChild(parentEl);
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence myNode.one('*');
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </tr>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence <tr>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence <td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence ```
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence Dom.getFirstChildBy(someFilterFunction);
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence </td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence <td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence myNode.one('> selectorString');
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence ```
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence </td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence </tr>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence <tr>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence <td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence ```
b5fd61fd19332ae414ff71cfe6ee02cdbc53badaBob Halley Dom.getLastChild(el);
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence Dom.getLastChildBy(someFilterFunction);
fbcd8c7a5c6b843bc53ceddabb0f23b3c70cb79aDavid Lawrence ```
fbcd8c7a5c6b843bc53ceddabb0f23b3c70cb79aDavid Lawrence </td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence <td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence ```
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence myNode.get('children').slice(-1).item(0);
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence // OR target the node with a selector
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence myNode.one('> selector:last-of-type');
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence ```
b5fd61fd19332ae414ff71cfe6ee02cdbc53badaBob Halley </td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence </tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence ```
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence Dom.getNextSibling(el);
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence Dom.getNextSiblingBy(someFilterFunction);
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence Dom.getPreviousSibling(el);
bbf390959da5b349f95b8e692240e5f2d8ef7b03David Lawrence Dom.getPreviousSiblingBy(someFilterFunction);
bbf390959da5b349f95b8e692240e5f2d8ef7b03David Lawrence ```
bbf390959da5b349f95b8e692240e5f2d8ef7b03David Lawrence </td>
bbf390959da5b349f95b8e692240e5f2d8ef7b03David Lawrence <td>
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence ```
bbf390959da5b349f95b8e692240e5f2d8ef7b03David Lawrence myNode.next();
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence myNode.next('selectorString');
bbf390959da5b349f95b8e692240e5f2d8ef7b03David Lawrence myNode.previous();
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence myNode.previous('selectorString');
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence ```
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence </td>
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence </tr>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence <tr>
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence <td>
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence ```
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence Dom.getAncestorBy(someFilterFunction);
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence Dom.getAncestorByClassName('highlight');
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence Dom.getAncestorByTagName('pre');
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence ```
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence </td>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence <td>
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence ```
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence myNode.ancestor(someFilterFunction);
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence myNode.ancestor('.highlight');
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence myNode.ancestor('pre');
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence ```
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence </td>
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence </tr>
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence <tr>
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence <td>
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence ```
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence Dom.isAncestor(ancestorEl, el);
b5fd61fd19332ae414ff71cfe6ee02cdbc53badaBob Halley ```
0d73b3fffe1b29f11e32952867c687beb465fb96David Lawrence </td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence ```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence ancestorNode.contains(myNode);
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence ```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence </td>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence </tr>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence <tr>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence <td>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence ```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence Dom.insertAfter(el, afterEl);
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence Dom.insertBefore(el, beforeNode);
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence ```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence </td>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence <td>
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence ```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence afterNode.insert(myNode, 'after');
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence beforeNode.insert(myNode, 'before');
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence ```
737807299dcb3a859e139cfcf4308b8b456d05c9David Lawrence </td>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence </tr>
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence <tr>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence <td>
7bd28cb40b49c1784b014d4ed80dee5e2c8af361David Lawrence ```
1adfd0a9119434de35e1a6b6ddc65b28dd608308David Lawrence Dom.addClass('highlight');
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence myNode.addClass('highlight');
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence Dom.removeClass(el, 'highlight');
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
ec40d2ec68c51036dbb6f86a6ba93fc092664240David Lawrence <td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence myNode.removeClass('highlight');
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence </tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <tr>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence <td>
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence ```
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence Dom.replaceClass(el, 'high', 'low');
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence ```
bfa370f29df229bd4ef9d49acc75338e47df8ab7David Lawrence </td>
f74b7e5aae8b915055868c93a73cbf3ed7b9975fBob Halley <td>
9e4292a2b46bc30568bd1eb204761f7134609405David Lawrence ```
myNode.replaceClass('high', 'low');
```
</td>
</tr>
<tr>
<td>
```
Dom.hasClass(el, 'highlight');
```
</td>
<td>
```
myNode.hasClass('highlight');
```
</td>
</tr>
<tr>
<td>
```
Dom.getStyle(el, 'backgroundColor');
```
</td>
<td>
```
myNode.getStyle('backgroundColor');
```
</td>
</tr>
<tr>
<td>
```
Dom.setStyle(el, 'borderColor', '#C0FFEE');
```
</td>
<td>
```
myNode.setStyle('borderColor', '#C0FFEE');
```
</td>
</tr>
<tr>
<td>
```
Dom.getXY(el);
Dom.getX(el);
Dom.getY(el);
```
</td>
<td>
```
myNode.getXY();
myNode.getX();
myNode.getY();
```
</td>
</tr>
<tr>
<td>
```
Dom.setXY(el, [ 500, 300 ]);
Dom.setX(el, 500);
Dom.setY(el, 300);
```
</td>
<td>
```
myNode.setXY([ 500, 300 ]);
myNode.setX(500);
myNode.setY(300);
```
</td>
</tr>
<tr>
<td>
```
Dom.inDocument(el);
```
</td>
<td>
```
myNode.inDoc();
```
</td>
</tr>
<tr>
<td>
```
Dom.batch(elementArray,
Dom.addClass, 'highlight');
```
</td>
<td>
```
myNodelist.addClass('highlight');
// OR
myNodelist.each(function (node) {
node.addClass('highlight')
});
// OR
Y.Array.each(myNodelist, function (node) {
node.addClass('highlight');
});
```
</td>
</tr>
<tr>
<td>
```
Dom.generateId();
```
</td>
<td>
```
Y.guid();
```
</td>
</tr>
<tr>
<td>
```
Dom.getViewportHeight();
Dom.getViewportWidth();
```
</td>
<td>
```
myNode.get('winHeight');
myNode.get('winWidth');
```
</td>
</tr>
<tr>
<td>
```
Dom.getDocumentHeight();
Dom.getDocumentWidth();
```
</td>
<td>
```
myNode.get('docHeight');
myNode.get('docWidth');
```
</td>
</tr>
<tr>
<td>
```
Dom.getClientRegion();
```
</td>
<td>
```
myNode.get('viewportRegion');
```
</td>
</tr>
<tr>
<td>
```
Dom.getRegion(el);
```
</td>
<td>
```
myNode.get('region');
```
</td>
</tr>
<tr>
<td>
```
Dom.getDocumentScrollLeft();
Dom.getDocumentScrollTop();
```
</td>
<td>
```
myNode.get('docScrollX');
myNode.get('docScrollY');
```
</td>
</tr>
</tbody>
</table>