Eine kurze Diskussion über den Unterschied zwischen ID und Name im HTML-Beispielcode_Experience Exchange

Wir können die subtilen Unterschiede durch einen Codeabschnitt analysieren:

im IE-Browser Wie viele Methoden können wir verwenden, um dieses Textfeldobjekt zu indizieren? (Zur Unterscheidung setzen wir NAME und ID auf unterschiedliche Werte)
1. demoform.oDemo
3 🎜>5. document.forms['demoform'].oDemo
7. document.forms['demoform'].childNodes[0]
8. document.forms['demoform'].elements[0]
9. document.getElementById('oDemo2')

Die oben genannten 9 Indizierungsmethoden haben alle den Rückgabewerttest in IE6 bestanden Erwähnenswert ist das Letzte: In IE6 habe ich das Indexobjekt als

document.getElementById('oDemo') geschrieben, und der Browser kann das Objekt korrekt indizieren. Es ist wirklich schreckliche Fehlertoleranz! !

Dann kommt das Problem. Wir fügen diesen Code in Mozilla Firefox 1.0 ein und führen ihn erneut aus. Andere Methoden können das Objekt jedoch korrekt

indizieren , da die dritte und vierte Methode das IE-spezifische Objekt document.all verwenden, gab FF1.0 zwar den korrekten Wert zurück, gab jedoch eine Warnung

in der Konsole aus: Warnung: Nicht autorisierte Standardeigenschaften document.all. Bitte verwenden Sie die W3C-Standardform document.getElementById() .

Als nächstes definieren wir den HTML-Texttyp strenger und fügen am Anfang des Quellcodes Folgendes hinzu:




damit der HTML-Text entsprechend analysiert wird Beim HTML4.01-Standard bestehen im IE6 noch alle Rückgabewerttests, aber in Mozilla Firefox 1.0 ist das Problem groß. Die dritte und vierte Methode
nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> haben keinen Rückgabewert, sondern eine Fehlermeldung wird in der Konsole ausgegeben: Fehler: document.all hat keine Eigenschaften, und die 7. Methode gibt immer noch „undefiniert

“ zurück.

Zusammenfassung

name wurde ursprünglich zur Identifizierung verwendet, aber jetzt wird gemäß der Spezifikation empfohlen, id zur Identifizierung von Elementen zu verwenden.

Im Folgenden darf nur der Name verwendet werden:
1. Der Name des Steuerelements des Formulars und die übermittelten Daten werden durch den Namen des Steuerelements und nicht durch die ID gesteuert. Denn es gibt viele Namen, die mehreren Steuerelementen gleichzeitig entsprechen, wie z. B.

Kontrollkästchen und Radio, und die ID muss im gesamten Dokument eindeutig sein. Darüber hinaus stellt der Browser anhand des Namens die an den Server gesendete Anfrage ein. Daher kann der Server bei Verwendung der ID die Daten nicht abrufen. ​
2. Frame- und Fensternamen werden verwendet, um Ziele in anderen Frames oder Fenstern anzugeben.

Nur ​​IDs können für Folgendes verwendet werden:
1. Die Zuordnung zwischen Beschriftung und Formularsteuerung,

Meine Eingabe

Das für Das Attribut gibt die Zuordnung zum Label an. Die ID des Elements kann nicht durch den Namen ersetzt werden.​ 2. Der Elementauswahlmechanismus von CSS verwendet #MyId, um das Element anzugeben, auf das der Stil angewendet werden soll, und kann nicht durch einen Namen ersetzt werden.
3. Abrufen des Objekts im Skript:
IE unterstützt die direkte Referenzierung des Objekts, das durch die ID (anstelle des Namens) im Skript identifiziert wird. Wenn Sie beispielsweise für die obige Eingabe den Eingabeinhalt im Skript abrufen möchten, können Sie ihn direkt mit

MyInput.value abrufen.
Wenn Sie DOM verwenden, verwenden Sie document.getElementById("MyInput").value. Wenn Sie name verwenden möchten, erhalten Sie normalerweise zuerst das Formular, das das Steuerelement enthält, z. B.

document.forms[0 ] und dann auf den Namen aus dem Formular verweisen. Beachten Sie, dass der auf diese Weise erhaltene Wert der Wert ist, der nach der Berechnung an den Server gesendet wird.

Andere Unterschiede zwischen Name und ID sind:
Die ID muss den Identifizierungsanforderungen entsprechen, wie z. B. Groß-/Kleinschreibung, und es ist am besten, keine Unterstriche einzufügen (da sie nicht mit CSS kompatibel ist). Für den Namen gibt es grundsätzlich keine Vorgaben, es können sogar Zahlen verwendet werden

.

Verwenden Sie CSS, um den Aufenthaltsstil dieses Links zu steuern
Sie können so schreiben: #m_blog div.opt a:hover{color:#D57813} oder #myLink:hover{color:#D57813}.

NAME wird hauptsächlich in interaktiven Webseiten verwendet. Das Formular wird an ein serverseitiges Skript übermittelt und erhält ein variables Verarbeitungsvolumen. Aus Sicht der Quellcode-Standardisierung und -Kompatibilität wird empfohlen, die Methode document.getElementById() zu verwenden, wenn Sie ein Objekt im Client-Skript

indizieren möchten. Versuchen Sie, den NAME-Wert nicht direkt zu verwenden. Wenn die Kompatibilität nicht berücksichtigt wird, können die oben genannten 9 Methoden

natürlich alle im IE ausgeführt werden (IE5.0 wurde nicht getestet).

Anhang: Quellcode testen



nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">