fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="intro">

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <p>This example demonstrates how to use the DOM methods of a Node instance.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <p>Click any of the boxes to move them to the other list.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney</div>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="example">

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>dom-node-source}}

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney</div>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Setting up the Node</h2>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>First we need some HTML to work with.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<ul id="demo">

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>lorem</li>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>ispum</li>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>dolor</li>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>sit</li>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney</ul>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Using DOM Methods</h2>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>Most common DOM methods are available via Node instances. These can be used to add, remove, and retrieve other nodes.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>Now we need a handler to move a node to a new list when the <code>click</code> event fires.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>Note that <code>appendChild</code> returns a Node instance representing the node that was appended.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeneyvar onClick = function(e) {

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney var node = Y.one('#demo2').appendChild(e.currentTarget);

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney node.addClass('yui-pass');

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney};

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Listening for Node Events</h2>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>We can assign our handler to all of the items by using the <code>all</code> method to get a <code>NodeList</code> instance and using the <code>on</code> method to subscribe to the event.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt SweeneyY.all('#demo li').on('click', onClick);

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Complete Example Source</h2>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>dom-node-source}}

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```