Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/06/15 14:00

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

目次

はじめに

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

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

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

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

過去の記事

サポートしている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>

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

    Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃...

バックナンバー

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

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5