HTML サンプルコードにおける ID と名前の違いについての簡単な説明_エクスペリエンス交換

コードの一部を通じて微妙な違いを分析できます。

IE ブラウザでは、このテキスト ボックス オブジェクトのインデックス付けに使用できるメソッドはいくつありますか? ? (区別のため、NAMEとIDを別の値に設定しています)
1.oDemo
2.demoform.oDemo
3.document.all.oDemo
4.document.all.demoform.oDemo 5. document.forms[0].oDemo
6. document.forms['demoform'].oDemo
7. document.forms['demoform'].childNodes[0] 8. document.forms['demoform'].oDemo document.forms['demoform'].elements[0]
9. document.getElementById('oDemo2')

上記の 9 つのインデックス付けメソッドはすべて、IE6 の戻り値テストに合格しました。最後の点に注目してください: IE6 では、インデックス オブジェクトを

document.getElementById('oDemo') として記述しましたが、ブラウザはオブジェクトに正しくインデックスを付けることができます。これは本当にひどいフォールト トレランスです。 ！

その後、問題が発生します。このコードを Mozilla Firefox 1.0 に入れて、再度実行します。7 番目のメソッドのみが「未定義」を返し、他のメソッドはオブジェクトを正しく

インデックスできます。ただし、 3 番目と 4 番目のメソッドは IE 固有のオブジェクト document.all を使用するため、FF1.0 は正しい値を返しましたが、コンソールに警告が表示されました

警告: 承認されていない標準プロパティ document.all。 W3C 標準形式 document.getElementById() を使用してください。

次に、HTML テキスト タイプをより厳密に定義し、ソース コードの先頭に次のコードを追加します。



HTML テキストを HTML4.01 標準に従って解析します。IE6 では、戻り値が渡されます。テストは実行されましたが、IE6 では Mozilla Firefox 1.0 が大きな問題を抱えています。メソッド 3 と 4

には戻り値がありませんが、コンソールにエラー メッセージが表示されます: エラー: document.all にはプロパティがありません。メソッド 7 メソッドは依然として「未定義

」を返します。

概要

名前は元々識別に使用されていましたが、仕様に従って要素を識別するには id を使用することが推奨されています。

以下では名前のみを使用できます。
1. フォームのコントロールの名前と送信されたデータは、ID ではなくコントロールの名前によって制御されます。これは、

チェックボックスやラジオなど、同時に複数のコントロールに対応する名前が多数あり、ID がドキュメント全体で一意である必要があるためです。さらに、ブラウザは名前に基づいてサーバーに送信されるリクエストを設定します。したがって、ID が使用されている場合、サーバーはデータを取得できません。
2. フレームおよびウィンドウの名前は、他のフレームまたはウィンドウ内のターゲットを指定するために使用されます。

次の場合は ID のみを使用できます。
1. ラベルとフォーム コントロールの関連付け、
My Input

for 属性は、ラベルに関連付けられた要素の ID を指定します。これを名前で置き換えることはできません。
2. CSS の要素選択メカニズムでは、#MyId を使用してスタイルを適用する要素を指定します。名前で置き換えることはできません。
3. スクリプトでのオブジェクトの取得:
IE は、スクリプト内で (名前ではなく) ID で識別されるオブジェクトの直接参照をサポートしています。たとえば、上記の入力の場合、スクリプト内の入力内容を取得したい場合は、

MyInput.value を使用して直接取得できます。
DOM を使用する場合は、 document.getElementById("MyInput").value を使用します。名前を使用する場合は、通常、最初にコントロールを含むフォームを取得します (

document.forms[0) ]を入力し、フォームから名前を参照します。このようにして得られた値は、計算後にサーバーに送信される値であることに注意してください。

名前と ID のその他の違いは次のとおりです。
ID は大文字と小文字の区別などの識別要件を満たしている必要があり、アンダースコアは含めないことをお勧めします (CSS と互換性がないため)。基本的に名前の要件はなく、数字を使用することもできます。



CSS を使用して、このリンクの滞在スタイルを制御します。
#m_blog div.opt a:hover{color:#D57813} または #myLink:hover{color:#D57813} と書くことができます。
>NAME は主にインタラクティブな Web ページで使用され、フォームはサーバーサイド スクリプトに送信され、処理量は変動します。ソース コードの標準化と互換性の観点から、クライアント

スクリプトでオブジェクトのインデックスを作成する場合は、 document.getElementById() メソッドを使用することをお勧めします。NAME 値を直接使用しないようにしてください。もちろん、互換性を考慮しなければ、上記 9 つの方法は IE でも実行できます (IE5.0 はテストされていません)。

附：测试源代码