メニューのロールオーバ時に、英語表記から日本語表記に変える方法で
今回は、JavaScriptからHTMLを簡単に参照して使用出来るDOMを使用します。
DOMとは
Document Object Model（ドキュメント・オブジェクト・モデル）を略して
呼んでいます。
DOMについて、下記参考URLをどうぞ
JavaScriptプログラミング講座【ドキュメントオブジェクトモデル(DOM)について】
前回は、こんな感じに作っていました。
【IE対策】getElementsByClassName()が効かない
まず12行目
addEventListenerは、イベントリスナーを1つ登録できるやつです。
本来なら、DOMの読み込み、HTMLの解釈が終わったらload関数を呼び出すのですがこれはIE8以下では動きません…。
なので、attachEventを使わなければなりません。
それと、DOMContentLoadedもIE8以前では動かないです。
8行目
getElementsByClassNameは、特定のクラスを持っている要素の全てを得ることができます。
前回にも書きましたが、IE8以下のブラウザでは動きません。メニューをclassで作らず、idで作れば回避出来ます。
なので、今回はgetElementByIdを使います。
2行目,5行目
targetは、eventオブジェクトのtargetプロパティです。イベントの発生元であるオブジェクトを返します。
IE8以下ではsrcElementを使うみたいです。
以上が、IE対応に必要なことです。
まず、必要なメニューの情報を二次元配列を使って準備します。
tryを使っていますが、これはエラー判定をしています。
Firefox、Chrome、SafariではaddEventListenerを実行できますが、IEではサポートしていないのでエラーが出ます。
エラーだった場合はattachEventを実行します。
over関数を呼び出しtryのエラー判定で分岐させます。
target.tagNameでマウスが触れた場所のタグを取得し、target.getAttribute("id")でidを取得します。
idがnullではなくHTMLがLIならば というif文を作ります。
これにより、無駄にfor文を回すことがなくなり処理が少なくなります。
真なら、for文でidのチェックを行い同じidを見つけたら文字の変換をします。
window.onload = function()を使用しています。
attachEventが、htmlを構築される前に実行されエラーが出るので、onloadを使っています。
これのお陰で、悩みました。