タイトルにもあるとおり、
getElementsByClassNameメソッドはIEには利かないようです。
知りませんでした…。
まず、getElementsByClassNameの説明です。
getElementsByClassName
与えられたクラス名で得られる要素の集合を返します。
【例】
'test'クラスを持っている要素の全てを得ます。
document.getElementsByClassName('test')
指定した個所を読んだり、その個所に書き込んだりします。複数の個所を一斉に変えることができます。
これはFirefox、Chrome、Safariではサポートされていて、IE6、IE7、IE8だと
効かないです。undefinedで返ってきてきます。
今回、何をしたかったかというと、
メニューのロールオーバ時に、英語表記から日本語表記に変えるというものです。
addEventListener
1つのイベントターゲットにイベントリスナーを1つ登録します。
addEventListenerでload関数を登録します。
イベントのDOMContentLoadedで、DOM の構築が終わったタイミングで
load関数を呼び出します。
getElementsByClassNameでclass="top"を取得し、それをtop変数に代入する。
addEventListenerでtextAを登録します。
登録されたtextAは、イベントのmouseoutでマウスが離れた時に、
呼び出されます。
こんな感じに作っていましたが、getElementsByClassName以外にも
IEで動かないメソッドがありました。
なので、jQueryを使って作ることにしました。
jquery1.7.2を使用しています。
attr
属性値の取得をします。
$("セレクタ").attr("属性")
$()関数を利用して、HTMLセレクタのliセレクタを指定して、attr関数を利用してclass属性を指定すると属性値を取得することができます。
はじめに、配列を作ります。
classと日本語表記と英語表記の2次元配列を用意しました。
mouseover時に、li属性のclass属性を取得しwhileでclass名が一致するまで
ループさせます。
一致したらループを抜けて、文字の変換を行います。
これでIEでも動くようになりました。
作り終えてから思いましたが、liにclassを設定している理由がなかったです…。
idで作っていれば、getElementsByClassNameを使わず済みました。