document.getElementsByClassNameメソッド

prototype.js解読

やっと半分まできました＾＾；

申し訳ありませんが、以降は逐行の解読ではなく、ポイントのみの記述とさせてください。ここまでのすべてを理解された方なら、問題ないと思います。

【抜粋】
document.getElementsByClassName = function(className, parentElement) {
  var children = ($(parentElement) || document.body).getElementsByTagName('*');
  return $A(children).inject([], function(elements, child) {
    if (child.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
      elements.push(child);
    return elements;
  });
}

documentオブジェクトにメソッドを追加しています。CSSクラス名で要素を取得するメソッドです。第一引数がクラス名、第二引数が検索する親要素です。指定しないと全体(body)を検索します。その後、該当する要素の配列を返却します。

あ、getElementsByTagNameってワイルドカード使えるんですね・・・。

injectメソッドは、ArrayクラスがEnumerableクラスから継承したものです。見慣れないと何をやっているか分かりにくいですが、使えるようになると非常に便利です。

【例】
<html>
<head>
<title></title>
<script language="javascript" src="prototype.js" charset="utf-8"></script>
<script language="javascript">
<!--
function init(){
  var str = "";
  var wk;
  
  //全体からclassAの要素を取得
  wk = document.getElementsByClassName("classA");
  //ID表示用文字列作成
  wk = wk.collect(function(value){return value.id});
  str += "body/classA:" + Object.inspect(wk) + "<br/>";

  //parent1要素以下からclassAの要素を取得
  wk = document.getElementsByClassName("classA", "parent1");
  //ID表示用文字列作成
  wk = wk.collect(function(value){return value.id});
  str += "parent1/classA:" + Object.inspect(wk) + "<br/>";

  //表示
  $('test').innerHTML=str;
}
//-->
</script>
</head>
<body onload="init();">
<div id="test"></div>
<div id="parent1">
  <div id="child11" class="classA"></div>
  <div id="child12" class="classA"></div>
  <div id="child13" class="classB"></div>
  <div id="child14" class="classB"></div>
</div>
<div id="parent2">
  <div id="child21" class="classA"></div>
  <div id="child22" class="classA"></div>
  <div id="child23" class="classB"></div>
  <div id="child24" class="classB"></div>
</div>
</body>
</html>
【上記例の実行結果】
body/classA:['child11', 'child12', 'child21', 'child22']
parent1/classA:['child11', 'child12']