fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="intro">
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff <p>This example demonstrates how to use a NodeList instance to make it easy to manipulate multiple nodes at once.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="example">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>nodelist-source}}
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Setting up the Node</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>First we need some HTML to work with.</p>
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff{{>nodelist-html}}
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff<p>CSS to make boxes in horizontal row</p>
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff{{>nodelist-css}}
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Geting a NodeList Instance</h2>
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff<p>We will use the `all` method of our YUI instance to get a NodeList instance to work with.</p>
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniffvar boxes = Y.all('.box-row li');
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Accessing NodeList Properties</h2>
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff<p>As with Node, simple type of properties (strings, numbers, booleans)
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniffpass directly to/from the underlying HTMLElement, however properties
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniffrepresenting HTMLElements return Node instances.</p>
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff<p>In this example, we will listen for a `click` event to trigger the property change.</p>
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff<p>Note that the context of the handler is set to the NodeList, so `this`
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniffrefers to our NodeList instance. The `currentTarget` property of
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniffthe event object is set to the current Node instance.</p>
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniffvar handleBoxClick = function(e) {
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff // this === boxes, which is a NodeList
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff this.setStyle('backgroundColor', '#F4E6B8');
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff // e.currentTarget === .box-row li, just the one that was clicked
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff e.currentTarget.setStyle('backgroundColor', '#fff');
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniffboxes.on('click', handleBoxClick);
5d6d6a5b6cfcb06add1a3948b3d07087bff7f130Luke Smith<h2>Prefer `node.delegate()` over `nodelist.on()`</h2>
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff<p>Sometimes you need to create individual subscriptions for each Node in a
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff ConniffNodeList (as is done in this example), but usually it's preferable to use
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff<a href="node-evt-delegation.html">event delegation</a>.</p>
bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff<h2>Complete Simple Box Example Source</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>nodelist-source}}