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

今日は について少し混乱しています。# を追加するとアンカーを意味し、その後に 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");
ここで得られるのは配列です
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Web開発にとってHTML属性が重要なのはなぜですか?Web開発にとってHTML属性が重要なのはなぜですか?May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevevermentmentmentmentmentmentmentmention behavior、like、andfunctionality.theyenhance -interactivity、accessibility、andseo.forexample、thesrcattribute intagsimpactsseo

Alt属性の目的は何ですか?なぜそれが重要なのですか?Alt属性の目的は何ですか?なぜそれが重要なのですか?May 11, 2025 am 12:01 AM

ALT属性は、HTMLのタグの重要な部分であり、画像の代替テキストを提供するために使用されます。 1.画像をロードできない場合、ALT属性のテキストが表示され、ユーザーエクスペリエンスが向上します。 2。スクリーンリーダーは、ALT属性を使用して、視覚障害のあるユーザーが写真の内容を理解するのに役立ちます。 3. ALT属性のEnginesインデックステキストを検索して、WebページのSEOランキングを改善します。

HTML、CSS、およびJavaScript:例と実用的なアプリケーションHTML、CSS、およびJavaScript:例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか?なぜこれが重要なのですか?Lang属性をタグにどのように設定しますか?なぜこれが重要なのですか?May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1)ラング属性をタグに設定します。 2)多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3)「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか?HTML属性の目的は何ですか?May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

HTMLでリストを作成するにはどうすればよいですか?HTMLでリストを作成するにはどうすればよいですか?May 06, 2025 am 12:01 AM

toreatealistinhtml、useforunorderedlistsandfororderedlists:1)forunorderedlists、wrapitemsinanduseforeachitem、renderingasabulletedlist.2)

HTMLアクション:Webサイト構造の例HTMLアクション:Webサイト構造の例May 05, 2025 am 12:03 AM

HTMLは、明確な構造のWebサイトを構築するために使用されます。 1)Webサイト構造などのタグを使用し、定義します。 2)例は、ブログとeコマースのウェブサイトの構造を示しています。 3)誤ったラベルネスティングなどの一般的な間違いを避けてください。 4)HTTP要求を削減し、セマンティックタグを使用してパフォーマンスを最適化します。

HTMLページに画像を挿入するにはどうすればよいですか?HTMLページに画像を挿入するにはどうすればよいですか?May 04, 2025 am 12:02 AM

to inertanimageintoanhtmlpage、usethetagwithsrcandaltattributes.1)usealttextforaccessibilityandseo.2)emplencesrcsetForresponsiveimages.3)applylazyloadingwithloading = "lazy" tooptimizeperformance.4)

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません