ノード（DOMのサポート）
DOM（HTMLやXMLの要素部分の操作を行うAPI）のサポートは、モジュールnodeにまとめられています。ターゲットとなる要素はY.one() や、Y.all()を使用してインスタンスを取得します。また直接、e.target.を使用して取得することもできます。要素のインスタンスを取得すると、モジュールnodeのプロパティやメソッドを使用することができるようになります。
要素のインスタンス取得方法
要素を取得するには以下の方法があります。
（1）Y.one()を使った方法
引数にはセレクタを指定します。セレクタはCSSで使用される要素の指定方式で、idセレクタ、クラスセレクタ、タイプセレクタなどがあります。
Y.one()は、引数で指定された、一つの要素のインスタンスを取得します。指定対象の要素が複数ある場合は最初の要素を取得します。
リスト2は要素を取得して、表示する例題です。
<script type="text/javascript">
window.onload = function() {
YUI().use('node', function(Y) {
var node1 = Y.one('#demo3'); //（1）
alert(node1.get('text'));
var node2 = Y.one('.demo2'); //（2）
alert(node2.get('text'));
var node2 = Y.one('div'); //（3）
alert(node2.get('text'));
});
}
</script>
</head>
<body>
<div>東風</div>
<div class="demo2">西風</div>
<div id="demo3">南風</div>
</body>
（1）はidセレクタを使い、id='demo3'の要素を'#demo3'で指定しています。（2）はクラスセレクタです。class='demo2' を'.demo2'で指定しています。（3）はタイプセレクタを使用しています。divの要素は複数ありますが、表示される要素は最初の要素のみです。
alertの引数で、取得インスタンスに続けて使用している.get('text')はモジュールnodeのプロパティの取得メソッドです。
（2）Y.all()を使った方法
引数は（1）と同じくセレクタを指定します。Y.all()の場合指定対象が複数ある場合は、すべての要素を取り込みます。リスト3をみてください。
<script type="text/javascript">
window.onload = function() {
YUI().use('node', function(Y) {
var list1 = Y.all('#demo li'); //（1）
alert(list1.get('text')); //（2）
alert(list1.item(2).get('text')); //（3）
var list2 = Y.all('#demo'); //（4）
alert(list2.get('text')); //（5）
alert(list2.item(0).get('text')); //（6）
});
}
</script>
</head>
<body>
<ul id="demo">
<li>北海道</li>
<li>東北</li>
<li>関東</li>
<li>関西</li>
</ul>
</body>
ulとliを使用してリストを表示させました。（1）のセレクタは子孫セレクタで、id=demo内のliタグの要素にマッチングさせ配列として取得しています。例えば、list1.item(2)には'関東'が入ります。
（4）はidのみ指定しました。list2の配列要素0に<ul>要素が取得されます。
（3）イベントの発生元を取得する方法
ある要素をクリックし、イベントを発生させ、クリックした文字を表示させるときなど、イベント処理の中でクリックした要素を指すのに、e.targetを使用して取得することができます。リスト4をみてください。イベントの処理の詳しい説明は、次項で行います。
<script type="text/javascript">
window.onload = function() {
YUI().use('node', function(Y) {
Y.on('click',function(e){ //クリックイベント
alert(e.target.get('text')); //（1）
},'#demo');
});
}
</script>
</head>
<body>
<ul id=demo>
<li>北海道</li>
<li>東北</li>
<li>関東</li>
<li>関西</li>
</ul>
</body>
Y.on()はイベント処理の指定です。（1）でイベント発生時に受け取った要素の文字列を表示しています。
要素を利用する
要素の取得ができたところで、取得したインスタンスで利用できる、モジュールnode内のメソッド／プロパティについて紹介したいと思います。
（1）メソッド
メソッドを一覧表で示します。
| メソッド | 引数 | 概要 |
| addClass(className) | className < String > | （CSS）クラス名を追加 |
| append(content) | content < String/Y.Node/HTMLElement > | 最後にコンテンツを追加 |
| appendChild(node) | node < HTMLElement/Node > | 最後にノードを追加 |
| compareTo(refNode) | refNode <HTMLElement/Node> | 指定ノードと同じものか確認 |
| contains(needle) | needle <Node/HTMLElement> | ノードに指定ノードが含まれているか |
| create( html , doc ) | html <String>/doc <HTMLDocument> | 新しくノードを作成 |
| focus() | なし | ノードにフォーカスをあてる |
| get(attr) | attr <String> | プロパティデータの取得 |
| getXY() | なし | 位置のXY値を配列で取得 |
| insert(content , where ) | content <String/Y.Node/HTMLElement>/where <Int/Y.Node/HTMLElement/String> | 指定ノードを指定場所に挿入 |
| indexOf(node) | node <Y.Node/DOMNode> | 指定ノードを検索 |
| item(index) | index <Number> | 配列要素番号を設定 |
| prepend(content) | content <String/Y.Node/HTMLElement> | 最初に挿入 |
| refresh() | なし | ノードのリフレッシュ |
| removeClass(className) | className <String> | （CSS）クラス名を解除 |
| set( attr , val ) | attr <String>/val <any> | プロパティデータの設定 |
| setcontent(content ) | content <String/Y.Node/HTMLElement> | 指定の内容に入れ替える |
| setXY(xy) | xy <Array> | 位置のXY値を配列で設定 |
モジュールnodeは、取得したインスタンスを利用するのに便利なメソッドを数多くサポートしています。
（2）プロパティ
以下はモジュールnodeのプロパティです。プロパティを扱うにはget()/set()メソッドを使用します。
| プロパティ | 概要 |
| children | インスタンスの内容をを配列で返す |
| docHeight | 表示ドキュメントの高さ（スクロールバーが出ているときは、スクロールバーが出ない状態の高さ） |
| text | インスタンスの値を文字列で返す |
| winHeight | 表示ウインドウの高さ（スクロールバーに関係なく表示されているウインドウの高さ） |
| winWidth | 表示ウインドウの幅（スクロールバーに関係なく表示されているウインドウの幅） |
リスト4にモジュールnodeのプロパティの取得と設定を追加しました。
<script type="text/javascript">
window.onload = function() {
YUI().use('node', function(Y) {
Y.on('click',function(e){
alert( Y.one('#demo').get('children').get('text'));//（1）
alert( Y.one('body').get('docHeight')); //（2）
alert( Y.one('body').get('winHeight')); //（3）
alert( Y.one('body').get('winWidth')); //（4）
alert(e.target.get('text')); //（5）
e.target.set('text',e.target.get('text')+'です！');//（6）
},'#demo');
});
}
</script>
</head>
<body>
<ul id=demo>
<li>北海道</li>
<li>東北</li>
<li>関東</li>
<li>関西</li>
</ul>
</body>
（1）children、（2）docHeight、（3）winHeight、（4）winWidth、（5）textのプロパティ取得です。（6）はクリックした要素に'です！'を追加し表示させています。
