Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen
|
Heute bin ich etwas verwirrt über <a href="#13"></a>. Das Hinzufügen von # zeigt einen Anker an, und das Hinzufügen von 13 springt zur Position 13 dieser Seite, und diese 13 ist der Wert des Name-Attributs. Warum ist es kein ID-Wert? ? ? Also habe ich den Unterschied zwischen ID und Name überprüft und aufgezeichnet Die klassischste Antwort: ID ist wie die Ausweisnummer einer Person und Name ist wie ihr Name. ID ist offensichtlich eindeutig, während Name wiederholt werden kann. Offensichtlich ist die Antwort auf ID und Name 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" (das verknüpfte MAP Name des Elements). 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. Wir können die subtilen Unterschiede anhand eines Codestücks analysieren: Code kopieren Der Code lautet wie folgt:<Formularmethode="Beitrag" Aktion="" Name="Demoformular"> <input Typ="Text" Name="oDemo" ID="oDemo2" Wert="DEMO" /> </form> Wie viele Methoden können wir im IE-Browser verwenden, um dieses Textfeldobjekt zu indizieren? (Um sie zu unterscheiden, setzen wir NAME und ID auf unterschiedliche Werte) 1. oDemo 2. demoform.oDemo 3. Dokument.alle.oDemo 4. Dokument.alle.demoform.oDemo 5. document.forms[0].oDemo 6. document.forms['demoform'].oDemo 7. document.forms['demoform'].childNodes[0] 8. Dokument.Formulare['Demoformular'].Elemente[0] 9. document.getElementById('oDemo2') Die oben genannten 9 Indizierungsmethoden bestehen alle den Rückgabewerttest in IE6, aber die letzte ist bemerkenswert: In IE6 habe ich das Indexobjekt als document.getElementById('oDemo') geschrieben, und der Browser konnte das Objekt korrekt indizieren. Was für eine schreckliche Fehlertoleranz! ! Dann kommt das Problem. Wir setzen diesen Code in Mozilla Firefox 1.0 und führen ihn erneut aus. Nur die 7. Methode gibt „undefined“ zurück, und die anderen Methoden können das Objekt korrekt indizieren. Da die 3. und 4. Methode jedoch das IE-spezifische Objekt document.all verwenden, gibt FF1.0 zwar den korrekten Wert zurück, gibt aber eine Warnung in der Konsole aus: Warnung: Nicht standardmäßige Eigenschaft document.all. Bitte verwenden Sie das W3C-Standardformular document.getElementById() . Als nächstes definieren wir den HTML-Texttyp strenger und fügen am Anfang des Quellcodes hinzu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, um den HTML-Text gemäß dem HTML4.01-Standard zu analysieren. In IE6 werden alle Rückgabewerttests noch bestanden, aber in Mozilla Firefox 1.0 gibt es eine Menge Probleme. Die dritte und vierte Methode haben keine Rückgabewerte und in der Konsole wird eine Fehlermeldung ausgegeben: Fehler: document.all hat keine Eigenschaften und die siebte Methode gibt immer noch "undefined" zurück. Zusammenfassung NAME wird hauptsächlich auf interaktiven Webseiten verwendet, wo das Formular an ein serverseitiges Skript übermittelt wird und dann eine variable Verarbeitung erhält. Wenn Sie aus Sicht der Standardisierung und Kompatibilität des Quellcodes ein Objekt in einem Client-Skript indizieren möchten, wird empfohlen, document.getElementById() Hier ist ein weiteres einfaches Beispiel: <Formularname="Formular1"> Benutzername: <input type=text name="Benutzername" id="Benutzername"> Passwort: <input type=password name="password" id="pwd"> </form> Wenn ich den Benutzernamen und das Passwort abrufen möchte, muss ich es als document.form1.username.value schreiben, falls JS dafür den Namen verwendet. Dokument.Formular1.Passwort.Wert; Erhalten Sie es anhand der ID: document.getElementById("Benutzername"); document.getElementById("pwd"); Manchmal kann derselbe Name in „Name“ vorkommen. Wenn wir also „Name“ verwenden, um den Wert zu erhalten, können wir nicht sicher sein, welchen Wert wir erhalten. document.getElementsByName("Benutzername"); Was wir hier erhalten, ist ein Array |
<<: Mehrere Methoden zum Löschen von Floating (empfohlen)
>>: Implementierung der Multisite-Konfiguration von Nginx auf Mac M1
Artikel empfehlen
Shell-Skript erstellt Docker halbautomatische Kompilierungs-, Verpackungs- und Freigabeanwendungsvorgänge
Die Docker-Veröffentlichungsmethode bietet viele ...
MySQL 5.7.20 Win64 Installations- und Konfigurationsmethode
mysql-5.7.20-winx64.zipInstallationspaket ohne In...
Webdesigner ist ein geeignetes Talent
<br />Es gibt keine Straße auf der Welt. Wen...
Nginx-Praxis zur Optimierung hoher Parallelität
1. Notwendigkeit des Tunings Ich habe mich immer ...
Die Verbindung zwischen JavaScript-Konstruktoren und Prototypen
Inhaltsverzeichnis 1. Konstrukteure und Prototype...
Einführung in die Funktionen und Verwendung von Wert- und Namensattributen in HTML
1. Der in der Schaltfläche verwendete Wert bezieht...
So implementieren Sie die Seiten-Screenshot-Funktion in JS
„Seiten-Screenshot“ ist eine Anforderung, die häu...
HTML-Tbody-Verwendung
Strukturierte Tabelle (nur IExplore) 1) Gruppieren...
Webseitenerstellung für Anfänger: Lernen Sie den Umgang mit dem A-Tag für HTML-Hyperlinks
Der Hyperlink-Tag stellt einen Linkpunkt dar und ...
Umfassendes Verständnis der HTML-Grundstruktur
Einführung in HTML HyperText-Auszeichnungssprache...
CSS3 beschleunigt und verzögert Übergänge
1. Verwenden Sie die Geschwindigkeitskontrollfunk...
Zusammenfassung eines CSS-Codes, der die gesamte Site grau macht
Um den Märtyrern und Opfern des Kampfes gegen die...
Verwenden Sie personalisierte Suchmaschinen, um die personalisierten Informationen zu finden, die Sie benötigen
Viele Menschen leben heute im Internet und die Suc...
So verwenden Sie Gitlab-ci zur kontinuierlichen Bereitstellung auf Remotecomputern (ausführliches Tutorial)
Kurz gesagt, heute sprechen wir über die Verwendu...
Detaillierte Beispiele für Variablen- und Funktionspromotion in JavaScript
js-Ausführung Phase der lexikalischen Analyse: um...