入力の id 属性と name 属性の違いの例の紹介と分析

入力時の名前とIDの違いがまだわかりません。勉強中にこの問題に遭遇したので、今後の使用のために収集した情報を整理しました。 長い間Webサイトを構築していますが、入力のnameとidの違いがまだわかりません。最近jqueryを勉強したところ、再びこの問題に遭遇したため、ネットで情報を収集しました。この記事を見て、後で使えるように整理しました。

Web 開発を行ったことのあるほぼすべての人が、要素の ID と名前の違いは何なのかを尋ねたことがあると言えます。 ID があるのに、なぜ名前が必要なのでしょうか?! また、最も古典的な答えも得られます。ID は人の ID 番号のようなもので、名前は ID が明らかに一意であり、名前は反復可能です。

私も先週、ID と Name の問題に遭遇しました。ページに input type="hidden" を入力し、値を割り当てた後、送信して Request.Params[" を使用するだけでした。 SliceInfo" がバックグラウンドで表示されます。"] しかし、それだけの価値はありません。その後、Name でマークする必要があることに突然気づき、入力に Name='SliceInfo' を追加しました。すべて問題ありませんでした。

最初の段落の ID と名前に対する答えは一般的すぎます。もちろん、その説明は、クライアント側の HTML 要素の ID である ID については完全に正しいです。 Name は実際にはもっと複雑です。Name には多くの用途があるため、完全に ID に置き換えることはできず、ID をキャンセルします。具体的な用途は次のとおりです:

用途 1: 入力、選択、テキストエリア、ボタンなど、サーバーと対話できる HTML 要素のサーバー側インジケーターとして。サーバー側の名前に基づいて、Request.Params を通じて要素によって送信された値を取得できます。
使用 2: HTML 要素の入力 type='radio' グループ化、ラジオ ボタン コントロールが同じグループ化クラス内にあることがわかり、チェック操作はミューテックスであり、同時に選択できるラジオは 1 つだけです。このグループ化は以下に基づいて実装されます。同じ Name 属性に対して。
目的 3: ページ内にアンカー ポイントを確立します。a8b07b62657618ffc8b891847b9bc08b は、href 属性を使用しない場合、代わりに Name を使用します。例: 0540000f1e2e8c1414f3fa2eece38c9e5db79b134e9f6b82c0b36e0489ee08ed の場合、ページ アンカーを取得します。
使用 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 を追加することはできません。要素を作成すると、'65ff708cb6191b3f5a743bae5d811b9fa24c0203f0ae689239f065103120aae7') 要素に Name 属性が追加されます。これはどういう意味ですか？以下の例を見て理解してください。

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

<script language="JavaScript"> 
var input = document.createElement(&#39;INPUT&#39;); 
input.id = &#39;myId&#39;; 
input.name = &#39;myName&#39;; 
alert(input.outerHTML); 
< /script>

メッセージ ボックスに表示される結果は次のとおりです: 7c4910ae3e1ff2731c00ced15cbfeb3c。

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

< script language="JavaScript"> 
var input = document.createElement(&#39;<INPUT name="myName">&#39;); 
input.id = &#39;myId&#39;; 
alert(input.outerHTML); 
< /script>

消息框里显示的结果是：fcd57d8d6086a1073f231e2d47bdc82a。
初始化Name属性的这个设计不是IE的缺陷，因为MSDN里说了要这么做的，可是这样设计的原理什么呢？我暂时没有想太明白。

这里再顺便说一下，要是页面中有n(n>1)个HTML元素的ID都相同了怎么办？在DHTML对象中怎么引用他们呢？如果我们使用ASPX页面，这样的情况是不容易发生的，因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一，这是页面会被抛出异常而不能被正常的render。要是不是动态页面，我们硬要让ID重复那IE怎么搞呢？这个时候我们还是可以继续使用document.getElementById获取对象，只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组，ID重复的元素按Render的顺序依次存在于数组中。

表单元素(form input textarea select)与框架元素(iframe frame)用 name
这些元素都与表单(框架元素作用于form的target)提交有关, 在表单的接收页面只
接收有name的元素, 赋ID的元素通过表单是接收不到值的, 你自己可以验证一下.
有一个例外: A 可以赋 name 作为锚点, 也可以赋ID

当然上述元素也可以赋ID值, 赋ID值的时候引用这些元素的方法就要变一下了.
赋 name: document.formName.inputName document.frames("frameName")
赋 ID : document.getElementById("inputID") document.all.frameID

只能赋ID不能赋name的元素:(除去与表单相关的元素都只能赋ID)
body li table tr td th p p span pre dl dt dd font b 等等

更多input中id和name属性的区别示例介绍分析相关文章请关注PHP中文网！