YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: NodeList

Note: This is YUI 3.x. Looking for YUI 2.x?

## 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>

### 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');

### 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 };

### 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>

Copyright © 2009 Yahoo! Inc. All rights reserved.

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