クロスブラウザー JavaScript メソッドの開発手順_JavaScript スキル

IE は現在のブラウザとは異なりますが、Firefox と Safari でブラウジングする場合、解決策は非常に簡単です。要素の setArribute メソッドを使用して要素

の class 属性を設定できます。

クロスブラウザ JavaScript の開発

1. ff と ie の childNode の違い。

ff のノード (nodeType = 1) はすべて textNode (nodeType = 3) で区切られていますが、ie/op ではそうではありません。

content

ff の下では、box1 には 3 つの子ノードがあり、ie の下には 1 つの子ノードがあります。

2. ノードオブジェクトのスタイルクラス名を設定します。

ie で特定のノードのクラスを設定するには、設定または取得する属性として "className" を使用します。

ff およびその他のブラウザは、設定または取得する属性として「クラス」を使用します。

コード:

if(typeof node1.getAttribute("className") == "string") {

.

}

3. ノードオブジェクトのスタイルコンテンツを設定します。



コードを直接例として取り上げます。

var oStyle = oNode.getAttribute("style");

// つまり

if(oStyle == "[オブジェクト]") {

oStyle.setAttribute("cssText", strStyle);

oNode.setAttribute("style", oStyle); 🎜>
} else {

oNode.setAttribute("style", strStyle);

}

4.

つまり、イベントを使用します。

ff evnt

を使用します。5. イベント アクション オブジェクト

つまり、objEvent.srcElement を使用します。

ff は、objEvent を使用します。 target

これは XML ファイルの書き込みに関連しています。IE の prepareWhiteSpace を true に設定して確認してください。以下は Microsoft のドキュメント
から取得したコードです。

var xmlDoc = new ActiveXObject( " Msxml2.DOMDocument.4.0");

xmlDoc.async = false;

xmlDoc.load("books.xml");

alert(xmlDoc.xml);

xmlDoc.async = false;

xmlDoc.load("書籍. xml ");

alert(xmlDoc.xml);

-----------------------

1. テーブルに行を追加する:

document.createElement メソッドと document.appendChild メソッドを使用すると、テーブルに行を追加したり、テーブルの行を含む新しいテーブルを最初から作成したりすることが簡単になります。 table を作成し、 document.appendChild メソッドを使用してこれらの表のセルを表の行に追加し、 document.appendChild を使用して表の行を表に追加します。

IE では、tr 要素をテーブルに直接追加するのではなく、tbody に追加できます。





>
このテーブルに行を追加する正しい方法は、次のように、テーブルではなくテーブル本体に行を追加することです。

var cell=document.createElement("td").appendChild ( document.createTextNode("foo");

var row = document.createElement("tr").appendChild(cell);

document.getElementById("mysqlTableBody").appendChild( row );

幸いなことに、この方法は IE を含む現在のすべてのブラウザーで共通です。
2 Javascript を使用して要素のスタイルを設定します。

たとえば、表示されるspan要素のテキストを変更する場合は、要素のsetAttributeメソッドを使用できます。赤い太字で示した場合は、次のように setAttribute メソッドを使用できます。 :bold; color: red;") ;

IE を除き、このメソッドは現在他のブラウザでも利用できます。IE の場合、解決策は要素のスタイル オブジェクトの cssText 属性を使用して目的のスタイルを設定することです。ただし、この属性は標準ではありませんが、次のように広くサポートされています。

varspanElement = document.getElementById("mySpan"); blod; color: red;";

このメソッドは、IE と Opera を除く他のほとんどのブラウザでうまく機能します。コードを現在のすべてのブラウザで移植できるようにするには、このメソッドは setAttribute メソッドと以下に示すように、スタイル オブジェクトの cssText 属性:

var scanElement = document.getElementById("mySpan");

spanElement.setAttribute ("style","font-weight:bold) ; 色: 赤;");

scanElement.style.cssText = "font-weight:blod ; color:red;";

3 要素の class 属性を設定します。

IE は現在のブラウザとは異なりますが、解決策も非常に簡単です。Firefox と Safari を使用してブラウジングする場合、以下に示すように、要素の setArribute メソッドを使用して要素の class 属性を設定できます。 "myElement");

element.setAttribute("class","styleClass");

奇妙なことに、setAttribute メソッドを使用して属性名をクラスとして指定すると、IE要素の class 属性は設定されません。逆に、IE は setAttribute メソッドのみを使用する場合、className 属性を単独で認識します。

この状況の完全な解決策は次のとおりです。要素の setAttribute メソッドを使用するときは、次に示すように class と className の両方を属性名として使用します。

var element = document.getElementById ("myElement ");

element.setAttribute("class","styleClass");

element.setAttribute("className","styleClass");

現在、ほとんどのブラウザはクラス属性名を使用し、IE はその逆です。

4 入力要素の作成

