ブラウザによるjQueryの挙動の違い

ブラウザ間の挙動の違い、とことさらに騒ぎ立てるようなことではないのだが、今回はIEをメインにWeb開発していると、FireFox、Chromeを使ってテストをする際に予期せぬ挙動に出くわすというお話。

動作確認したブラウザのVersion
IE8, FF3.5.3, Chrome3


１、val()とtext()
val()はinput要素のvalueを取得するための関数で、text()はspanやdiv要素などのinnerTextを取得する用。なので下記の記述は間違い、・・・になるはずなのだがIE上では正しく値が取得できてしまう。

// textboxから値を取得（IEだけで動くVer）
var hoge = $('input:text').text();

しかし、これではFF, Chrome上では期待した動作をしない（値が常にempty）ので下記のように訂正。

// textboxから値を取得（全部で動くVer）
var hoge = $('input:text').val();

上記の記述方法でも、もちろんIEは期待通りの動作をする。


２、selectorの厳密さ
これもかなりIEがいい加減だな、という話なのだけれど、ある要素のオブジェクトを取得する際の挙動の違い。

// classにselectedを指定しているspan要素を取得（IEだけで動くVer）
var hoge = $("span[class='selected'").val();

上記、IEでは動くけれど、FF、Chrome上では要素を取得できない。なぜかというと、spanの属性を指定している部分の閉じタグが抜け落ちているからである。これは単純なバグなので発見も容易だと思うけれど、複雑な処理を記述している中でこういうことがあると、コンパイラのないJavaScriptではデバッグするのにかなりの苦労を伴うと思う。実際には下記が正しい。

// classにselectedを指定しているspan要素を取得（全部で動くVer）
var hoge = $("span[class='selected']").val();



というふうに、IEはかなりファジーな挙動をするのでリリース前には他ブラウザでテストを入念に行う必要がある。

最後にFFでScriptをデバッグするのに大いに役立つAdd-onを紹介しておこうと思う。Firebug。