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

5fbced719b71e659322b4ce3e4a39c9b039674c7Bob Halley<div class="intro">

c651f15b30f1dae5cc2f00878fb5da5b3a35a468Mark Andrews <p>This example demonstrates how to use a <code>NodeList</code> instance to work with multiple nodes.</p>

499b34cea04a46823d003d4c0520c8b03e8513cbBrian Wellington</div>

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrence

5fbced719b71e659322b4ce3e4a39c9b039674c7Bob Halley<div class="example">

5fbced719b71e659322b4ce3e4a39c9b039674c7Bob Halley{{>nodelist-source}}

5fbced719b71e659322b4ce3e4a39c9b039674c7Bob Halley</div>

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrence

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews<h2>Setting up the Node</h2>

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews<p>First we need some HTML to work with.</p>

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews```

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews<ul id="demo">

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews <li>lorem</li>

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews <li>ispum</li>

dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews <li>dolor</li>

15a44745412679c30a6d022733925af70a38b715David Lawrence <li>sit</li>

c651f15b30f1dae5cc2f00878fb5da5b3a35a468Mark Andrews</ul>

e85ffb301b294d70ddc1d90234788403666bb944David Lawrence```

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson<h2>Geting a NodeList Instance</h2>

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson<p>We will use the <code>all</code> method of our YUI instance to get a <code>NodeList</code> instance to work with.</p>

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson```

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrencevar nodes = Y.all('#demo li');

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson```

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrence<h2>Accessing NodeList Properties</h2>

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrence<p>As with <code>Node</code>, simple type of properties (strings, numbers, booleans) pass directly to/from the underlying HTMLElement, however properties representing HTMLElements return Node instances.</p>

cb3e854e181373807f7f011e5050c1a8013b4841Brian Wellington<p>In this example, we will listen for a <code>click</code> event to trigger the property change.</p>

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrence<p>Note that the context of the handler is set to the NodeList, so <code>this</code> refers to our NodeList instance. The <code>currentTarget</code> property of the event object is set to the current Node instance.</p>

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrence```

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrencevar onClick = function(e) {

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson // this === nodes

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson this.setContent('thanks from all of us!');

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson // e.currentTarget === #demo li

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson e.currentTarget.setStyle('backgroundColor', 'green');

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson};

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson```

6ca4964362ec37d6afbf614dbb9aaa2f525002f1Mark Andrews

c968a9ca37964ae0bdc5d452ad784ec93bd04c57David Lawrence<h2>Prefer `node.delegate()` over `nodelist.on()`</h2>

5a6e6c2c9b2f6cf426aa2a682aa800765e26d540Andreas Gustafsson

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrence<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>

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrence

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrence<h2>Complete Example Source</h2>

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrence```

f4a7d04843eb62c92f2d4ff338da49ae86e3279bDavid Lawrence{{>nodelist-source}}

b897c52f865b2fc4e220e2110b874e59c716456bBob Halley```

b897c52f865b2fc4e220e2110b874e59c716456bBob Halley