HTMLのID、名前、クラスの違い



Difference Between Id



HTMLのIDと名前の違い

名前は、チェックボックスやラジオなど、同時に複数のコントロールに対応できます。
およびidは、ドキュメント全体で一意である必要があります



IDの使用
1)idは、主にクライアント側のスクリプトで使用されるHTML要素のIDです。
2)ラベルとフォームコントロール間の関連付け(次のような)

My Input

for属性は、ラベルに関連付けられている要素のIDを指定しますが、名前には使用できません。
3)スクリプト内のオブジェクトを取得します。IEは、スクリプト内でIDで識別されるオブジェクトを(名前ではなく)IDで直接参照することをサポートしています。
たとえば、スクリプトの入力コンテンツを取得するための上記の入力は、MyInput.valueによって直接取得できます。 DOMを使用する場合は、document.getElementById( 'MyInput')。valueを使用します
名前を使用する場合は、通常、document.forms [0]などのコントロールを含むフォームを取得し、フォームから名前を参照します。これは、計算されたサーバー値に送信されることに注意してください。



名前の使用
1)入力、選択、テキストエリア、フレーム要素(iframe)、フレーム、ウィンドウ名など、サーバーと対話できるHTML要素のサーバー側マークとして、送信されたフォームのフォームフィールド情報を取得するために主に使用されます、他のフレームまたはウィンドウでターゲットを指定するために使用されます)およびボタンなど。これらの要素はフォームに関連しています(フレーム要素はフォームのターゲットに作用します)。ブラウザは名前に従ってサーバーに送信するように設定されます。 。リクエストすると、フォームの受信ページで名前の付いた要素のみが受信されるため、IDの要素はフォームで受信されません。その名前に従って、サーバー側のRequest.Paramsを介して要素によって送信された値を取得できます。フォームで名前を指定しないと、サーバーに送信されません。

2)HTML要素入力タイプ= 'radio'グループ、ラジオボタンコントロールが同じグループ化クラスにあり、チェック操作がミューテックスであり、一度に1つのラジオしか選択できないことがわかっています。このグループは、同じように実装されます。名前属性。

3)ページにアンカーポイントを作成します。 link href属性を使用せずに、次のような名前を使用すると、ページのハイパーリンクを取得します。 Experience (XP) のようなページアンカー、例を参照



4)アプレット、オブジェクト、埋め込み、その他の要素などのオブジェクトとしてのアイデンティティ。たとえば、アプレットオブジェクトインスタンスでは、その名前を使用してオブジェクトを参照します。

5)IMG要素がMAP要素に関連付けられている場合、IMGのホットスポットを定義する場合は、その属性usemapを使用してusemap = '#name'(関連付けられたMAP要素の名前)を作成する必要があります。

6)attribute、meta、paramなどの特定の要素の属性。たとえば、Meta でObjectOrのパラメータを定義します。

もちろん、HTML要素のname属性は、ページ内で少しIDを再生することもできます。これは、DHTMLオブジェクトツリーで、document.getElementsByNameを使用して、ページ内の指定されたすべてのName要素を含むオブジェクトの配列を取得できるためです。 。 Nameプロパティには別の問題があります。 Nameプロパティを含むことができる要素を動的に作成する場合、 割り当てelement.nameを単純に使用することはできません = '...'はその名前を追加しますが、要素を作成するときに使用する必要がありますdocument.createElement('')要素に名前プロパティを追加します。これは何を意味するのでしょうか?理解するには、以下の例を参照してください。

var input = document.createElement('INPUT') input.id = 'myId' input.name = 'myName' alert(input.outerHTML)

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

var input = document.createElement(' ') input.id = 'myId' alert(input.outerHTML)

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

名前とIDの違い
idは、大文字と小文字の区別など、ロゴの要件を満たす必要があります。アンダースコアを含めないことをお勧めします(CSSと互換性がないため)。基本的に名前は不要で、偶数でも使用できます。 Table、tr、td、div、p、span、h1、li、およびその他の要素は通常、idを使用します。フォームに関連付けられている要素にもID値を割り当てることができますが、これらの要素にID値を割り当てるときにこれらの要素を参照する方法は、次のように変更されます:
名前を割り当てるとき、要素が参照される方法:document.formName.inputNameまたはdocument.frames( 'frameName')
idが割り当てられると、要素が参照される方法:document.all.inputIDまたはdocument.all.frameID
フォームに関連付けられている要素を削除します。IDのみを割り当てることができます。名前を割り当てることはできません。これらの要素には、body、li、a、table、tr、td、th、p、div、span、pre、Dl、dt、dd、font、 bなど

