dom-node.mustache revision 07dcb72a9c4129c6ab13ec15033906e55e4c0d47
<div class="intro">
<p>This example demonstrates how to use the DOM methods of a Node instance.</p>
<p>Click any of the boxes to move them to the other list.</p>
</div>
<div class="example">
{{>dom-node-source}}
</div>
<h2>Setting up the Node</h2>
<p>First we need some HTML to work with.</p>
```
<ul id="demo">
<li>lorem</li>
<li>ispum</li>
<li>dolor</li>
<li>sit</li>
</ul>
```
<h2>Using DOM Methods</h2>
<p>Most common DOM methods are available via Node instances. These can be used to add, remove, and retrieve other nodes.</p>
<p>Now we need a handler to move a node to a new list when the <code>click</code> event fires.</p>
<p>Note that <code>appendChild</code> returns a Node instance representing the node that was appended.</p>
```
var onClick = function(e) {
var node = Y.one('#demo2').appendChild(e.currentTarget);
node.addClass('yui-pass');
};
```
<h2>Listening for Node Events</h2>
<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>
```
Y.all('#demo li').on('click', onClick);
```
<h2>Prefer `node.delegate()` over `nodelist.on()`</h2>
<p>Sometimes you need to create individual subscriptions for each Node in a NodeList (as is done in this example), but usually it's preferable to <a href="../event/index.html#event-delegation">use event delegation</a>.</p>
<h2>Complete Example Source</h2>
```
{{>dom-node-source}}
```