YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: Node Basics

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

## Node: Node Basics

This example demonstrates how to `get` and use a `Node` instance to access DOM properties.

Click the box to update the content of with the `tagName` of the click target's `parentNode`.

View example in new window.

Click me.

### Setting up the HTML

First we need some HTML to work with.

<div id="demo"> <p><em>Whose child am I?</em></p> </div>

### Geting a Node Instance

We will get our `Node` instance using the `get` method of our YUI instance which accepts either an HTMLElement or a Selector string.

var node = Y.get('#demo p');

### Accessing Node Properties

The properties of a node can be accessed via its `set` and `get` methods.

In most cases, simple type of properties (strings, numbers, booleans) pass directly to/from the underlying DOM node, however properties representing other DOM nodes return `Node` or `NodeList` instances.

A `click` handler will allow us to update the content of our node with the `tagName` of its `parentNode`.

Note that the `target` of the event object will vary depending on where you click. The `currentTarget` of the event will always be the element that assigned the listener (the `P` element in this case).

onClick = function(e) { var tag = e.target.get('parentNode.tagName'); // e.target === node || #demo p em e.currentTarget.setContent('I am a child of ' + tag + '.'); // e.currentTarget === node };

### Listening for Node Events

We will update the node when the `click` event fires by using the `on` method to subscribe to the event.

node.on('click', onClick);

### Full Script Source

YUI().use('node', function(Y) { var node = Y.get('#demo p'); var onClick = function(e) { var tag = e.target.get('parentNode.tagName'); // e.target === node || #demo p em e.currentTarget.setContent('I am a child of ' + tag + '.'); // e.currentTarget === node }; node.on('click', onClick); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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