クラス名からノードを取得する - JavaScript Ajax プログラミング

PROGRAM

クラス名からノードを取得する

JavaScript の DOM (Document Object Model) を利用して、HTML や XML のタグ名や ID 名から、それを示すノードを取得することができます。

その辺りについてはノードを取得するでもお話ししましたが、今回はタグに付けられた "class" 属性に設定された名前からそのノードを取得する方法についてお話ししたいと思います。

getElementsByClassName に依る方法

クラス名からノードを取得する方法として getElementsByClassName が HTML5 で規定されているらしいのですが、実際に試してみて、少なくとも平成 22 年 2 月 18 日の時点では、この方法はお勧めできない感じでした。

とりあえず、その方法としては次のような感じになります。

pNode = document.getElementsByClassName('クラス名');

このようにすることで、この getElementsByClassName に対応しているブラウザであれば、class="クラス名" が設定されているタグをノードとして取得することができます。

ただ、この方法で Google Chrome 9.0 や Safari 5.0 では問題なくタグを取得できたのですが、Internet Explorer 8.0 では対応していないらしく、タグが取得できずにそれ以降の JavaScript が実行されなくなってしまうようでした。

ユーザー定義関数に依る方法

これを解消するための方法として、Internet Explorer 8.0 に getElementsByClassName を実装させるための JavaScript が http://www.html5.jp/library/dom_getElementsByClassName.html で提供されていました。

これをダウンロードして、たとえば次のような感じで HTML へ読み込んであげると、これで getElementsByClassName が IE8 でも利用できるようになります。

ただ、こちらの方法についても、少なくとも平成 22 年 2 月 18 日の時点ではお勧めできない感じです。

まず、この JavaScript を書かれた方がお話しされているように、タグを順次辿ってタグを取得する都合、タグが多くなるほど処理が遅くなることに注意して利用する必要があるようです。

あらかじめ getElementById や getElementsByTagName 等でノードを取得してから、そのノードに絞って getElementsByClassName を利用するなどの対応は可能であれば取っておくのが良いとのことでしたけど、たかだか SPAN が 4 個、その他のテキストノードで構成されているタグで検索してみたところ、なぜか Internet Explorer (IE8) だと 5 秒程度も時間がかかってしまいました。

ところが、たとえば SPAN タグに探したいクラス名が付与されていると判っている場合、

// 検索したいノード targetNode が持っている SPAN タグを検索します。

var searchNodes = targetNode.getElementsByTagName('span');

for (var i = 0; i < searchNodes.length; i++)

{

if (searchNodes[i].className == 探したいクラス名)

{

// ここで目的のクラスを持つタグに対する処理を行います。

}

というようにコーディングしてあげたところ、一瞬と呼べるくらいの速度で処理ができるようになりました。

このような感じで、Internet Explorer (IE8) では、上記で組み込んだ外部スクリプトでは getElementsByClassName は実用上使い物にならないように思います。それよりも、getElementsByTagName と className で判定した方がはるかに実用的に速くなるようでした。

それともうひとつ、getElementsByClassName をお勧めできない理由として、上記のように外部スクリプトを取り込んだ場合、Internet Explorer の IE8 標準モードでは、スクリプトを組み込まなかったときと同じように、getElementsByClassName が機能してくれませんでした。

互換表示モードであれば正しく動作するのですけど、標準モードに切り替えた途端に正しい結果が得られなくなってしまいましたので、そんなところからも、現時点では getElementsByClassName の使用は避けつつプログラミングを行う方が良さそうです。

[ もどる ]