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

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 番号と名前の違いとは異なり、基本的には機能が異なるものとなります。
次のようなコードで微妙な違いを分析できます。

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

<form メソッド="post" アクション="" 名前="デモフォーム">
<input type="text" name="oDemo" id="oDemo2" value="デモ" />
</フォーム>

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 で六角形の境界線を実装するサンプルコード

推薦する

Linux で NFS ファイル共有サーバーを構築するための詳細な手順

Linux が NFS サーバーを構築異なるオペレーティング システム間でデータを共有するために、通...

トリガーメソッドを使用して、ファイルタイプの入力をクリックせずにポップアップファイル選択ダイアログボックスを実現します。

トリガー メソッドを使用できます。JavaScript にはネイティブのトリガー関数はありません。自...

DockerコンテナのライフサイクルアーキテクチャとVMとの違いについて詳しく説明します。

コンテナのライフサイクルコンテナランタイムのライフサイクルコンテナは、分離特性を持つプロセスのセット...

CSS3で実装されたグラデーションスライド効果

成果を達成する コードhtml <div class="css-slideshow&...

HTML テーブルタグチュートリアル (11): 水平方向の配置属性 ALIGN

水平方向では、テーブルの配置を左、中央、右に設定できます。基本的な構文<テーブル配置=&quo...

Linuxシステムにおける仮想デバイスファイルのさまざまな実用的な使用法の詳細な説明

みなさんこんにちは。私は梁旭です。ご存知のとおり、Linux ではデバイス ファイルも含めすべてがフ...

MySQL バッチ挿入とユニークインデックスの問題に対する解決策

MySQL バッチ挿入の問題プロジェクトを開発しているときに、古いシステムの基本データを事前にインポ...

ul リスト タグ デザイン ウェブ ページ 複数列レイアウト

数日前、CSS で 3 列レイアウトを書いていたときに、突然この方法を思いつきました。このアイデアは...

仮想マシンクローン Linux centos6.5 システム ネットワーク カード構成グラフィック チュートリアル

Linux システムに触れたばかりの初心者として、VMware 仮想マシンに CentOS6.5 シ...

Nodejs でモジュール fs ファイルシステムを使用する方法

目次概要ファイル記述子同期、非同期、Promise同期書き込み非同期書き込み(推奨)約束​​の書き方...

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...

js での typeof の使い方を理解するための記事

目次ベース戻り値の型文字列とブール値数値とbigintシンボル未定義関数物体他のよくある質問参照エラ...

mysqlは指定された期間内の統計データを取得します

mysqlは指定された期間内の統計データを取得します年別統計 選択 カウント(*)、 DATE_FO...

ビジネス HTML メール作成に関する提案

許可ベースの電子メール マーケティングにより、マーケティングとプロモーションのコストを大幅に削減でき...