入力要素は、ユーザーにページ操作の手段を提供します。HTML 自体には、単一行のテキスト ボックス、複数行のテキスト ボックス、ボックスを選択し、ボックス、ボタン、チェックボックス、ボタンを選択します。 Javascript を使用して、Ajax 実装の一部としてそのような入力要素を動的に作成することもできます。

単一行のテキスト ボックス、ボタン、チェック ボックス、ラジオ ボタンはすべて入力要素として作成できますが、type 属性の値が異なります。選択ボックスとテキスト領域には独自のマークアップがあり、いくつかの簡単なルールに従う限り、Javascript を通じて入力要素 (ラジオ ボタンを除く) を簡単に動的に作成できます。選択ボックスとテキスト領域は、document.createElement メソッドを使用して簡単に作成できます。select や textarea などの要素のタグ名を document.createElement に渡すだけです。

単一行のテキスト ボックス、ボタン、チェック ボックス、ラジオ ボタンは、すべて同じ要素名が入力されていますが、type 属性の値が異なるため、少し難しくなります。したがって、これらの要素を作成するには、document.createElement メソッドを使用するだけでなく、後で要素の setAttribute メソッドを呼び出して type 属性の値を設定する必要もあります。難しいことではありませんが、追加のコード行が必要になります。

新しく作成した入力要素を親要素のどこに追加するかを検討するときは、document.createElement ステートメントと setAttribute ステートメントの順序に注意する必要があります。一部のブラウザでは、要素が作成され、type 属性が正しく設定されている場合にのみ、新しく作成された要素が親要素に追加されます。たとえば、次のコード スニペットは一部のブラウザで奇妙な動作をする可能性があります:

document.getElementById("formElement").appendChild(button);

button.setAttribute("type" ,"button) ");

奇妙な動作を避けるために、input 要素の作成時にすべての属性、特に type 属性を次のように設定してください:

var button = document.createElement( "input ");

button.setAttribute("type","button");

document.getElementById("formElement").appendChild(buttion);

単純なルールは、後で発生する可能性のある診断が難しい問題を排除するのに役立ちます。

5. 入力要素へのイベント ハンドラーの追加

入力要素へのイベント ハンドラーの追加は、setAttribute メソッドを使用してイベント ルーチンの名前と名前を指定するだけで簡単です。必要な関数ルーチンの ? について間違っている。要素のイベント ハンドラーを設定する標準的な方法は、要素の setAttribute メソッドを使用することです。このメソッドは、次のようにイベント名を属性名として受け取り、関数ハンドラーを属性値として受け取ります。

var formElement = document .getElementById( "formElement");

formElement.setAttribute("onclick","doFoo();");

IE を除き、上記のコードは次の場合に動作します。 Javascript を使用して IE でイベント ハンドラーを設定する場合は、要素にドット表記を使用して必要なイベント ハンドラーを参照し、それを匿名関数に割り当てる必要があります。次に示すように、この匿名関数は必要なイベント ハンドラーを呼び出します。 var formElement = documentgetElementById("formElement");

formElement.onclick = function(){ doFoo() };

幸いなことに、この手法は IE および他のすべてのブラウザーで採用されています。これをサポートしているため、JavaScript を介してフォーム要素のイベント ハンドラーを動的に設定することが完全に可能です。

6 ラジオ ボタンの作成

IE を除く他のすべてのブラウザでは、現在、次のメソッドを使用してラジオ ボタンを作成できます (これらのメソッドは考えられます)。 readioButtion = document.createElement("入力");readioButtion.setAttribute("タイプ","ラジオ");

readioButtion.setAttribute("名前","ラジオボタン");

readioButtion.setAttribute("値","チェック済み") ;

これにより、IE を除く現在のすべてのブラウザでラジオ ボタンが作成され、正常に動作します。 IE ではラジオ ボタンが表示されますが、ラジオ ボタンをクリックしても期待どおりに選択されないため、選択できません。 IE で単一行ボタンを作成する方法は完全に異なり、他のブラウザで使用される方法とはまったく互換性がありません。前に作成したラジオ ボタンの場合、IE では次のように作成できます。

var radioButtion = document.createElement(" " );

これには、何らかのブラウザスニッフィングメカニズムが必要です。 IE は、uniqueID という名前のドキュメント オブジェクトの特別な属性を認識できます。 IE はこの属性を認識する唯一のブラウザでもあるため、uniqueID はスクリプトが IE で実行されているかどうかを判断するのに適しています。

document.uniqueID 属性を使用してスクリプトが実行されているブラウザを特定する場合、IE 固有のメソッドと標準準拠のメソッドを組み合わせることができ、次のコードが得られます:

if(document .uniqueID){

//Internet Explorer

var radioButtion = document.createElement("
}

else{

//標準準拠

var readioButtion = document.createElement("input");

readioButtion.setAttribute("タイプ","ラジオ");

readioButtion.setAttribute("名前","ラジオボタン");

readioButtion.setAttribute("値","チェック済み") ;

}