YUI3:Node

YUIのNode機能はDOMノードの取得,作成,操作を容易にする.各ノードインスタンスはDOMノードを表し、各ノードListは一連のDOMノードを表す.ノードのclassName(myNode.addClass(‘foo’))やスタイル(myNode.setStyle(‘opacity’,0.5))を管理したり、DOM要素(Y.Node.create(‘foo’))を作成したりすることができます.
YUIシードファイルの導入とYUIインスタンスの構成については、YUI 3:YUIグローバルオブジェクトを参照してください.
ノードインスタンスの取得
NodeはYUI 3におけるDOM操作のインタフェースである.Node APIは標準的なDOM APIに基づいており、一般的なDOM操作をより簡単にし、実装コードもより簡潔にするための便利な属性と方法を提供しています.標準的なDOM APIに詳しい開発者は、Nodeインスタンスがよく知られていることを発見します.
ノードインスタンスを取得する最も簡単な方法はYUIインスタンスの「one」メソッドを使用することである.Y.oneメソッドは、ページ上のDOM要素をパラメータとして受信し、「選択文字列」もパラメータとして受信します.パラメータとして「文字列の選択」を使用すると、「文字列が一致する最初の要素の選択」が得られます.
注意:デフォルトではCSS 3セレクタのサポートは含まれていません.CSS 3セレクタのサポートを得るには、「selector-css 3」モジュールを導入する必要があります.
次のコードは、ノードインスタンスを取得する2つの方法を示します.
 

YUI().use('node', function(Y) {
    var node1 = Y.one('#main');
    var node2 = Y.one(document.body);
});

 
 
ノード機能の使用
以下ではYUIのノード共機能の使い方を詳しく説明します.次のセクションがあります.

ノードインスタンスにアクセスするプロパティ

DOMイベント

DOM方法

Node List(ノードセット)

Node Queries(ノードクエリ)

ノードインスタンスのプロパティへのアクセス
ノードインスタンス内のDOMノードのプロパティは、Y.ノードインスタンスのsetメソッドとgetメソッドでアクセスできます.単純なタイプのプロパティ(string、number、boolean)は、ノードインスタンスを直接転送/エクスポートするDOMノードであり、元のDOMノードを返すプロパティはY.ノードインスタンスを返します.
次に、異なるプロパティへのアクセスの例を示します.
 

YUI().use('node', function(Y) {
    var node = Y.one('#foo');
    var parent = node.get('parentNode'); // Node instance

    var html = 'I am "' + node.get('id') + '".';
    html += 'My parent is "' + parent.get('id') + '"';

    node.set('innerHTML', html);
});

 
 
DOMイベント
onメソッドを使用して、Nodeインスタンスにイベントリスナーを追加します.リスニング関数の最初のパラメータによって入力されるイベントオブジェクトはevent facadeであり、このevent facadeはNode APIと同様にブラウザの違いを統一化し、W 3 C標準に基づく標準APIを提供し、DOMイベントと連携して動作する.DOMノードを元に戻したイベントオブジェクト属性はY.Nodeインスタンスを返します.
 

YUI().use('node', function(Y) {
    Y.one('#demo').on('click', function(e) {
        e.preventDefault();
        alert('event: ' + e.type + ' target: ' + e.target.get('tagName'));
    });
});

 
 
DOMメソッド
Y.Node APIは、あなたが考えることができるすべてのDOMメソッドを提供し、一般的な操作を実行するための追加の方法も提供しています.上記の属性およびイベントと同様に、DOMノードを元に戻す方法はY.Nodeインスタンスを返します.
NodeListの使用
Y.NodeListは、Nodeと同様に複数のノードを操作する単一のインタフェースを提供する.NodeList APIは、ノードAPIの簡略化されたバージョンであり、一般的な操作を一括で実行できます.
Y.allメソッドはNodeListを取得する最も簡単なメソッドである.
 

YUI().use('node', function(Y) {
    Y.all('#demo li').addClass('bar');
});

 
 
Node Queries
セレクタクエリは、ノードをテストする強力な操作です.すべてのY.Nodeインスタンスでは、one、all、testメソッドがサポートされています.

YUI().use('node', function(Y) {
    var node = Y.one('#demo');

    var node2 = node.one('p');
    if (node2) { // might be null
        node2.addClass('bar'); // adds "bar" to the first paragraph descendant of #demo
    }

    node.all('p').addClass('bar'); // adds "bar" to all paragraph descendants of #demo

    if (node.test('.foo.bar')) { // "if node has both foo and bar classNames"
        node.removeClass('bar');
    }
});

セレクタクエリーの詳細については、W 3 C仕様を参照してください.

CSS Level 3 Selectors

Selectors API

注意:デフォルトではCSS 3セレクタのサポートは含まれていません.CSS 3セレクタのサポートを得るには、「selector-css 3」モジュールを導入する必要があります.
ARIAサポート
ノードインタフェースはARIAでサポートされています.ノードに組み込まれたCSSセレクタクエリとともに使用すると、ノードインスタンスのroles、states、propertiesを適用、管理しやすくなります.
ARIA Roles,States,PropertiesはHTMLの意味を高めた.開発者がページのあるプレートの目的をより正確に記述したり、DHTML widgetがscreen readerなどの補助ツールを必要とするユーザーの使用体験を向上させたりすることができます.
ARIA Roles,States,Propertiesをset法で適用した.たとえば,idがtoolbarの