ブラウザを越えてプログラムするJavaScript
7467 ワード
http://www.cnitblog.com/joyboy/archive/2008/04/16/js.htmlから回転
＜script>
番号付け
操作
カテゴリ
IE（6.0）
FireFox(2.0)
Mozilla(1.5)
現在のブラウザ
コメント
1
「.」
アクセス(固有の属性)
OK
OK
OK
OK
2
「.」
アクセスするユーザ定義属性eg:OK
NO.
NO.
OK
get Attribute関数で代替できます。
3
obj.get Attribute
アクセス(固有の属性)
OK
OK
OK
OK
4
obj.get Attribute
アクセスするユーザ定義属性eg:OK
OK
OK
OK
5
document.all
documentにアクセスするすべてのサブ要素eg:document.all
OK
OK
NO.
OK
childNodesオブジェクトまたはgetElementById関数で対応する操作を行うことを推奨します。Div元素は取れないという人がいますが、テスト結果は大丈夫です。他の要因がテスト結果に影響するかどうかは分かりません。
6
Obj.all
非document要素のすべてのサブ要素eg:document.getElement ById(mydiv).allにアクセスします。
OK
NO.
NO.
OK
同上
7
getElemenntById（）
元素のid/nameによって元素を取得します。要素がname属性のみ設定されている場合、id属性は設定されていません。
OK
NO.
NO.
OK
注意：多くの元素はname属性がないので、eg：td、div、span…
8
変数名="
変数を暗黙的に定義します。変数名に値を付けることで新しい変数を定義します。
OK
OK
OK
OK
提案：必要なトラブルを避けるために定義変数を表示します。eg：var tmp
9
id
idで直接オブジェクトeg:test_を呼び出します。レスリング1.innerHTML="
OK
OK
NO.
OK
eval関数はスクリプトを実行するために使用されますので、eval関数にオブジェクトID/nameが入ってきたら、IEもオブジェクトの参照に戻ります。document.getElemenntById（id）で注意喚起することを提案します。このため、IEで暗黙的に定義されている変数はHTMLの中の要素のid/nameと同じではないです。
10
name
nameで直接オブジェクトeg:test_を呼び出します。for_this_name.innerHTML="
OK
NO.
NO.
OK
同上/原因同7
11
name
サポートされている特殊文字("！"，"@"，"@"，"((((*)，"，"，"，...)eg:document.getElements ByName");
NO.
OK
OK
NO.
他の文字はテストされていません。
12
tr.innerHTML="
TR要素の内部HTMLスクリプトを設定します。
NO.
OK
OK
NO.
IEでは、table、trのinnerHTMLは読み取り専用の属性であり、直接設定することができない。insertRow/insertCell関数で設定できます。
13
セル対象アクセス
trのセルオブジェクトにアクセスする前提：tr要素は削除されたtrオブジェクト、またはcloneNodeでコピーされた削除前のtrオブジェクトです。
NO.
OK
OK
undefined
それをTableに挿入して再アクセスすることができます。またはgetElements ByTagName関数でtd/thにアクセスすることができます。削除されたローソンオブジェクトにはこの問題がありません。他の要素
14
(index)
集合類オブジェクトegにアクセスする：document.getElements ByTagName（「TD」）（0）
OK
NO.
NO.
OK
正式な操作符[]を使用することを提案します。
15
Obj.toString()
取得対象の文字列「
[object オブジェクトタイプの名前]」。eg：td=「[object HTMLtbleCelElement]」NO.
OK
OK
NO.
toStering()関数を省略してオブジェクトで直接操作できます。注：IEで「[object]」を返します。
16
Obj.class
オブジェクトのcssスタイル/スタイルを指定します。eg:td.class="XPSスタイル"
NO.
OK
NO.
を選択します。
テストコードを作成できませんでした。コンパイルエラーがあります。自分でtypeof==nullでテストしてもいいです。異常がなければコードの中で使用できます。HTMLスクリプトではクラスを使いますが、Javascriptではクラスname（classはJSの保留キーワードです）を使うべきです。注意：set Attributeでクラス値をオブジェクトに設定できますが、css仕様としては解析されません。
17
コンサート
キーワードを保持し、定数を定義します。eg：const HOURS=24；
NO.
OK
OK
を選択します。
しばらくはコンサートを使わないしかないです。
18
input.type
input元素のタイプeg:input.type="button"を変更します。
NO.
OK
OK
NO.
IEは初期のinput要素タイプを開始することができますが、タイプを変更することはできません。変更が必要な場合は、input元素を交換する方式で行うことができます。
19
bj.Children
訪問対象のサブ要素集合eg：Dcument.body.children.length。
OK
NO.
NO.
OK
childNodesオブジェクトで代替できます。
20
node.replace Node
新しいノードオブジェクトeg:oldNode.replacceNodeを置換します。
OK
NO.
NO.
OK
replacceChild関数で置き換えることができます。
21
node.removeNode
既存のノードオブジェクトeg.oldNode.removeNodeを削除します。
OK
NO.
NO.
OK
oldNode.parent Node.removeChild（oldNode）方式で実現できます。
22
node.insertBefore
ノードオブジェクトを指定する前に、ノードオブジェクトdocument.body.insertBefore（newN，oldN）を挿入します。
OK
OK
OK
OK
23
obj.parentElement
訪問先の親要素eg：Dcument.body.parentElement.id；
OK
NO.
NO.
OK
parent Nodeオブジェクトで代替できます。
24
Obj.Child Nodes.length
サブノードの数を返します。（の数と同じです。eg：Dcument.body.childNodes.length；
OK
NO.
NO.
OK
FF/Moziaでは、空白または改行がテキストノードであり、childNodesのメンバーである。node.getElementsByTagName()で回避できます。
25
obj.insertAdjacentElement
要素eg:obj.insertAdjacentElement(before Begin);
OK
NO.
NO.
OK
insertAdjacentElement関数とinsertAdjacent Text関数も同様です。同様の機能はinsertBefore関数で実現できます。
26
createElement()
指定された種類の要素を作成します。前提：要素はHTMLスクリプトeg：document.creatElment（'OK
NO.
NO.
OK
まずオブジェクト要素を作成してから属性設定を行うことができます。あるいは直接にInnerHTML形式で対応位置に追加します。
27
nodeName
対象を取るノード名eg:name=obj.nodeName;
OK
OK
OK
OK
ある人は違いがあると言っています。具体的な前提条件を知らないで、先に記録して試験に備えます。代替案：もしノードが「tagName」で値を取ることができます。ノードがatributオブジェクトであれば、「name」で値を取ることができます。ノードがtextnodeの要素ならnodeType==3で判断できます。
28
window.イベント
現在のイベントの対象を取得します。eg:window.event;
OK
NO.
NO.
？
イベントの応答関数にアクティブにイベントパラメータを入力することができます。eg:help
29
event.target
イベントのトリガーオブジェクトeg:e.targetを取得します。
NO.
OK
OK
？
srcellementと共同で使用できます。トリガされたオブジェクト要素は、イベントの応答関数に能動的に伝わることができる。eg:help
30
event.srcele ment
イベントのトリガー対象となるeg：e.srcellmentを取得します。
OK
NO.
NO.
？
targetと一緒に使用できます。トリガオブジェクトは、アクティブにイベントの応答関数に着信することができます。eg：var obj=（e.target）？e.target：e.srculemtn；
31
イベントオブジェクトのプロパティ
現在の三つのブラウザの共通の属性：alt Keyboutton cancel Bubleclient XclientYctrlKeyscreenXscreenYshiftKeytype
alt Left behaviorCookabeviorPartbook marks boundElements Overflowctrld LeftlantaTrans ferfrom Element CodenextPageofsetxtPageofsetYpropertyNamequaliferrearedtorectortVtratEptleftEftEftEftlecturce
bubble scancel able current Target detailevent Phasheexplicit Original Target Targettis ChristTrustedlayer Xlayerge TargeXpagent OffsetratentrelatedTargetetetetetetetarettime
bubble scancel able Codecurrent Target detailevent Phashopexplicit Original Targagtis CharkeyCodelayer Xlayer Xlayer TargePagent Xpagent PupyWindowureOffsetrage Partredelated Targinggglegggggggggggleggggggggggggggguretetetable
？
イベント対象の違いが多すぎて、使う時にいちいちチェックしなければなりません。具体的にはページの下のテストエリアでテストできます。
32
イベント登録
atachEvent関数で登録します。
OK
NO.
NO.
を選択します。
メモリ漏れに注意！イベントの処理が終わったら必ずdetachEvent関数を呼び出してイベントを廃棄します。重複登録を避けるように注意してください。
33
イベント登録
addEvent Listener関数登録
NO.
OK
OK
を選択します。
34
イベント登録
obj.onxxx=Function（「応答関数名またはコード」）；方式登録eg：btn.onclick=Function（doclick）；btn.onclick=Function（「return 1＋1」）;
OK
OK
OK
を選択します。
35
イベントの廃棄
detachEvent関数破壊
OK
NO.
NO.
を選択します。
36
イベントの廃棄
removeveEvent Listener関数の破壊
NO.
OK
OK
を選択します。
37
イベントの廃棄
Obj.onxxx=null方式登録eg：btn.onclick=null；
OK
OK
OK
を選択します。
38
トリガーイベント
fireEvent関数eg：btn.fireEvent（「onclick」）；FF:var e=document.creat Event(Events);e.initEvent（「click」、true、false）；element.dispatch Event
OK
NO.
NO.
を選択します。
39
トリガーイベント
dispatch Event関数eg：var evt=document.create Event（「Mouse Events」）；evt.initMouse Event（「click」、true、true）；btn.dispatch Event（evt）；
NO.
OK
OK
を選択します。