|
1 |
|
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 <html> |
|
4 <head> |
|
5 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
6 <title>Node Basics</title> |
|
7 |
|
8 <style type="text/css"> |
|
9 /*margin and padding on body element |
|
10 can introduce errors in determining |
|
11 element position and are not recommended; |
|
12 we turn them off as a foundation for YUI |
|
13 CSS treatments. */ |
|
14 body { |
|
15 margin:0; |
|
16 padding:0; |
|
17 } |
|
18 </style> |
|
19 |
|
20 <link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
21 <script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
22 |
|
23 |
|
24 <!--begin custom header content for this example--> |
|
25 <link href="assets//node.css" rel="stylesheet" type="text/css"> |
|
26 |
|
27 <!--end custom header content for this example--> |
|
28 |
|
29 </head> |
|
30 |
|
31 <body class=" yui-skin-sam"> |
|
32 |
|
33 <h1>Node Basics</h1> |
|
34 |
|
35 <div class="exampleIntro"> |
|
36 <p>This example demonstrates how to <code>get</code> and use a <code>Node</code> instance to access DOM properties.</p> |
|
37 <p>Click the box to update the content of with the <code>tagName</code> of the click target's <code>parentNode</code>.</p> |
|
38 |
|
39 </div> |
|
40 |
|
41 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
42 |
|
43 <div id="demo"> |
|
44 <p><em>Click me.</em></p> |
|
45 </div> |
|
46 |
|
47 <script type="text/javascript"> |
|
48 YUI({base:"../../build/", timeout: 10000}).use("node", function(Y) { |
|
49 var node = Y.one('#demo p'); |
|
50 |
|
51 var onClick = function(e) { |
|
52 var tag = e.target.get('parentNode.tagName'); // e.target === node || #demo p em |
|
53 e.currentTarget.one('em').setContent('I am a child of ' + tag + '.'); // e.currentTarget === node |
|
54 }; |
|
55 |
|
56 node.on('click', onClick); |
|
57 }); |
|
58 |
|
59 </script> |
|
60 |
|
61 <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
62 |
|
63 </body> |
|
64 </html> |