Ein Beispiel für den Unterschied zwischen den ID- und Name-Attributen in der Eingabe

Ich erstelle schon lange Websites, habe aber immer noch nicht den Unterschied zwischen Name und ID in der Eingabe herausgefunden. Als ich kürzlich jQuery lernte, stieß ich erneut auf dieses Problem und sammelte im Internet Informationen. Als ich diesen Artikel sah, habe ich ihn zur späteren Verwendung sortiert.

Man kann sagen, dass sich fast jeder, der sich mit Webentwicklung beschäftigt hat, gefragt hat: „Was ist der Unterschied zwischen der ID und dem Namen eines Elements?“ Warum brauchen wir einen Namen, wenn wir eine ID haben?! Wir können auch die klassischste Antwort erhalten: ID ist wie die ID-Nummer einer Person und Name ist wie ihr Name. ID ist offensichtlich eindeutig, während Name wiederholt werden kann.

Letzte Woche stieß ich auch auf das Problem mit ID und Name. Ich gab auf der Seite einen Eingabetyp = "hidden" ein und schrieb nur eine ID = "SliceInfo". Nachdem ich den Wert zugewiesen und übermittelt hatte, verwendete ich im Hintergrund Request.Params["SliceInfo"], konnte den Wert jedoch nicht abrufen. Später wurde mir klar, dass ich es mit „Name“ markieren sollte. Daher fügte ich in der Eingabe „Name='SliceInfo'“ hinzu und alles war in Ordnung.

Die Antwort auf ID und Name im ersten Absatz ist zu allgemein. Für ID, also die Identität des HTML-Elements auf der Clientseite, ist diese Erklärung natürlich völlig korrekt. Beim Namen ist die Sache eigentlich noch viel komplizierter, da der Name viele Verwendungsmöglichkeiten hat und somit nicht vollständig durch die ID ersetzt und somit aufgehoben werden kann. Zu den spezifischen Verwendungszwecken gehören:

Zweck 1: Als serverseitiger Marker für HTML-Elemente, die Daten mit dem Server austauschen können, wie etwa Eingabe, Auswahl, Textbereich und Schaltfläche. Wir können den vom Element über Request.Params übermittelten Wert basierend auf seinem Namen auf der Serverseite abrufen.
Verwendung 2: Gruppierung des HTML-Elements Eingabetyp = „Radio“. Wir wissen, dass sich Optionsfeld-Steuerelemente in derselben Gruppenklasse befinden und die Prüfoperation Mutex ist. Es kann immer nur ein Optionsfeld ausgewählt werden. Diese Gruppierung wird basierend auf demselben Namensattribut erreicht.
Verwendung 3: Erstellen Sie einen Anker auf der Seite. Wir wissen, dass <a href="URL">link</a> einen Seiten-Hyperlink abruft. Wenn wir das href-Attribut nicht verwenden, sondern stattdessen Name verwenden, z. B.: <a name="PageBottom"></a>, erhalten wir einen Seitenanker.
Anwendung 4: Als Identität eines Objekts, beispielsweise Applet, Objekt, Embed und andere Elemente. Beispielsweise verwenden wir in der Applet-Objektinstanz ihren Namen, um auf das Objekt zu verweisen.
Verwendung 5: Wenn Sie ein IMG-Element mit einem MAP-Element verknüpfen und den Hotspot-Bereich des IMG definieren möchten, müssen Sie dessen Attribut usemap verwenden, sodass usemap="#name" (der Name des verknüpften MAP-Elements) lautet.
Verwendung 6: Attribute bestimmter spezifischer Elemente, wie z. B. Attribut, Meta und Parameter. Definieren Sie beispielsweise einen Parameter <PARAM NAME = "appletParameter" VALUE = "value"> für ein Objekt oder <META NAME = "Author" CONTENT = "Dave Raggett"> in Meta.

Offensichtlich können diese Verwendungen nicht einfach durch eine ID ersetzt werden. Der Unterschied zwischen der ID und dem Namen eines HTML-Elements ist also nicht der gleiche wie zwischen einer ID-Nummer und einem Namen. Es handelt sich grundsätzlich um Dinge mit unterschiedlichen Funktionen.

Natürlich kann das Name-Attribut des HTML-Elements auch als ID auf der Seite eine kleine Rolle spielen, da wir im DHTML-Objektbaum document.getElementsByName verwenden können, um ein Objekt-Array abzurufen, das alle angegebenen Name-Elemente auf der Seite enthält. Es gibt noch ein weiteres Problem mit dem Name-Attribut. Wenn wir dynamisch ein Element erstellen, das ein Name-Attribut enthalten kann, können wir nicht einfach die Zuweisung element.name = "..." verwenden, um seinen Namen hinzuzufügen. Stattdessen müssen wir document.createElement('<element name = "myName"></element>') verwenden, um dem Element beim Erstellen des Elements das Name-Attribut hinzuzufügen. Was bedeutet das? Schauen Sie sich zum Verständnis das folgende Beispiel an.

Code kopieren

Der Code lautet wie folgt:

Das im Meldungsfeld angezeigte Ergebnis lautet: <INPUT id=myId>.

Code kopieren

Der Code lautet wie folgt:

<Skriptsprache="JavaScript">
var input = document.createElement('<INPUT name="meinName">');
input.id = "meineId";
Alarm (Eingabe.äußeresHTML);
</Skript>

