クロスブラウザーの JavaScript 開発に関する一般的な考慮事項_javascript のヒント

1. テーブルに行を追加する
これまでに Ajax を使用した経験では、JavaScript を使用して既存のテーブルに行を追加したり、テーブルの行を含む新しいテーブルを最初から作成したりすることが多いでしょう。 document.createElement メソッドと document.appendChiid メソッドを使用するとこれが簡単になります。 document.createElement を使用して表のセルを作成し、 document.app-endChild メソッドを使用してこれらの表のセルを表の行に追加するだけです。次の編集手順は、document.append-
Child を使用してテーブル行をテーブルに追加することです。
これは、Firefox、Safari、Opera などの現在のブラウザで可能です。ただし、lE を使用している場合、テーブルの行はテーブルに表示されません。さらに悪いことに、IE はエラーをスローせず、テーブル行が実際にテーブルに追加されたのに表示されない理由についての手がかりも提供しません。
この場合、解決策は簡単です。 IE では、tr 要素を table 要素に直接追加するのではなく、tbody 要素に追加できます。たとえば、空のテーブルを次のように定義するとします。



このテーブルに行を追加する正しい方法は、以下に示すように、テーブルではなくテーブル本体に行を追加することです:
var cell=document.createElement("td").appendChild(document.createTextNode ("foo"));
vat row=document.createElement("tr").appendChild(cell);
document.getElementByld("myTableBody").appendChiid(row); ありがとうございます, この方法は、IE を含む現在のすべてのブラウザで機能します。常にテーブル本体をテーブル内で使用する習慣を身に付けていれば、この問題を心配する必要はありません。

2 JavaScript による要素のスタイリング
Ajax テクノロジーを使用すると、開発者が作成した Web アプリケーションは、ページを完全に更新することなくサーバーとシームレスに通信できます。ただし、A1ax リクエストの場合、この種のページのちらつきは発生しないため、ユーザーはページ上の一部のデータが更新されたことに気づかない可能性があります。ページ上の一部のデータが変更されたことを示すために、特定の要素のスタイルを変更したい場合があります。たとえば、株式の価格が Ajax リクエストを通じてシームレスに更新された場合、その株式の名前を強調表示できます。 要素の setAttribute メソッドを使用して、JavaScript を通じて要素のスタイルを設定できます。たとえば、span 要素内のテキストを赤と太字で表示されるように変更するとします。 setAttribute セラピーは次のように使用できます。 >IEを除く、この方法は他の現在のブラウザでも実行可能です。 IE の場合、解決策は要素のスタイル オブジェクトの cssText プロパティを使用して目的のスタイルを設定することです。このプロパティは標準ではありませんが、以下に示すように広くサポートされています。 ;";
この方法は、IE および Opera を除く他のほとんどのブラウザでうまく機能します。現在のすべてのブラウザ間でコードを移植できるようにするには、両方のメソッドを同時に使用します。つまり、次のように setAttribute メソッドと要素のスタイル オブジェクトの cssText 属性の両方を使用します。
var scanElement = document.getElementById ("mySpan");
spanElement.setAttribute("style", "font-weight:bold; color:red;");
spanElement.style.cssText = "font-weight:bold; color:red ;";
このようにして、要素は現在のすべてのブラウザで通常どおりスタイル設定できます。

3. 要素の class 属性を設定する

前のセクションを読んだ後、JavaScript を使用して要素のインライン スタイルを設定できることがわかりました。要素を使用せずに要素を設定する class 属性が最も簡単です。残念ながらそうではありません。要素のインライン スタイルの設定と同様に、JavaScript を介して要素のクラス属性を動的に設定する場合にもいくつかの特殊性があります。
ご想像のとおり、IE は現在のブラウザーの中で例外的ですが、解決策は非常に簡単です。 Firefox や Safari などのブラウザを使用する場合、次のように要素の setAttribute メソッドを使用して、冗長要素のクラス属性を設定できます。
var element = document.getElementById("myElement"); .setAttribute ("class", "styleC1ass");
奇妙なことに、setAttribute メソッドを使用して属性名を class として指定すると、IE は要素の class 属性を設定しません。逆に、IE は setAttribute メソッドのみを使用する場合、className 属性を単独で認識します。この状況の完全な解決策は、要素の setAttribute メソッドを使用するときに、次のように class と className の両方を属性名として使用することです: var element = document.getElementById("myElement"); element。 setAttribute("class", "styleC1ass");
element.setAttribute("className", "styleC1ass");
現在、ほとんどのブラウザはクラス属性名を使用し、IE はその逆です。 。

4. 入力要素の作成

