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

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<div class="intro">

96e08422d46465ebd7105bf48e475f77e60250d7wrowe <p>This example demonstrates how to use a NodeList instance to work with multiple nodes.</p>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe</div>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<div class="example">

96e08422d46465ebd7105bf48e475f77e60250d7wrowe{{>ducks-source}}

96e08422d46465ebd7105bf48e475f77e60250d7wrowe</div>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<h2>Setting up the Node</h2>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<p>First we need some HTML to work with.</p>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowe{{>ducks-simple-html}}

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<h2>CSS</h2>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<p>CSS to make boxes in horizontal row</p>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowe{{>ducks-simple-css}}

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<p>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<div class="example">

96e08422d46465ebd7105bf48e475f77e60250d7wrowe{{>ducks-simple-source}}

96e08422d46465ebd7105bf48e475f77e60250d7wrowe</div>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe</p>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<h2>Geting a NodeList Instance</h2>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<p>We will use the `all` method of our YUI instance to get a NodeList instance to work with.</p>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowevar boxes = Y.all('.box-row li');

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowe

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<h2>Accessing NodeList Properties</h2>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<p>As with Node, simple type of properties (strings, numbers, booleans)

96e08422d46465ebd7105bf48e475f77e60250d7wrowepass directly to/from the underlying HTMLElement, however properties

96e08422d46465ebd7105bf48e475f77e60250d7wrowerepresenting HTMLElements return Node instances.</p>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<p>In this example, we will listen for a `click` event to trigger the property change.</p>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<p>Note that the context of the handler is set to the NodeList, so `this`

96e08422d46465ebd7105bf48e475f77e60250d7wrowerefers to our NodeList instance. The `currentTarget` property of

96e08422d46465ebd7105bf48e475f77e60250d7wrowethe event object is set to the current Node instance.</p>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowevar handleBoxClick = function(e) {

96e08422d46465ebd7105bf48e475f77e60250d7wrowe // this === boxes, which is a NodeList

96e08422d46465ebd7105bf48e475f77e60250d7wrowe this.setContent('neener');

96e08422d46465ebd7105bf48e475f77e60250d7wrowe this.setStyle('backgroundColor', '#F4E6B8');

96e08422d46465ebd7105bf48e475f77e60250d7wrowe

96e08422d46465ebd7105bf48e475f77e60250d7wrowe // e.currentTarget === .box-row li, just the one that was clicked

96e08422d46465ebd7105bf48e475f77e60250d7wrowe e.currentTarget.setContent('ouch!');

96e08422d46465ebd7105bf48e475f77e60250d7wrowe e.currentTarget.setStyle('backgroundColor', '#fff');

96e08422d46465ebd7105bf48e475f77e60250d7wrowe};

96e08422d46465ebd7105bf48e475f77e60250d7wroweboxes.on('click', handleBoxClick);

96e08422d46465ebd7105bf48e475f77e60250d7wrowe

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowe

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<h2>Prefer `node.delegate()` over `nodelist.on()`</h2>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<p>Sometimes you need to create individual subscriptions for each Node in a

96e08422d46465ebd7105bf48e475f77e60250d7wroweNodeList (as is done in this example), but usually it's preferable to use

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<a href="node-evt-delegation.html">event delegation</a>.</p>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<h2>Complete Simple Box Example Source</h2>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowe{{>ducks-simple-source}}

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<h2>Complete Ducks Example Source</h2>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe<p>

96e08422d46465ebd7105bf48e475f77e60250d7wroweThis example uses <a href="node-evt-delegation.html">event delegation</a>.

96e08422d46465ebd7105bf48e475f77e60250d7wrowe</p>

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowe{{>ducks-source}}

96e08422d46465ebd7105bf48e475f77e60250d7wrowe```

96e08422d46465ebd7105bf48e475f77e60250d7wrowe