SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

クロスブラウザスクリプトの作成テクニック

ブラウザがサポートしているスクリプトを判断する

クロスブラウザスクリプトの作成テクニック 第7回


  • X ポスト
  • このエントリーをはてなブックマークに追加

ブラウザによってgetElementByIdメソッドとallメソッドのサポート状況が違います。この違いを利用することでクロスブラウザを実現したスクリプトを作成することができます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 ブラウザの種類やバージョン、おのおののブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトをクロスブラウザスクリプトと言います。本シリーズでは、クロスブラウザスクリプトを実現する方法について、順を追って解説しています。

 前回までは、クロスブラウザスクリプトを実現する技法として、ブラウザの種類やバージョンを判断し、そのブラウザに最適化したスクリプトを実行するようにする方法について解説してきました。

 今回は、その考え方を少し変えて、ブラウザがスクリプト内で使用するスクリプトをサポートしているかどうかを判断し、そのブラウザがサポートしているスクリプトを設定することによって、クロスブラウザスクリプトを実現する方法について解説していきます。

 技法は違いますが、今回も前回までに解説してきたことをもとに進めていきます。必要に応じて前回までの内容も併せて参照してください。

過去の記事

サポートしているDOMによって、処理を振り分ける

 Internet Explorerはバージョン4から、Netscape Navigatorはバージョン6からブラウザがDOMに対応しました。これらのブラウザでは、ブラウザ自身が持っている情報や機能をDOMのオブジェクトとして持っています。このDOMオブジェクトには、JavaScriptを使ってアクセスする方法が用意されています。そして、DOMオブジェクトにJavaScriptを使ってアクセスし、DOMが持つ値を取得したり、値を変更したりすることによって、ブラウザの見栄えやレイアウトなどの動的な変更や、ブラウザが持っている機能を呼び出すことができます。

 DOM対応される前のブラウザでは、JavaScriptが取り扱えるのは、あくまでもブラウザがJavaScriptのオブジェクトとして用意しているオブジェクトのみでした。しかし、DOM対応されたブラウザであれば、ブラウザが持っている全オブジェクトに対し、JavaScriptを使ってアクセスすることができるのです。これにより、JavaScriptの可能性は格段に広がりました。今話題のAjaxなども、ブラウザがDOM対応されてなければ実現することはできなかったのです。

 このように、大変便利で利用価値が高いDOMとJavaScriptの関係ですが、一筋縄では行かない部分があります。DOMへのアクセス方法に大きく分けて2種類の用法があり、ブラウザによってサポートしている用法に違いがあるのです。

2種類のアクセス方法

 JavaScriptを使ってDOMにアクセスする方法には、大きく分けて「getElementById」メソッドを使う方法、「all」メソッドを使う方法の2種類があります。

 例えば、次のようにif文の条件式にdocument.getElementByIdを設定したとき、getElementByIdをサポートしたブラウザであれば、if文内で設定されているスクリプトが実行されます。

if(document.getElementById){
  「getElementById」に対応したブラウザでのみ実行されるスクリプト 
}

 また、次のようにif文の条件式にdocument.allを設定したときは、if文内で設定したスクリプトは、allメソッドをサポートしたブラウザでのみ実行されます。

if(document.all){
 「all」に対応したブラウザでのみ実行されるスクリプト 
}

 それでは、試しに次のスクリプトをDOMに対応したいろいろなブラウザで実行してみましょう。

Sample/sample_1.html
<script type="text/javascript">
<!--
 if(document.getElementById){ 
   document.write("「getElementById」に対応したブラウザ") }
 if(document.all){ document.write("<br>") }
if(document.all){ document.write("「all」に対応したブラウザ") }
//-->
</script>

次のページ
実行結果

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
クロスブラウザスクリプトの作成テクニック連載記事一覧

もっと読む

この記事の著者

半場 方人(ハンバ マサヒト)

Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃の気持ちを忘れないよに」、ということ。主な著書は、「標準Webデザイン講座 JavaScript&Ajax」(翔泳社)などがある。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1378 2008/08/26 13:54

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング