<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">
<div class="intro">
    <p>This example demonstrates how to retrieve and use a `Node` instance
    and access DOM properties.</p>
    <p>Press a button to get or set the `offsetWidth` of the `div`
    containing the corn image.</p>
</div>

<div class="example">
{{>properties-source}}
<div style="color:#aaa; display:block; font-size:90%; margin-top:1em;">Image derived from
<a href="http://www.flickr.com/photos/29278394@N00/3934433763/" target="_blank">
"ear of corn"</a>, by normanack</div>
</div>

<h2>Setting up the HTML</h2>

```
    <div id="ruler"></div>
    <div id="corn">
        <div class="ruler-marker"></div>
        <div id="output">? px</div>
    </div>
    <label>Width:</label>
    <input id="input" size="2" value="550"> px
    <button class="yui3-button btn-set">Set</button>
    <button class="yui3-button btn-get">Get</button>
```

<h2>Getting a Node Instance</h2>
<p>The `Y.one` method accepts a Selector or HTML element and
returns a Node instance.  First we'll set up some variables
for the node's representing our HTML.</p>

```
    var corn = Y.one('#corn'),
        input = Y.one('.example #input'),
        output = Y.one('.example #output');
```

<h2>Accessing Node Properties</h2>
<p>The properties of a node can be accessed via its `set` and
`get` methods.</p>
<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 `Node` or `NodeList` instances.</p>

<h3>The Get Method</h3>
<p>We can use the `get` method to read the `offsetWidth` of the `div`
containing the corn image,
which includes the style width, padding, and border.</p>

```
width = corn.get('offsetWidth');
```

<h3>The Set Method</h3>
<p>The Set method can be used to set the value of objects
</p>
```
input.set('value', 237);
```

<p>The `offsetWidth` property of an HTML element is read only, however YUI
makes this writeable.  This assures that the final `offsetWidth`
matches the value that is set, regardless of borders, padding, or box model.</p>

```
corn.set('offsetWidth', value);
```

<h2>Listening for Node Events</h2>
<p>We will update the value `offsetWidth` property of the `div`
containing the corn image when the Set button is pressed.
</p>

```
Y.one('.example .btn-set').on('click', function(e) {
    ...
    corn.set('offsetWidth', value);
    ...
};
```

<h2>Complete Example Source</h2>
```
{{>properties-source}}
```
