idとclass

仕事

なんとなくわかったよーな。わかってないよーな状態のまま使うから、妙に悩んでしまった。
スタイルシートのidとclassの違い

  • class→ページ内に複数ある
  • id→ページ内に一カ所しか無い

…なんで気づかないかなぁ。と、軽く凹む。基礎がないのでこうなると激しく反省。


これを踏まえて…。
やりたかったのはprototype.jsの$$()関数を使うと次の様なことができる。
対象となるHTMLは下の様な形。

<body>
   <h2>Javascript test - prototype.js::$$()</h2>
   <div class="foo">
      <input type="text"><div></div><br>
      <input type="text"><div></div><br>
      <input type="text"><div></div><br>
   </div>
   <a href="#" onclick="addString()">$$()関数のテスト</a>
</body>

JavaScriptは下の様な形。下のソースより前にprototype.jsを読み込んでおく。

var clickCount = 0;

function addString()
{
   var formElements = $$('div.foo input');		// classなのでdiv.foo、idならdiv#foo
   var divElements  = $$('div.foo div');

   for(var i=0; i<formElements.length; i++){
      if(formElements[i].value == ""){
         divElements[i].innerHTML = "未記入です";
      }
      else{
         divElements[i].innerHTML = "上には" + formElements[i].value + "と書いてありました";
      }
   }
}

これを実行すると、

[f:id:hideack:20070302002635j:image

が表示されるので、「関数のテスト」のリンクを押すと、

f:id:hideack:20070302002633j:image

と表示される。
つまり、$$()関数の引数で指定した

  • div要素のclass="foo"で定義されている中のinput要素
  • div要素のclass="foo"で定義されている中のdiv要素

にマッチするものが配列として得られている訳ですな。（formElements, divElementsに入っている）


今日つっかえっていたのは上のソースで書くところの 「div class="foo"」を「div id="foo"」になっていたのに気づかなかったとさ。