ダウンロード

使い方

dom_getElementsByClassName_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。そして、getElementsByClassName メソッドを利用したいHTMLのhead要素内に、次のJavaScriptコードを記述してください。

<script type="text/javascript" src="../html5jp/dom/getElementsByClassName.js"></script>

これは、html5jpフォルダが一階層上に存在しているものとしてscript要素のsrc属性を指定していますが、html5jpフォルダはどこに設置しても構いません。html5jpフォルダの設置場所に合わせて、最初の2つのscript要素のsrc属性を書き換えてください。

この状態で、すでに、このHTMLにおいては、getElementsByClassNameメソッドを利用することができるようになります。

このライブラリーを組み込んだHTMLに、次のHTMLコードがあったとしましょう。

<div id="box" class="content red">
  <p class="sub">sub</p>
  <p class="sub blue">sub blue</p>
  <p class="sub black">sub black</p>
  <p class="sub red">sub red</p>
</div>

もしdiv要素の子要素から、class属性に "red" がセットされている要素を抜き出したい場合は、次のようにJavaScriptコードを用意します。

var elms = document.getElementById("box").getElementsByClassName("red");

class属性に "red" がセットされている要素は、一つのp要素だけです。div要素のclass属性にも "red" がセットされていますが、getElementsByClassNameメソッドは子要素から該当の要素を抜き出しますので、div要素自身が含まれないことに注意して下さい。

では、次に、div要素の子要素から、class属性に "black" と "sub" の両方がセットされている要素を抜き出してみましょう。

var elms = document.getElementById("box").getElementsByClassName("black sub");

このように、2つ以上の値を指定したい場合は、それぞれの値を半角スペースで区切ってください。それぞれの値の順番は考慮されませんので、どの順番で指定しても結果は同じです。このコードが実行されると、一つのp要素が抽出されます。<p class="sub black">sub black</p>

このメソッドは、NodeListインタフェースのオブジェクトを返します。実際に、このライブラリーでは、抽出した要素ノードオブジェクトを格納したArray型オブジェクトを返しますが、あたかもNodeListインタフェースとして利用できるよう、itemメソッドが組み込まれています（そのため、正確にいえば、Array型オブジェクトと同等というわけではありません。）。

では、抽出した要素をどのように扱うかを見てみましょう。

var elms = document.getElementById("box").getElementsByClassName("sub");
var res = "";
for( var j=0; j<elms.length; j++ ) {
  res += elms.item(j).nodeName + "：" + elms.item(j).className + "\n";
}
alert( "「" + classNames + "」の対象個数：" + elms.length + "個\n--------------\n" + res );

class属性に "sub" がセットされている要素は 4 つあり、すべてp要素です。getElementsByClassNameメソッドから得られた elms から、lengthプロパティを使えば、抽出された要素の数が得られます。また、itemメソッドにインデックス番号を引数に与えれば、該当する要素ノードオブジェクトが得られます。[実際のサンプルを見る]

動作環境

本ライブラリーは、以下の環境にて動作を確認しています。

• Internet Explorer 6 / 7
• Firefox 1.5 / 2.0
• Safari 1.3 / 2.0 / 3.0 （3.0に関してはWindows Vistaにて確認）
• Opera 9

ライブラリーご利用にあたっての注意事項

本ライブラリーは、Internet Explorerの場合においては、HTML上のすべての要素に対してメソッドをアタッチする初期化処理が行われます。要素の数が多いHTMLでは、そのHTMLがブラウザーに読み込まれる際に、初期化処理に時間がかかりますので、ご了承ください。

本ライブラリーで提供するgetElementsByClassNameメソッドは、該当の要素の配下にあるすべて要素を総当たり検索して、引数に指定されたclass名の一致を評価します。要素の数が多いHTMLでは、メソッドの実行に時間がかかる場合があります。もし、document.getElementsByClassName("...") とすると、HTML全体から検索されることになります。前述のサンプルのように、ある程度、範囲を限定したうえで、このメソッドをご利用されることを推奨します。

以上の理由により、要素数が多いHTMLでの利用はお勧めできません。本ライブラリーのご利用にあたっては、くれぐれも、ウェブに公開する前に必ず十分な検証を行ってください。

著作権・謝辞

著作権

Copyright 2007-2009 HTML5.JP

当サイトのJavaScriptライブラリは、Apache License, Version 2.0 のもとに配布します。