Prototype-dollars-method

提供:Dev Guides
移動先:案内検索

プロトタイプ-$$()メソッド

$$()メソッドは、CSSルールの定義に使用されるものに類似した1つ以上のCSSフィルタリング式を解析し、これらのフィルターに一致する要素を返します。

構文

$$(cssRule...);

戻り値

HTML要素の配列。

これは、divという名前のDOMのすべてのノードを取得するためのJavascriptステートメントを記述する古い方法です。

nodes = document.getElementsByTagName('div');

$$()を使用すると、次のように短縮できます-

nodes = $$('div');

以下は$( 'contents')と同じですが、とにかく配列を返すだけです。

$$('#contents');

<html>
   <head>
      <title>Prototype examples</title>
      <script type="text/javascript" src = "/javascript/prototype.js"></script>

      <script>
         function test() {
            allNodes = $$("div");

            for(i = 0; i < allNodes.length; i++) {
               alert(allNodes[i].innerHTML);
            }
         }
      </script>
   </head>

   <body>
      <div id = "firstDiv" name = "div">
         <p>This is first paragraph</p>
      </div>

      <div id = "secondDiv" name = "div">
         <p>This is another paragraph</p>
      </div>

      <input type = "button" value = "Test $()" onclick = "test();"/>
   </body>
</html>

出力

より多くの例

以下は、rel属性を持つID "contents"の要素内のすべてのリンクを返します。

$$('#contents a[rel]');

以下は、値「#」(eyeew!)のhref属性を持つすべてのリンクを返します。

$$('a[href="#"]');

以下は、ID「navbar」または「sidebar」の要素内のすべてのリンクを返します。

$$('#navbar a', '#sidebar a');

以下は、rel属性に「nofollow」という単語が含まれるリンクを除くすべてのリンクを返します。

$$('a:not([rel~=nofollow])');

以下は、すべてのテーブル本体内のすべての偶数行を返します。

$$('table tbody > tr:nth-child(even)');

以下は、コンテンツのないすべてのDIVを返します(つまり、空白のみ)。

$$('div:empty');