HTML要素のID属性とName属性の違いについて
2022-01-30 01:08:45
今日は、<a href="#13"></a> に疑問があり、さらに#はアンカーを示し、13が続くと、このページでは13の位置にジャンプしますが、この13はName属性値です。どう違うのでしょうか？
IDの値なのか？と思い、ID と Name の違いを調べてみると、これは特殊な記録です。
最もCLASSICALな答えです。IDはその人のID番号のようなもので、Nameはその人の名前のようなものです。IDは明らかに一意であり、Nameは繰り返し使用可能です。
このIDとNameの答えは明らかに一般的すぎますが、もちろんこの説明は、クライアント側でHTML要素のIdentityであるIDについては全く正しいです。そしてNameは実際にはもっと複雑で、Nameには多くの種類の使い方があるので、IDに完全に置き換えることはできず、排除されます。具体的な使い方は
用途1：input、select、textarea、buttonなど、サーバー上のデータと対話できるHTML要素のサーバーサイドマークアップとして。要素から送信された値を、その名前に基づいてRequest.Paramsを介してサーバーサイドで取得することができます。
使用法2：HTML要素 Input type='radio' グループ化、ラジオボタンコントロールが同じグループ化クラスであること、チェック操作がmutexで一度に1つのラジオしか選択できないこと、このグループ化は同じName属性に基づくことが分かっています。
使用法3：ページ内にアンカーポイントを作成する、我々は、<a href="URL">link</a> がページのハイパーリンクを取得することを知っている、href属性を使用する代わりに、我々は次のように名前を使用する場合： <a name="PageBottom">& lt;/a> 、我々はページアンカーゲットとします。
使用法4：Applet、Object、EmbedなどのオブジェクトのIdentityとして。例えば、Appletオブジェクトのインスタンスでは、そのNameを使用してオブジェクトを参照することになります。
使い方5：IMG要素とMAP要素を関連付ける場合、IMGのホットスポット領域を定義したい場合は、その属性usemapを使用して、usemap="#name"（関連付けるMAPの
要素の名前)。
使用法6．例えば、オブジェクトのパラメータを定義する <PARAM NAME = "appletParameter" VALUE = "value"> またはメタの <META NAME = "Author" CONTENT = "Dave Raggett"> などの特定の要素に対する属性があります。
明らかにこれらの用途は単純にIDに置き換えられるものではないので、HTML要素のIDとNameの違いは、ID番号と名前の違いではなく、本質的に異なるものなのです。
微妙な違いをコードの断片で分析することができます。
<form method="post" action="" name="demoform">
<input type="text" name="oDemo" id="oDemo2" value="DEMO" />
</form>
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'].elements[0].
9. document.getElementById('oDemo2')
上記の9つのインデックス作成メソッドはすべてIE6で戻り値のテストをパスしますが、最後の1つは注目に値します。IE6では、インデックスされたオブジェクトをdocument.getElementById('oDemo')として書くと、ブラウザはそのオブジェクトを正しくインデックスできるのです、なんと恐ろしいフォールトトレランスでしょう!
しかし、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 4.01規格に従ってパースされたHTMLテキストを作ります。IE6では通常通りすべての戻り値のテストをパスしますが、Mozilla Firefox 1.0ではトラブルが大きく、3番目と4番目のメソッドは戻り値を持っておらず、コンソールではエラーメッセージが発行されます。Error: document.all has no properties, and the error message: document.all has no properties. document.all has no properties, and the 7th method still returns "undefined" といったエラーメッセージが表示されます。
まとめ
NAMEは主にインタラクティブなWebページで使用され、フォームが何らかのサーバー側スクリプトに送信され、可変処理量を受け取ります。ソースコードの仕様と互換性の観点から、クライアント側スクリプトでオブジェクトのインデックスを作成する場合、NAMEを使用することが推奨されます。
document.getElementById()
もう一つの簡単な例です。
<form name="form1">
ユーザー名： <input type=text name="username" id="username">
パスワード： <input type=password name="password" id="pwd">
</form>
ユーザー名とパスワードを取得したい場合、JSはnameで取得するので、document.form1.username.valueと記述しなければならない。
document.form1.password.value。
idで取得します。
docuement.getElementById("username") を使用します。
docuement.getElementById("pwd") を使用します。
nameは同じ名前に見えることもあり、その場合、nameで取得する値がどちらなのか確認できません。
document.getElemntsByName("username") を使用します。
ここで得られるのは、配列
IDの値なのか？と思い、ID と Name の違いを調べてみると、これは特殊な記録です。
最もCLASSICALな答えです。IDはその人のID番号のようなもので、Nameはその人の名前のようなものです。IDは明らかに一意であり、Nameは繰り返し使用可能です。
このIDとNameの答えは明らかに一般的すぎますが、もちろんこの説明は、クライアント側でHTML要素のIdentityであるIDについては全く正しいです。そしてNameは実際にはもっと複雑で、Nameには多くの種類の使い方があるので、IDに完全に置き換えることはできず、排除されます。具体的な使い方は
用途1：input、select、textarea、buttonなど、サーバー上のデータと対話できるHTML要素のサーバーサイドマークアップとして。要素から送信された値を、その名前に基づいてRequest.Paramsを介してサーバーサイドで取得することができます。
使用法2：HTML要素 Input type='radio' グループ化、ラジオボタンコントロールが同じグループ化クラスであること、チェック操作がmutexで一度に1つのラジオしか選択できないこと、このグループ化は同じName属性に基づくことが分かっています。
使用法3：ページ内にアンカーポイントを作成する、我々は、<a href="URL">link</a> がページのハイパーリンクを取得することを知っている、href属性を使用する代わりに、我々は次のように名前を使用する場合： <a name="PageBottom">& lt;/a> 、我々はページアンカーゲットとします。
使用法4：Applet、Object、EmbedなどのオブジェクトのIdentityとして。例えば、Appletオブジェクトのインスタンスでは、そのNameを使用してオブジェクトを参照することになります。
使い方5：IMG要素とMAP要素を関連付ける場合、IMGのホットスポット領域を定義したい場合は、その属性usemapを使用して、usemap="#name"（関連付けるMAPの
要素の名前)。
使用法6．例えば、オブジェクトのパラメータを定義する <PARAM NAME = "appletParameter" VALUE = "value"> またはメタの <META NAME = "Author" CONTENT = "Dave Raggett"> などの特定の要素に対する属性があります。
明らかにこれらの用途は単純にIDに置き換えられるものではないので、HTML要素のIDとNameの違いは、ID番号と名前の違いではなく、本質的に異なるものなのです。
微妙な違いをコードの断片で分析することができます。
コピーコード
コードは以下の通りです。
<form method="post" action="" name="demoform">
<input type="text" name="oDemo" id="oDemo2" value="DEMO" />
</form>
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'].elements[0].
9. document.getElementById('oDemo2')
上記の9つのインデックス作成メソッドはすべてIE6で戻り値のテストをパスしますが、最後の1つは注目に値します。IE6では、インデックスされたオブジェクトをdocument.getElementById('oDemo')として書くと、ブラウザはそのオブジェクトを正しくインデックスできるのです、なんと恐ろしいフォールトトレランスでしょう!
しかし、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 4.01規格に従ってパースされたHTMLテキストを作ります。IE6では通常通りすべての戻り値のテストをパスしますが、Mozilla Firefox 1.0ではトラブルが大きく、3番目と4番目のメソッドは戻り値を持っておらず、コンソールではエラーメッセージが発行されます。Error: document.all has no properties, and the error message: document.all has no properties. document.all has no properties, and the 7th method still returns "undefined" といったエラーメッセージが表示されます。
まとめ
NAMEは主にインタラクティブなWebページで使用され、フォームが何らかのサーバー側スクリプトに送信され、可変処理量を受け取ります。ソースコードの仕様と互換性の観点から、クライアント側スクリプトでオブジェクトのインデックスを作成する場合、NAMEを使用することが推奨されます。
document.getElementById()
もう一つの簡単な例です。
<form name="form1">
ユーザー名： <input type=text name="username" id="username">
パスワード： <input type=password name="password" id="pwd">
</form>
ユーザー名とパスワードを取得したい場合、JSはnameで取得するので、document.form1.username.valueと記述しなければならない。
document.form1.password.value。
idで取得します。
docuement.getElementById("username") を使用します。
docuement.getElementById("pwd") を使用します。
nameは同じ名前に見えることもあり、その場合、nameで取得する値がどちらなのか確認できません。
document.getElemntsByName("username") を使用します。
ここで得られるのは、配列
関連
-
HTML+cssのボックスモデル例（円、半円など）「border-radius」使いやすい
-
html+css+js ナビゲーションバー用スクロールグラデーション効果
-
1分で実感！html+vue+element-uiのサラサラ感
-
htmlの親子iframeで双方向にメッセージを送信する例
-
HTML要素] 画像を埋め込む方法
-
スクロールバーを非表示にするhtmlの簡易実装
-
htmlにおけるtextareaの利用方法とよくある問題点・ケーススタディ
-
htmlのテーブルの行と列を結合する問題を解決する。
-
複数のフォームのテキストボックスの位置を揃える方法のHTML実装
-
HTMLにおけるタグと要素の違いについて解説しています
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン