プロトタイプ-$（）メソッド

最も一般的に使用される便利な関数$（）は、DOM要素のハンドルを取得する簡単な方法を提供します。

構文

$(id | element)

OR

$((id | element)...)

戻り値

HTMLElementが見つかりました。
複数の要素が見つかった場合は、HTML要素の配列を返します。

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

node = document.getElementById("elementID");

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

node = $("elementID");

例

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

      <script>
         function test() {
            node = $("firstDiv");
            alert(node.innerHTML);
         }
      </script>
   </head>

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

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

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

出力

$（）を使用して複数の値を取得する

また、複数の要素を取得する機能が関数に組み込まれているため、$（）関数は* document.getElementById（）*よりも強力です。

この関数のもう1つの優れた点は、id文字列または要素オブジェクト自体のいずれかを渡すことができることです。これにより、いずれかの形式の引数をとることができる他の関数を作成するときに非常に役立ちます。

例

この例では、$（）関数が要素の配列を返すようになり、単純な for ループでアクセスできます。

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

      <script>
         function test() {
            allNodes = $("firstDiv", "secondDiv");

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

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

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

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

出力

Prototype-dollar-method

目次

プロトタイプ-$（）メソッド

構文

戻り値

例

出力

$（）を使用して複数の値を取得する

例

出力