CSSのid属性とclass属性の違い
1)クラスは、要素が属するスタイルを指定するために使用されるラベルを設定するクラスです。 CSSスタイルでは、小文字の「ポイント」と「。」。名前が付けられています。 HTMLページでは、class = 'css5'を使用して呼び出しを選択します。名前付きCSSは、cssセレクターとも呼ばれます。
例:.css5 {属性:属性値}セレクターはhtmlで呼び出されます
' I am a class example
.baobao {色:ライムの背景:#ff80c0}
使用方法:class =“ baobao”

2)idは設定ラベルの識別子です。要素を定義するために使用される一意のスタイル。 CSSスタイルを定義したら、「#」で始めてID名を付けます。
CSSルールとして:
#binbin {font-size:larger}
使用方法:id =“ binbin”
idは、名前と同じように、さまざまな構造やコンテンツを区別するタグです。部屋に同じ名前の人が2人いると、混乱します

3)cssでのIDの使用法は、クラスがIDに置き換えられることを除いて、クラスの使用法と同じです。例として:
CSSスタイルでIDを定義します
#css5 {高さ:25px幅:200px}
発信者番号:

I am an ID example

クラスは、衣服のように、あらゆる構造やコンテンツに配置できるスタイルです。

4)概念的に異なる
idは、最初に構造/コンテンツを検索し、次にスタイルクラスを定義することで、最初にスタイルを定義し、次に複数の構造/コンテンツを定義します。
(1)クラスは、ユーザー定義の基準に基づいて1つ以上の要素を定義するために使用されます。より適切な例えはスクリプトです。クラスはスクリプト内の各キャラクターのストーリーラインを定義できます。このクラスはcSS、javascriptなどを介して使用できます。したがって、class =“ Frodo”、class =“ Gandalf”、異なるストーリーラインを区別するためのページ上のclass = 'Aragorn'。また、ドキュメント内で任意の数のクラスを使用できることも非常に重要です。
(2)idは通常、ページに1回だけ表示されるマークを定義するために使用されます。ページレイアウトの構造化レイアウト(たとえば、通常、ページはヘッダー、ヘッダー、コンテンツ領域、およびフッターで構成されます)では、IDが1つに含まれているため、一般にIDが理想的です。資料。これらの要素が同じページに複数回表示されることはめったにありません。
は1つの文に要約されています。クラスは繰り返し使用でき、idは1ページで1回しか使用できません。

ブラウザの大部分で同じIDを繰り返し使用しても問題が発生しない可能性がありますが、これは間違いなく標準での誤用であり、一部のブラウザでは実際の問題が発生する可能性があります。
実際のアプリケーションでは、クラスはテキストレイアウトなどに役立ち、idはマクロレイアウトやさまざまな要素のデザイン配置に役立ちます。
< >>

IDと名前に関する注意事項
もちろん、HTML要素のname属性は、ページ内で少しIDを再生することもできます。これは、DHTMLオブジェクトツリーで、document.getElementsByNameを使用して、ページ内で指定されたすべての名前のリストを取得できるためです。要素のオブジェクトの配列。

n(n> 1)HTML要素のIDがページ上で同じである場合はどうなりますか? DHTMLオブジェクトでそれらをどのように参照しますか?
ASPXページを使用する場合、この状況は簡単には発生しません。asp.netプロセスではaspxページの処理時にIDを一意にすることができないため、これはページがスローされます。例外は通常のレンダリングではありません。

しかし、それが動的ページでない場合は、IDにそのIEを繰り返させる方法を教えてください。
この時点で、引き続きdocument.getElementByIdを使用してオブジェクトを取得できますが、HTMLレンダリングで最初のオブジェクトを取得できるのは、IDが繰り返されるオブジェクトの場合のみです。このとき、繰り返されるIDは参照されると自動的に配列になり、idが繰り返される要素はレンダリングの順序で配列に存在し、配列の添え字はIDが表示される順序を順番に示します。