ホームページ >ウェブフロントエンド >htmlチュートリアル >input_HTML/Xhtml_Web ページ制作における id 属性と name 属性の違いの紹介例
input_HTML/Xhtml_Web ページ制作における id 属性と name 属性の違いの紹介例
- WBOYオリジナル
- 2016-05-16 16:38:401243ブラウズ
長い間Webサイトを構築していますが、入力のnameとidの違いがまだわかりません。最近jqueryを勉強したところ、再びこの問題に遭遇したため、ネットで情報を収集しました。この記事を見て、後で使えるように整理しました。
Web 開発を行ったことのあるほぼすべての人が、要素の ID と名前の違いは何なのかを尋ねたことがあると言えます。 ID があるのに、なぜ名前が必要なのでしょうか?! また、最も古典的な答えも得られます。ID は人の ID 番号のようなもので、名前は ID が明らかに一意であり、名前は反復可能です。
先週も、ページに入力 type="hidden" を入力し、値を割り当てた後、リクエストを送信して使用しました。 Params["SliceInfo"] の値を取得できません。その後、Name でマークする必要があることに突然気づき、入力に Name='SliceInfo' を追加しました。すべて問題ありませんでした。
最初の段落の ID と名前に対する答えは一般的すぎます。もちろん、クライアント側の HTML 要素の ID である ID については、その説明は完全に正しいです。 Name は実際にはさらに複雑です。Name には多くの用途があるため、完全に ID に置き換えることはできず、ID がキャンセルされます。具体的な用途は次のとおりです:
用途 1: input、select、textarea、button など、サーバーと対話できる HTML 要素のサーバー側インジケーターとして。サーバー側の名前に基づいて、Request.Params を通じて要素によって送信された値を取得できます。
使用 2: HTML 要素の入力 type='radio' グループ化。ラジオ ボタン コントロールが同じグループ化クラスにあり、チェック操作がミューテックスであることがわかります。同時に選択できるラジオは 1 つだけです。このグループ化は同じ Name 属性に基づいて実現されます。
使用 3: ページ内にアンカー ポイントを確立します。link は、href 属性を使用しない場合に使用します。代わりに、< ;a name="PageBottom"> のように、ページ アンカーを取得します。
使用 4: アプレット、オブジェクト、埋め込み、その他の要素などのオブジェクトとしてのアイデンティティ。たとえば、アプレット オブジェクト インスタンスでは、その名前を使用してオブジェクトを参照します。
目的 5: IMG 要素と MAP 要素を関連付ける場合、IMG のホットスポット領域を定義する場合は、その属性 usemap を使用する必要があるため、usemap="#name" (関連する MAP 要素の名前) ）。
使用 6: 特定の要素の属性 (attribute、meta、param など)。たとえば、オブジェクトのパラメータ またはメタの を定義します。
明らかに、これらの用途は単純に ID に置き換えることはできません。そのため、HTML 要素の ID と名前の違いは、ID 番号と名前の違いではありません。
もちろん、HTML 要素の Name 属性もページ内で ID としての役割を果たすことができます。これは、DHTML オブジェクト ツリーで document.getElementsByName を使用して、指定されたすべての Name を含むオブジェクト配列を取得できるためです。ページ内の要素。 Name 属性には別の問題があります。Name 属性を含むことができる要素を動的に作成する場合、単純に assign element.name = "..." を使用してその Name を追加することはできません。要素を作成すると、'<要素名 = "myName">') 要素に Name 属性が追加されます。これはどういう意味ですか？以下の例を見て理解してください。
var input = document.createElement('INPUT');
input.id = 'myId';
input.name = 'myName';
alert(input.outerHTML) ;
< /script>
メッセージ ボックスに表示される結果は次のとおりです:
< JavaScript"> ;
var input = document.createElement('');
input.id = 'myId';
alert(input.outerHTML);
メッセージ ボックスに表示される結果は次のとおりです: 。
Name 属性を初期化する設計は IE の欠陥ではありません。MSDN ではこのように行うべきだと述べていますが、この設計の原理は何ですか?まだあまり明確には考えていません。
ところで、ページ内に同じ ID を持つ HTML 要素が n (n>1) 個ある場合はどうなるでしょうか? DHTML オブジェクトでそれらを参照するにはどうすればよいですか? ASPX ページを使用する場合、aspnet プロセスでは aspx ページの処理時に一意でない ID が許可されないため、このような状況は起こりにくくなります。これは、ページが例外をスローし、正常にレンダリングできないことを意味します。動的ページではなく、ID を繰り返す必要がある場合、IE ではどうすればよいでしょうか?現時点では、引き続き document.getElementById を使用してオブジェクトを取得できますが、重複した ID を持つオブジェクトのうち、HTML レンダリング中に表示される最初のオブジェクトのみを取得できます。このとき、繰り返しIDは参照されると自動的に配列となり、Render順に繰り返しIDを持つ要素が配列内に存在することになります。
フォーム要素 (フォーム入力テキストエリア選択) とフレーム要素 (iframe フレーム) は、
これらの要素はフォームの送信に関連しています (フレーム要素はフォームの受信ページで動作します)。フォームでは、
名前付きの要素のみを受け取ります。ID が割り当てられた要素は、フォームを通じて値を受け取ることはできません。
例外があります。A はアンカーまたは ID として割り当てることができます。 >
もちろん、上記の要素に ID 値を割り当てることもできます。ID 値を割り当てる場合、これらの要素の参照方法が変更されます。
名前の割り当て: document.formName.inputName document.frames("frameName")
ID の割り当て: document.getElementById("inputID") document.all.frameID
ID のみを割り当てることができますが、名前は割り当てることができません: (フォームに関連する要素を除き、ID のみを割り当てることができます)
body li table tr td th p div span pre dl dt dd font b など。