YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: NodeList

## Node: NodeList

This example demonstrates how to use a NodeList instance to work with multiple nodes.

View example in new window.

- lorem
- ispum
- dolor
- sit

### Setting up the Node

First we need some HTML to work with.

    <ul id="demo">    <li>lorem</li>    <li>ispum</li>    <li>dolor</li>    <li>sit</li></ul>

    <ul id="demo">
        <li>lorem</li>
        <li>ispum</li>
        <li>dolor</li>
        <li>sit</li>
    </ul>

<ul id="demo"> <li>lorem</li> <li>ispum</li> <li>dolor</li> <li>sit</li> </ul>

### Geting a NodeList Instance

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

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

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

var nodes = Y.all('#demo 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 instnace. The `currentTarget` property of the event object is set to the current Node instance.

    var onClick = function(e) {    this.setContent('thanks from all of us!'); // this === nodes    e.currentTarget.setStyle('backgroundColor', 'green'); // e.currentTarget === #demo li};

    var onClick = function(e) {
        this.setContent('thanks from all of us!'); // this === nodes
        e.currentTarget.setStyle('backgroundColor', 'green'); // e.currentTarget === #demo li
    };

var onClick = function(e) { this.setContent('thanks from all of us!'); // this === nodes e.currentTarget.setStyle('backgroundColor', 'green'); // e.currentTarget === #demo li };

### Full Script Source

    <script type="text/javascript">YUI().use('node', function(Y) {    var nodes = Y.all('#demo li');     var onClick = function(e) {        this.setContent('thanks from all of us!'); // this === nodes        e.currentTarget.setStyle('backgroundColor', 'green'); // e.currentTarget === #demo li    };     nodes.on('click', onClick);});</script>

    <script type="text/javascript">
    YUI().use('node', function(Y) {
        var nodes = Y.all('#demo li');

        var onClick = function(e) {
            this.setContent('thanks from all of us!'); // this === nodes
            e.currentTarget.setStyle('backgroundColor', 'green'); // e.currentTarget === #demo li
        };

        nodes.on('click', onClick);
    });
    </script>

<script type="text/javascript"> YUI().use('node', function(Y) { var nodes = Y.all('#demo li'); var onClick = function(e) { this.setContent('thanks from all of us!'); // this === nodes e.currentTarget.setStyle('backgroundColor', 'green'); // e.currentTarget === #demo li }; nodes.on('click', onClick); }); </script>

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings