ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML要素のID属性とName属性の違い_HTML/Xhtml_Webページ制作

HTML要素のID属性とName属性の違い_HTML/Xhtml_Webページ制作

WBOY
リリース: 2016-05-16 16:42:25
オリジナル
1437 人が閲覧しました

今日は について少し混乱しています。# を追加するとアンカーを意味し、その後に 13 を追加すると、このページの 13 の位置にジャンプします。この 13 が名前属性の値。
が ID 値ではないのはなぜですか? ? ?そこで、ID と名前の違いを確認し、最も古典的な答えを

として記録しました。ID は人の ID 番号のようなもので、Name はその人の名前のようなもので、ID は明らかに一意であり、Name は繰り返し可能です。
明らかに、ID と名前に対する答えは一般的すぎます。もちろん、クライアント側の HTML 要素の ID である ID については、その説明は完全に正しいです。 Name は実際にはさらに複雑です。Name には多くの用途があるため、完全に ID に置き換えることはできず、ID がキャンセルされます。具体的な用途は次のとおりです:
用途 1: 入力、選択、テキストエリア、ボタンなど、サーバーと対話できる 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 番号と名前の違いではなく、異なる機能を持っています。
ということです。
コードの一部を通じて微妙な違いを分析できます:

コードをコピーします
コードは次のとおりです:





IE ブラウザでは、このテキスト ボックス オブジェクトのインデックス付けに使用できるメソッドはいくつありますか? (区別のため、NAME と ID を別の値に設定します)
1. demoform.oDemo
3. document.all.oDemo
4. .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 の戻り値テストに合格しました。最後の点に注目してください。IE6 では、インデックス オブジェクトを document.getElementById('oDemo') として記述しました。ブラウザはオブジェクトに正しくインデックスを付けることができます。これは本当にひどいフォールト トレランスです。 !
次に問題が発生します。このコードを Mozilla Firefox 1.0 に入れて再度実行すると、7 番目のメソッドだけが「未定義」を返します。ただし、3 番目と 4 番目のメソッドが原因です。 -固有のオブジェクト document.all が使用されています。FF1.0 は正しい値を返しますが、コンソールに次の警告が表示されます。 警告: 非標準属性 document.all。 W3C 標準形式 document.getElementById()
を使用してください。
次に、HTML テキスト タイプをより厳密に定義し、ソース コードの先頭に次のコードを追加します。 により、HTML テキストは HTML4.01 標準に従って解析されます。IE6 では、戻り値のテストに合格します。ただし、Mozilla Firefox 1.0 では、問題が発生します。 big. 3 および 4 最初のメソッドには戻り値がありませんが、次のエラー メッセージがコンソールに表示されます。エラー: document.all にはプロパティがありません。7 番目のメソッドは依然として「未定義」を返します。
概要
NAME は主にインタラクティブな Web ページで使用され、フォームがサーバー側スクリプトに送信された後、可変の処理量を受け取ります。ソース コードの標準化と互換性の観点から、クライアント スクリプト内のオブジェクトにインデックスを付けたい場合は、
document.getElementById()
別の簡単な例:

ユーザー名:
パスワード: ;

JS が名前を使用して取得する場合は、
document.form1 と記述する必要があります。 .password.value ;
id を使用して取得します:
docuement.getElementById("username");
docuement.getElementById("pwd");今回は名前を取得すると、どの値が取得されるかを判断することはできません。
document.getElemntsByName("username");
ここで得られるのは配列です
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート