HTML要素のID属性とName属性の違い

今日、私は <a href="#13"></a> について少し混乱しています。# を追加するとアンカーが示され、13 を追加するとこのページの 13 番目の位置にジャンプしますが、この 13 は Name 属性値です。なぜID値ではないのですか? ? ?そこでIDと名前の違いを確認し記録しました

最も典型的な答えは、ID は人の ID 番号のようなもので、Name は名前のようなものです。ID は明らかに一意ですが、Name は繰り返すことができます。
明らかに、ID と Name に対する答えは一般的すぎます。もちろん、クライアント側の HTML 要素の ID である ID については、その説明は完全に正しいです。名前は実際にははるかに複雑です。名前には多くの用途があるため、ID で完全に置き換えてキャンセルすることはできません。具体的な用途は次のとおりです。
目的 1: input、select、textarea、button など、サーバーとデータを交換できる HTML 要素のサーバー側マーカーとして。サーバー側では、要素の名前に基づいて、Request.Params を通じて要素によって送信された値を取得できます。
使用法 2: HTML 要素 Input type='radio' のグループ化。ラジオボタンコントロールは同じグループクラスにあり、チェック操作は mutex であることがわかっています。一度に選択できるラジオボタンは 1 つだけです。このグループ化は、同じ Name 属性に基づいて実現されます。
使用方法 3: ページにアンカーを作成します。<a href="URL">link</a> はページハイパーリンクを取得するために使用します。href 属性を使用せず、代わりに Name (例: <a name="PageBottom"></a>) を使用すると、ページアンカーが取得されます。
アプリケーション 4: アプレット、オブジェクト、埋め込み、その他の要素などのオブジェクトの ID として。たとえば、Applet オブジェクトのインスタンスでは、その名前を使用してオブジェクトを参照します。
使用方法5：IMG要素をMAP要素に関連付ける際に、IMGのホットスポット領域を定義する場合は、その属性usemapを使用する必要があります。つまり、usemap="#name"（関連付けられたMAP
要素の名前)。
使用法 6: attribute、meta、param などの特定の要素の属性。たとえば、オブジェクトのパラメータ <PARAM NAME = "appletParameter" VALUE = "value"> を定義したり、Meta でパラメータ <META NAME = "Author" CONTENT = "Dave Raggett"> を定義したりします。
当然ながら、これらの用途は単純に ID に置き換えることはできません。そのため、HTML 要素の ID と名前の違いは、ID 番号と名前の違いとは異なり、基本的には機能が異なるものとなります。
次のようなコードで微妙な違いを分析できます。

コードをコピー

コードは次のとおりです。

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

上記の 9 つのインデックス作成方法はすべて IE6 の戻り値テストに合格しましたが、最後の 1 つは注目に値します。IE6 では、インデックスオブジェクトを document.getElementById('oDemo') として記述しましたが、ブラウザーはオブジェクトを正しくインデックスできました。なんともひどいフォールトトレランスです。！
ここで問題が発生します。このコードを Mozilla Firefox 1.0 に挿入して再度実行します。7 番目のメソッドのみが「undefined」を返し、他のメソッドはオブジェクトを正しくインデックスできます。ただし、3 番目と 4 番目のメソッドは IE 固有のオブジェクト document.all を使用するため、FF1.0 は正しい値を返しますが、コンソールに警告が表示されます: 警告: 非標準プロパティ document.all。 W3C標準フォームdocument.getElementById()を使用してください。
。
次に、HTML テキストタイプをより厳密に定義し、ソースコードの先頭に次のコードを追加します: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML テキストを HTML4.01 標準に従って解析します。IE6 では、すべての戻り値テストは引き続き合格しますが、Mozilla Firefox 1.0 では多くの問題が発生します。3 番目と 4 番目のメソッドには戻り値がなく、コンソールにエラーメッセージが表示されます: エラー: document.all にプロパティがありません。7 番目のメソッドは引き続き「undefined」を返します。
まとめ
NAME は主に、フォームがサーバー側スクリプトに送信され、その後変数処理を受け取るインタラクティブな Web ページで使用されます。ソースコードの標準化と互換性の観点から、クライアントスクリプト内のオブジェクトをインデックスする場合は、
ドキュメント.getElementById()
もう一つの簡単な例を次に示します。
<フォーム名="form1">
ユーザー名: <input type=text name="username" id="username">
パスワード: <input type=password name="password" id="pwd">
</フォーム>
ユーザー名とパスワードを取得したい場合、JS が name を使用して取得する場合は、document.form1.username.value と記述する必要があります。
document.form1.パスワード値;
IDで取得:
document.getElementById("ユーザー名");
ドキュメントの要素IDを取得します。
name に同じ名前が出現する場合があり、name を使用して値を取得すると、どの値が取得されるかわかりません。
document.getElemntsByName("ユーザー名");
ここで得られるのは配列です

<<: フローティングをクリアするいくつかの方法（推奨）

>>: CSS3 で六角形の境界線を実装するサンプルコード