ということに、メニューを開閉するだけのプログラムを組んでいたら気づきました。

<script type="text/javascript">
<!--
function getChildLength(ID){
    var obj = document.getElementById(ID);
    alert(obj.childNodes.length);
}
-->
</script>

中略

<ul onclick="javascript:getChildLength('ul_list')" id="ul_list">
    <li>あいうえお</li>
    <li>あいうえお</li>
    <li>あいうえお</li>
</ul>

　こういうのがあったとして、これを実行すると、IEではちゃんと「3」と表示されるのに、Firefoxでは「7」が返る。何故かといえば、どうやら改行コードみたいなのも子ノードの一つとして認識してしまっているらしい。

　でも数の数え方を変えればなんとかなる。IEでは、<li>要素は「obj.childNodes.item(n)」で求めることが出来る。nは整数。

　Firefoxの場合、<li>要素の番号が上の例だと奇数になっていたため、「obj.childNodes.item(2n-1)」でやる。そうするとうまくいった。ただ場合によってはうまくいかないかもしれない。その場合、最初から改行したりスペース入れたりせずにHTMLを書くか、後から改行コードを削除したりすればうまくいくと思う。

　参考までに、要素の子ノードを表示したり非表示にしたりするプログラム。

function child_penclose(ID){
    var obj = document.getElementById(ID);
    var cld = obj.childNodes;
    i=1;
    j=0;
    uat = navigator.userAgent;
    if (uat.indexOf("Firefox")!=-1){
        //start of code for Firefox
        while(i         j=i*2-1;
        if (cld.item(j).style.display != "none") cld.item(j).style.display="none";
        else cld.item(j).style.display="list-item";
        i++;
        //end of code for Firefox
        }
    }else{
        //start of code for other Browser
        while(i         if (cld.item(i).style.display != "none") cld.item(i).style.display="none";
        else cld.item(i).style.display="list-item";
        i++;
        //end of code for other Browser
        }
    }
}

<a href="javascript:child_openclose('menuSample')">Menu Title (Click Here !)</a>

<ul id="menuSample">
    <li>Contents</li>
    <li>Contents</li>
    <li>Contents</li>
    <li>Contents</li>
    <li>Contents</li>
</ul>

　Firefox用コードの所の「while(i<cld.length)」はちょっと変えた方がいいかもしれない。まぁバグも無く動いてるけど。

　ちなみに、Firefoxとそれ以外のブラウザで違う動きをさせるには、こういったコードを使うと便利かもしれない。

uat = navigator.userAgent;
if (uat.indexOf("Firefox")!=-1){
    //start of code for Firefox
    hogehoge;
    //end of code for Firefox
}else{
    //start of code for other Browser
    hogehoge;
    //end of code for other Browser
}

　単に、UserAgentにFirefoxの文字があるか無いかを判別してるだけだけど。ただ、Mozillaのブラウザで、上の子ノードの数を求めるプログラムの結果がどうなるかが気になる所。どうなんでしょ。

カテゴリ / 2007/06/17 21:10 / Permlink / WEB拍手

この記事のトラックバックURL

無記名 (2007/07/06 22:16) >

おそらく、以下と同様の現象かと思います
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=17868&forum=9&2

firefoxの場合、
var cld = obj.childNodes;
を
var cld = obj.childNodes[0];
とすることで0からカウントした数が正しく入ってくるようです。

無記名 (2007/07/06 22:16) >

おそらく、以下と同様の現象かと思います
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=17868&forum=9&2

firefoxの場合、
var cld = obj.childNodes;
を
var cld = obj.childNodes[0];
とすることで0からカウントした数が正しく入ってくるようです。

K (2007/12/30 21:17) >

お返事が遅れてしまってすみません。
貴重な情報をありがとうございまいた。
試してみます。

コメントを投稿する

名前

Mail

URL

情報を登録する