読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

CSSのセレクタで要素を選択する

Selector Utilityを使うと、CSSセレクタを使ってそれにマッチする要素を探索することができます。

  • CSS3 Selectorが使えるとのこと。
  • 特定のノードを指定して、その配下を対象に検索できます。
  • マッチしたノードすべてを配列で返すほか、最初に見つかった要素のみを返すオプションもあります。

インストール

以下のモジュールをインポートします。いつの間にか2.4.1がでてるなー。

<!-- 依存モジュール -->
<script src="http://yui.yahooapis.com/2.4.1/build/yahoo/yahoo-min.js"></script>
<!-- ソース -->
<script src="http://yui.yahooapis.com/2.4.1/build/selector/selector-beta-min.js"></script>

サンプル

以下の要素を対象に、Selector Utilityを使って要素を探索するサンプルです。

<div id="a">
    <div id="a-1">a-1</div>
    <div id="a-2">a-2</div>
</div>
<div class="b" foo="var">b-1</div>
<div class="b">b-2</div>
<div class="c">c-1</div>
<ul>
    <li>li-1</li>
    <li>li-2</li>
    <li>li-3</li>
</ul>
  • 「YAHOO.util.Selector.query();」で要素を探索します。
    • 戻り値としてマッチした要素の配列が返されます。
    • 第2引数として、探索対象のルート要素またはそのIDを指定できます。
    • 第3引数をtrueにすると、マッチした最初の要素のみを返します。(素数1の配列で返されます。要素そのものが返ってくるわけではないので注意。)
var stdout = document.getElementById("stdout");        

// ノードの中身を出力する。
function printNodes( nodes ) {
    for ( var i=0; i<nodes.length; i++ ) {
        stdout.innerHTML += ( nodes[i].innerText || nodes[i].textContent ) + ", "; 
    }
    stdout.innerHTML += "<br/>";
}

// idで取得
printNodes( YAHOO.util.Selector.query("div#a-1") ); // a-1, 
printNodes( YAHOO.util.Selector.query("#a-2") );    // a-2, 

stdout.innerHTML += "---<br/>";

// classで取得
printNodes( YAHOO.util.Selector.query("div.b") ); // b-1, b-2, 
printNodes( YAHOO.util.Selector.query(".c") );    // c-1, 

stdout.innerHTML += "---<br/>";

// 子の指定
printNodes( YAHOO.util.Selector.query("ul li") );     // li-1 , li-2 , li-3 , 
printNodes( YAHOO.util.Selector.query("div#a div") ); // a-1, a-2, 

stdout.innerHTML += "---<br/>";

// 属性で絞込み
printNodes( YAHOO.util.Selector.query( "div[foo=var]" ) );     // b-1, 
printNodes( YAHOO.util.Selector.query( "div[class=b][foo]") ); // b-1, 

stdout.innerHTML += "---<br/>";

// 特定ノード以下の探索
// 第2引数でノードまたはノードのIDを指定するとそれ以下を探索対象とする。
var root = YAHOO.util.Selector.query("#a")[0];
printNodes( YAHOO.util.Selector.query("div", root ) ); // a-1, a-2, 
printNodes( YAHOO.util.Selector.query("div", "a" ) );  // a-1, a-2, 

// 第3引数をtrueにすると、最初に見つかったノードだけを返す。
printNodes( YAHOO.util.Selector.query("div", "a", true) );     // li-1 

実行結果はこちら。

不具合?

上のサンプルのうち、「属性で絞込み」の部分がFireFox2では動作しませんでした(IE6では期待通りの動作になることを確認。)不具合かな?ちょっとデバッグした限りでは、「<要素>[<属性名>]」で属性値を参照しているところがあって(selector-beta.js:368行目あたり)、これがFireFoxだとundefinedになっているっぽい。というか、「<要素>[<属性名>]」で属性値参照とかできるんだっけ?