JavaScriptでクロスブラウザ対応（１）

今回は、クロスブラウザ対応が必要な項目としてオブジェクト内の文字列の取得と設定をとりあげます。極めて基本的なオブジェクトにも関わらずクロスブラウザ対応が必要です。
(追記2014/10/15: その後調べた結果、クロスブラウザ対応の状況が変わっていることがわかりましたので、以下、必要箇所を適宜修正しました。)

対象とするブラウザ（バージョン名）

• Chrome　（ 37.0.2062.124 m）
• Firefox（32.0.3）
• IE（11.0.9600.17280）

以上です。SafariやOperaは今のところ使用予定がないので、省略します。

オブジェクト内の文字列

• Chrome: innerText
• Firefox: textContent
• IE: innerText

つまりFirefoxに対して特別に処理を書く必要があります。

（追記2014/10/15）innerTextを基準に考えると上記は、現時点でも当てはまります。しかし、textContentについてはChromeとIE10、IE11が対応済みです*1。よって最新のブラウザのみを対象としたクロスブラウザ対応はtextContentのみで十分ということになります。IE7からIE9までをクロスブラウザ対応の対象に含める場合は、以下のような場合分けをするのが得策です。ただし、場合分けの方法は、以下の一通りではなく、いくつか考えられます。

コーディング例

var userAgent = window.navigator.userAgent;

if (useAgent.indexOf(Firefox)!=-1){
  //Firefox
  var doc = document.getElementById("flag1").textContent;

} else {
  //Chrome and IE
  var doc = document.getElementById("flag1").innerText;
}

*1:こちらに対応表があります。 W3C DOM Compatibility - HTML