« 共有メニューの憂鬱 | メイン | 正しいクラス名の取得方法 »

2005年06月09日

要素をクラス名で取得 [DOM]

getElementsByClassName()が欲しいと思った。

何の話だろうか。DOM2 HTML では、クラス名から要素を取得するための操作が用意されていない。
これはDOM for HTMLにとって非常に有用となるメソッドのひとつだ。DOMでダイナミックに操作を行うとき、どうしても目印となるものが欲しくなる。

例えば入力フォームに数値のみしか入力できないようにスクリプトを組みたいと思ったとする。HTML+なら次のようにするだろう。

<input type="int">

しかし実際にはスクリプトを使うことになる。input要素ごとにonchangeイベントを付けるのはあまりに汚すぎる。そこで登場するのがDOMだ。

<input type="text" class="int" />

こうしておけば、そのフィールドが数値型であることを明示できる。DOMで操作するのも容易だ。
このように、DOMではclass名を基準にして操作を行うケースが非常に多い。より汎用性を、求めるならなおさらだ。他の属性（例えばIDやName）では不十分である。

とりあえず無いものは自分で作るしかない。以前作ったものをあげてみる。

function getElementsByClassName(strClass){

  var elmsClassTag = [];
  var elmsAllTag   = document.getElementsByTagName("*");

  for(var i=0; i<elmsAllTag.length; i++){
    var elmTag = elmsAllTag.item(i);
    if(elmTag.className == strClass){
      elmsClassTag.push(elmTag);
    }
  }

  return elmsClassTag;
}

これでもできないことは無いのだが、関数呼び出しのたびに全ての要素を取り出しているので、あまりに効率が悪い。頻繁に使う場合は、classNameの管理テーブルを作って実装したほうが良いかもしれない。
DOMの仕様自体に取り込んでくれればなお良いのだが。

投稿者 : 08:52 | コメント (1)

コメント

あ～やはり、div class="" には、アクセス出来ないのですね・・・＞＜

ＨＴＭＬをかなりカスタマイズしてしまい、ＣＳＳに適用するのに、ほとんどをclssで指定してしまいました・・・。

どうにかならないのでしょうか・・・

投稿者 ＤＯＭ初心者 : 2006年03月28日 18:17

コメントしてください




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)