This example demonstrates how to use a NodeList instance to make it easy to manipulate multiple nodes at once.

{{>nodelist-source}}

Setting up the Node

First we need some HTML to work with.

```html {{>nodelist-html}} ```

CSS

CSS to make boxes in horizontal row

``` {{>nodelist-css}} ```

Geting a NodeList Instance

We will use the `all` method of our YUI instance to get a NodeList instance to work with.

``` var boxes = Y.all('.box-row li'); ```

Accessing NodeList Properties

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

In this example, we will listen for a `click` event to trigger the property change.

Note that the context of the handler is set to the NodeList, so `this` refers to our NodeList instance. The `currentTarget` property of the event object is set to the current Node instance.

``` var handleBoxClick = function(e) { // this === boxes, which is a NodeList this.setHTML('neener'); this.setStyle('backgroundColor', '#F4E6B8'); // e.currentTarget === .box-row li, just the one that was clicked e.currentTarget.setHTML('ouch!'); e.currentTarget.setStyle('backgroundColor', '#C4DAED'); }; boxes.on('click', handleBoxClick); ```

Prefer `node.delegate()` over `nodelist.on()`

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 use event delegation.

Complete Simple Box Example Source

``` {{>nodelist-source}} ```