YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: DOM Methods

## Node: DOM Methods

This example demonstrates how to use the DOM methods of a Node instance.

Click any of the boxes to move them to the other list.

View example in new window.

- lorem
- ispum
- dolor
- sit

- foo

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

### Using DOM Methods

Most common DOM methods are available via Node instances. These can be used to add, remove, and retrieve other nodes.

Now we need a handler to move a node to a new list when the `click` event fires.

Note that `appendChild` returns a Node instance representing the node that was appended.

    var onClick = function(e) {    var node = Y.one('#demo2').appendChild(e.currentTarget);    node.addClass('yui-pass');};

    var onClick = function(e) {
        var node = Y.one('#demo2').appendChild(e.currentTarget);
        node.addClass('yui-pass');
    };

var onClick = function(e) { var node = Y.one('#demo2').appendChild(e.currentTarget); node.addClass('yui-pass'); };

### Listening for Node Events

We can assign our handler to all of the items by using the `all` method to get a `NodeList` instance and using the `on` method to subscribe to the event.

    Y.all('#demo li').on('click', onClick);

    Y.all('#demo li').on('click', onClick);

Y.all('#demo li').on('click', onClick);

### Full Script Source

    YUI().use('node', function(Y) {    var onClick = function(e) {        var node = Y.one('#demo2').appendChild(e.currentTarget);        node.addClass('yui-pass');    };     Y.all('#demo li').on('click', onClick);});

    YUI().use('node', function(Y) {
        var onClick = function(e) {
            var node = Y.one('#demo2').appendChild(e.currentTarget);
            node.addClass('yui-pass');
        };

        Y.all('#demo li').on('click', onClick);
    });

YUI().use('node', function(Y) { var onClick = function(e) { var node = Y.one('#demo2').appendChild(e.currentTarget); node.addClass('yui-pass'); }; Y.all('#demo li').on('click', onClick); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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