YUI Library Examples: Node: Node Basics

Node: Node Basics

Setting up the HTML

First we need some HTML to work with.

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

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

Geting a Node Instance

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

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

var node = Y.one('#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.one('em').setContent('I am a child of ' + tag + '.'); // e.currentTarget === node
};

onClick = function(e) {
    var tag = e.target.get('parentNode.tagName'); // e.target === node || #demo p em
    e.currentTarget.one('em').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);

node.on('click', onClick);

Full Script Source

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

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