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.
Click me.
+Setting up the HTML
+First we need some HTML to work with.
+ + +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.
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).
Listening for Node Events
+We will update the node when the click event fires by using the on method to subscribe to the event.