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
