YUI Library Examples: Node: DOM Methods

+ +

Node: DOM Methods

+ + + +

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>

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');
+};

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

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);
+});