5
<title>Example: NodeList</title>
6
<link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
<link rel="stylesheet" href="../assets/css/main.css">
8
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
<script src="../../build/yui/yui-min.js"></script>
14
<h1>Example: NodeList</h1>
19
<div id="main" class="yui3-u">
20
<div class="content"><link href="../assets/node/node.css" rel="stylesheet" type="text/css">
22
<p>This example demonstrates how to use a NodeList instance to work with multiple nodes.</p>
33
<script type="text/javascript">
34
YUI().use('node', function(Y) {
35
var nodes = Y.all('#demo li');
37
var onClick = function(e) {
39
this.setContent('thanks from all of us!');
41
// e.currentTarget === #demo li
42
e.currentTarget.addClass('highlight');
45
nodes.on('click', onClick);
51
<h2>Setting up the Node</h2>
52
<p>First we need some HTML to work with.</p>
53
<pre class="code prettyprint"><ul id="demo">
54
<li>lorem</li>
55
<li>ispum</li>
56
<li>dolor</li>
57
<li>sit</li>
58
</ul></pre>
61
<h2>Geting a NodeList Instance</h2>
62
<p>We will use the <code>all</code> method of our YUI instance to get a NodeList instance to work with.</p>
63
<pre class="code prettyprint">var nodes = Y.all('#demo li');</pre>
66
<h2>Accessing NodeList Properties</h2>
67
<p>As with Node, simple type of properties (strings, numbers, booleans) pass directly to/from the underlying HTMLElement, however properties representing HTMLElements return Node instances.</p>
68
<p>In this example, we will listen for a <code>click</code> event to trigger the property change.</p>
69
<p>Note that the context of the handler is set to the NodeList, so <code>this</code> refers to our NodeList instance. The <code>currentTarget</code> property of the event object is set to the current Node instance.</p>
70
<pre class="code prettyprint">var onClick = function(e) {
71
// this === nodes
72
this.setContent('thanks from all of us!');
74
// e.currentTarget === #demo li
75
e.currentTarget.setStyle('backgroundColor', 'green');
79
<h2>Prefer <code>node.delegate()</code> over <code>nodelist.on()</code></h2>
81
<p>Sometimes you need to create individual subscriptions for each Node in a NodeList (as is done in this example), but usually it's preferable to <a href="node-evt-delegation.html">use event delegation</a>.</p>
83
<h2>Complete Example Source</h2>
84
<pre class="code prettyprint"><ul id="demo">
85
<li>Click me</li>
86
<li>Click me</li>
87
<li>Click me</li>
88
<li>Click me</li>
91
<script type="text/javascript">
92
YUI().use('node', function(Y) {
93
var nodes = Y.all('#demo li');
95
var onClick = function(e) {
96
// this === nodes
97
this.setContent('thanks from all of us!');
99
// e.currentTarget === #demo li
100
e.currentTarget.addClass('highlight');
103
nodes.on('click', onClick);
105
</script></pre>
110
<div id="sidebar" class="yui3-u">
114
<div class="sidebox">
116
<h2 class="no-toc">Examples</h2>
120
<ul class="examples">
123
<li data-description="Using selectors and property accessors with Node.">
124
<a href="properties.html">Set and Get Properties</a>
129
<li data-description="Using DOM methods with Node.">
130
<a href="dom-node.html">DOM Methods</a>
135
<li data-description="Listening for DOM events with Node instances.">
136
<a href="events.html">Handling DOM Events</a>
141
<li data-description="NodeList provides Node functionality for multiple nodes.">
142
<a href="nodelist.html">NodeList</a>
147
<li data-description="Using a single event listener to handle events on multiple nodes.">
148
<a href="node-evt-delegation.html">Delegating Node Events</a>
153
<li data-description="This example demonstrates how to position an element in page coordinates.">
154
<a href="node-xy.html">Node Positioning</a>
159
<li data-description="This example demonstrates how to set styles and get style information.">
160
<a href="node-style.html">Node Styling</a>
165
<li data-description="This example demonstrates how to insert content into a Node.">
166
<a href="node-insert.html">Adding Node Content</a>
171
<li data-description="This example demonstrates how to show and hide a Node.">
172
<a href="node-view.html">Showing and Hiding</a>
196
<div class="sidebox">
198
<h2 class="no-toc">Examples That Use This Component</h2>
202
<ul class="examples">
223
<li data-description="Use the Event Utility to attach simple DOM event handlers.">
224
<a href="../event/basic-example.html">Simple DOM Events</a>
229
<li data-description="Creating an accessible toolbar using the Focus Manager Node Plugin and Node's support for the WAI-ARIA Roles and States.">
230
<a href="../node-focusmanager/node-focusmanager-1.html">Accessible Toolbar</a>
235
<li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States.">
236
<a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
241
<li data-description="Use IO to request XML data from a remote web service.">
242
<a href="../io/weather.html">Request XML data from Yahoo! Weather</a>
247
<li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
248
<a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a>
253
<li data-description="Example Photo Browser application.">
254
<a href="../dd/photo-browser.html">Photo Browser</a>
259
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation.">
260
<a href="../dd/portal-drag.html">Portal Style Example</a>
272
<script src="../assets/vendor/prettify/prettify-min.js"></script>
273
<script>prettyPrint();</script>