1117N/A<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">

1117N/A<div class="intro">

1117N/A <p>This example demonstrates how to retrieve and use a <code>Node</code> instance to access DOM properties.</p>

1117N/A <p>Click the box to update the content with the <code>tagName</code> of the click target's <code>parentNode</code>.</p>

1117N/A</div>

1117N/A

1117N/A<div class="example">

6982N/A{{>basic-node-source}}

6982N/A</div>

1117N/A

1117N/A<h2>Setting up the HTML</h2>

1117N/A<p>First we need some HTML to work with.</p>

1117N/A```

6982N/A<div id="demo">

6982N/A <p><em>Click me.</em></p>

6982N/A</div>

6982N/A```

1117N/A

1117N/A<h2>Geting a Node Instance</h2>

1117N/A<p>We will get our <code>Node</code> instance using the <code>one</code> method of our YUI instance which accepts either an HTMLElement or a Selector string.</p>

1117N/A```

3232N/Avar node = Y.one('#demo p');

1117N/A```

1117N/A

1117N/A<h2>Accessing Node Properties</h2>

1117N/A<p>The properties of a node can be accessed via its <code>set</code> and <code>get</code> methods.</p>

1117N/A<p>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 <code>Node</code> or <code>NodeList</code> instances.</p>

1117N/A<p>A <code>click</code> handler will allow us to update the content of our node with the <code>tagName</code> of its <code>parentNode</code>.</p>

1117N/A<p>Note that the <code>target</code> of the event object will vary depending on where you click. The <code>currentTarget</code> of the event will always be the element that assigned the listener (the <code>P</code> element in this case).</p>

1117N/A```

1117N/Avar onClick = function(e) {

1117N/A // e.target === node || #demo p em

1117N/A var tag = e.target.get('parentNode.tagName');

1117N/A

1117N/A // e.currentTarget === node

1117N/A e.currentTarget.one('em').setContent('I am a child of ' + tag + '.');

1117N/A};

1117N/A```

1117N/A

1117N/A<h2>Listening for Node Events</h2>

1117N/A<p>We will update the node when the <code>click</code> event fires by using the <code>on</code> method to subscribe to the event.</p>

1117N/A```

1117N/Anode.on('click', onClick);

1117N/A```

1117N/A

1117N/A<h2>Complete Example Source</h2>

1117N/A```

1117N/A{{>basic-node-source}}

1117N/A```

1117N/A