Example: Using NodeList - Simple

Setting up the Node

First we need some HTML to work with.

Click us.
<ul class="box-row">
    <li>box</li>
    <li>box</li>
    <li>box</li>
    <li>box</li>
    <li>box</li>
</ul>

CSS

CSS to make boxes in horizontal row

<style>
.example .box-row li{
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
    width: 100px;
    line-height: 3em;
    text-align: center;
    margin: 0.5em 1em 0.5em 0;
    border: solid 1px #ccc;
    background-color: #F4E6B8;
    cursor: pointer;
}
</style>

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

<style>
.example .box-row li{
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
    width: 100px;
    line-height: 3em;
    text-align: center;
    margin: 0.5em 1em 0.5em 0;
    border: solid 1px #ccc;
    background-color: #F4E6B8;
    cursor: pointer;
}
</style>

Click us.
<ul class="box-row">
    <li>box</li>
    <li>box</li>
    <li>box</li>
    <li>box</li>
    <li>box</li>
</ul>

<script>
YUI().use('node', function(Y){
    var boxes = Y.all('.box-row li');

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