入力要素は、ユーザーにページを操作する手段を提供します。 HTML 自体には、単一行のテキスト ボックス、複数行のテキスト ボックス、選択ボックス、ボタン、チェック ボックス、ラジオ ボタンなど、限られた入力要素のセットがあります。 JavaScript を使用して、Ajax 実装の一部としてそのような入力要素を動的に構築することもできます。
単一行のテキスト ボックス、ボタン、チェック ボックス、ラジオ ボタンはすべて入力要素として作成できますが、type 属性の値は異なります。選択ボックスとテキスト領域には独自のマークアップがあります。いくつかの簡単なルールに従う限り、JavaScript を使用して入力要素を動的に作成するのは簡単です (ラジオ ボタンを除く。これについては「ラジオ ボタンの作成」セクションで説明します)。選択ボックスとテキスト領域は、document.createElement メソッドを使用して簡単に作成できます。select や textarea などの要素のタグ名を document.cr
eateElement に渡すだけです。
単一行のテキスト ボックス、ボタン、チェック ボックス、ラジオ ボタンは、すべて同じ要素名が入力されていますが、type 属性の値が異なるため、少し難しくなります。したがって、これらの要素を作成するには、document.createElement メソッドを使用するだけでなく、後で要素の setAttribute メソッドを呼び出して type 属性の値を設定する必要もあります。これは難しくありませんが、追加のコード行が必要になります。
新しく作成した入力要素を親要素のどこに追加するかを検討するときは、document.createElement ステートメントと setAttribute ステートメントの順序に注意する必要があります。一部のブラウザでは、要素が作成され、type 属性が正しく設定されている場合にのみ、新しく作成された要素が親要素に追加されます。たとえば、次のコード スニペットは、一部のブラウザでは奇妙な動作をする可能性があります。
document.getElementById("formElement").appendChild(button);奇妙な動作を避けるために、次のように、input 要素の作成後にその要素のすべての属性、特に type 属性を設定してから、それを親要素に追加してください:
var button = document.createElement("input ") :
button.setAttribute("type", "button");
document.getElementById("formElement").appendChild(button);
今後の問題を解決するには、次の簡単なルールに従ってください。診断が難しいものが発生する可能性があります。

5 方向入力要素へのイベント ハンドラーの追加
入力要素へのイベント ハンドラーの追加は、setAttribute メソッドを使用してイベント ハンドラーの名前とイベント ハンドラーの名前を指定するだけで簡単です。目的の関数ハンドラーですよね？要素のイベント ハンドラを設定する標準的な方法は、要素の setAttribute メソッドを使用することです。このメソッドは、イベント名を属性名として使用し、関数ハンドラを属性値として使用します。以下に示すように:
var formElement = document,getElementById("formElement"); formElement.setAttribute("onclick", "doFoo();");
IE を除き、上記のコードは動作します。現在のすべてのブラウザすべてのデバイスで動作します。 JavaScript を使用して IE で要素のイベント ハンドラーを設定する場合は、匿名関数に割り当てるのではなく、要素上でドット表記を使用して必要なイベント ハンドラーを参照する必要があります。この匿名関数は必要なイベント ハンドラーを呼び出す必要があります。以下に示すように:
var formElement = document,getElementById("formElement");
formElement.onclick = function() { doFoo() };
ドット表記による onclick イベントからの参照方法に注意してください。ハンドラ。 onclick イベント ハンドラーは匿名関数に割り当てられており、この匿名関数は必要なイベント ハンドラーを呼び出すだけです。この場合、イベント ハンドラーは doFoo です。
幸いなことに、このテクノロジーは IE および他のすべての現在のブラウザーでサポートされています。したがって、JavaScript を通じてフォーム要素のイベント ハンドラーを動的に設定することは完全に可能です。

6. ラジオ ボタンを作成します。
常に最良のものを最後に保存します。 IE でラジオ ボタンを作成する方法は他のブラウザで使用される方法とは大きく異なるため、JavaScript を使用してラジオ ボタンを動的に作成するのは面倒です。 IE を除く他のすべてのブラウザでは、現在、次のメソッドを使用してラジオ ボタンを作成できます (これらのメソッドが考えられます):
var radioButton = document.createElement("input");
radioButton.setAttribute( "type", "radlo");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked"); IE へのラジオ ボタンは、 を除く現在のすべてのブラウザで作成され、正常に動作します。 IE では、ラジオ ボタンが表示されます。しかし、ラジオボタンの行をクリックしても期待どおりに選択されないため、選択できません。 IE では、ラジオ ボタンの作成方法がまったく異なり、他のブラウザで使用される方法とはまったく互換性がありません。前に作成したラジオ ボタンの場合、IE では次のように作成できます:
var radioButton = decument.createElement("name='radioButton' value='checked'>") ;
幸いなことに、IE では JavaScript を使用してラジオ ボタンを動的に作成することができますが、それはより困難であり、他のブラウザとは互換性がありません。
この制限を克服するにはどうすればよいでしょうか? 答えは簡単です。ラジオ ボタンを作成するときにスクリプトがどのメソッドを使用するかを認識できるように、何らかのブラウザ スニッフィング メカニズムが必要です。幸いなことに、さまざまなブラウザを大量にチェックする必要はありません。最新のブラウザのみが使用されていると仮定すると、スクリプトは IE と他のブラウザを区別するだけで済みます。 IE は、uniqueID という名前のドキュメント オブジェクトの特別な属性を認識できます。 IE はこの属性を認識する唯一のブラウザでもあるため、uniqueID はスクリプトが IE で実行されているかどうかを判断するのに非常に適しています。
docurnent.uniqueID 属性を使用してスクリプトが実行されているブラウザを特定する場合、IE 固有のメソッドと標準準拠のメソッドを組み合わせることができ、次のコードが生成されます。
if(document.uniqueID) {
//Internet Explorer
var radioButton = decument.createElement("name='radioButton' value='checked'>");
}
else { //標準準拠
var radioButton = document.createElement("input");
radioButton.setAttribute("type", "radlo");
radioButton.setAttribute("name", "radioButton" ");
radioButton.setAttribute("value", "checked");
}