98N/A<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">

98N/A

98N/A<div class="intro">

98N/A <p>This example demonstrates how to use the DOM methods of a Node instance.</p>

908N/A <p>Click any of the boxes to move them to the other list.</p>

733N/A</div>

98N/A

98N/A<div class="example">

919N/A{{>dom-node-source}}

919N/A</div>

919N/A

919N/A<h2>Setting up the Node</h2>

919N/A<p>First we need some HTML to work with.</p>

919N/A```

919N/A<ul id="demo">

919N/A <li>lorem</li>

919N/A <li>ispum</li>

919N/A <li>dolor</li>

919N/A <li>sit</li>

919N/A</ul>

919N/A```

919N/A<h2>Using DOM Methods</h2>

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

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

919N/A<p>Note that <code>appendChild</code> returns a Node instance representing the node that was appended.</p>

98N/A```

98N/Avar onClick = function(e) {

98N/A var node = Y.one('#demo2').appendChild(e.currentTarget);

235N/A node.addClass('yui-pass');

156N/A};

156N/A```

156N/A

156N/A<h2>Listening for Node Events</h2>

98N/A<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>

98N/A```

98N/AY.all('#demo li').on('click', onClick);

98N/A```

493N/A

493N/A<h2>Prefer `node.delegate()` over `nodelist.on()`</h2>

98N/A

911N/A<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="node-evt-delegation.html">use event delegation</a>.</p>

913N/A

913N/A<h2>Complete Example Source</h2>

911N/A```

98N/A{{>dom-node-source}}

235N/A```

493N/A