Das im Meldungsfeld angezeigte Ergebnis lautet: <INPUT id=myId name=myName>.
Das Design der Initialisierung der Name-Eigenschaft ist kein Fehler des IE, auch wenn MSDN dies vorschreibt. Aber was ist das Prinzip dieses Designs? Ich habe es noch nicht herausgefunden.

Was passiert übrigens, wenn auf der Seite n (n>1) HTML-Elemente mit derselben ID vorhanden sind? Wie werden sie in DHTML-Objekten referenziert? Wenn wir ASPX-Seiten verwenden, tritt diese Situation wahrscheinlich nicht ein, da der ASPNET-Prozess bei der Verarbeitung von ASPX-Seiten keine nicht eindeutigen IDs zulässt. In diesem Fall wird auf der Seite eine Ausnahme ausgelöst und sie kann nicht normal gerendert werden. Wenn es sich nicht um eine dynamische Seite handelt und wir auf der Wiederholung der ID bestehen, was soll der IE tun? Zu diesem Zeitpunkt können wir weiterhin document.getElementById verwenden, um das Objekt abzurufen, wir können jedoch nur das erste Objekt abrufen, das im HTML-Render unter den Objekten mit doppelten IDs angezeigt wird. Zu diesem Zeitpunkt wird die doppelte ID beim Verweisen automatisch zu einem Array, und die Elemente mit doppelten IDs sind in der Reihenfolge des Renderns im Array vorhanden.

Formularelemente (Formulareingabe, Textbereich auswählen) und Rahmenelemente (Iframe-Frame) verwenden Namen
Diese Elemente beziehen sich alle auf die Formularübermittlung (Rahmenelemente wirken auf das Ziel des Formulars). Auf der Empfangsseite des Formulars werden nur Elemente mit Namen empfangen. Elemente mit IDs können keine Werte über das Formular empfangen. Sie können dies selbst überprüfen.
Es gibt eine Ausnahme: A kann ein Name als Anker oder eine ID zugewiesen werden

Natürlich können den oben genannten Elementen auch ID-Werte zugewiesen werden. Bei der Zuweisung von ID-Werten muss die Methode zur Referenzierung dieser Elemente geändert werden.
Name zuweisen: document.formName.inputName document.frames("frameName")
ID zuweisen: document.getElementById("inputID") document.all.frameID

Elemente, denen nur IDs, aber keine Namen zugewiesen werden können: (Ausgenommen formularbezogene Elemente, denen nur IDs zugewiesen werden können)
body li table tr td th p div span pre dl dt dd Schriftart b usw.

<<: Eine sehr detaillierte Erklärung der Linux C++ Multi-Thread-Synchronisierung

>>: Die neueste Sammlung von 18 Webdesign-Arbeiten im grünen Stil

js canvas realisiert Bilder mit abgerundeten Ecken

Ein Beispiel für den Unterschied zwischen den ID- und Name-Attributen in der Eingabe

js canvas realisiert Bilder mit abgerundeten Ecken

Die spezifische Implementierung von div, das nicht automatisch umschließt und das Nichtumschließen in HTML erzwingt

So legen Sie Remotezugriffsberechtigungen in MySQL 8.0 fest

IIS7 IIS8 http springt automatisch zu HTTPS (Port 80 springt zu Port 443)

CSS zum Erzielen des klebrigen Effekts von zwei sich kreuzenden Bällen – Beispielcode

Erstellen, Einschränkungen und Löschen von Fremdschlüsseln in MySQL

CSS-Tipps zur Implementierung der Chrome-Tab-Leiste

Verwenden Sie CSS- und Bootstrap-Symbole, um einen auf und ab springenden Indikatorpfeil-Animationseffekt zu erstellen

So erstellen Sie Ihr eigenes Image mit Dockerfile

Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 für WinX64

Artikel empfehlen

Detaillierte Erklärung von mktemp, einem grundlegenden Linux-Befehl

Implementierung einer Fuzzy-Abfrage wie %% in MySQL

Beispiele für die Verwendung von „Provide“ und „Inject“ in Vue2.0/3.0

Verwenden von vue3, um den Nebennachrichten-Eingabeaufforderungseffekt des Apple-Systems zu imitieren

Zusammenfassung der Verwendung von JavaScript JSON.stringify()

Detailliertes Tutorial zur Installation von mysql-8.0.13 (ZIP-Installation) auf einem Windows 10-System

js, um einfache Lupeneffekte zu erzielen

Beispielcode zur Implementierung einer dynamischen leuchtenden Spezialeffektanimation von Kreisen mit reinem CSS3

Detaillierte Erläuterung gängiger Methoden der Vue-Entwicklung

Django2.* + Mysql5.7-Entwicklungsumgebung Integrations-Tutorial-Diagramm

So legen Sie die Position des Blockelements in der Mitte des Fensters fest

MySQL-Lösung für zeitgesteuerte Backups (mithilfe von Linux crontab)

So installieren und deinstallieren Sie IIS7-Komponenten mithilfe der WIN2008-Serverbefehlszeile

Implementierungsbeispiel für ein JS-natives zweispaltiges Shuttle-Auswahlfeld

React führt antd-mobile+postcss ein, um ein mobiles Terminal zu erstellen