Einführung in die Unterschiede zwischen HTML-Name, ID, Klasse (Format/Anwendungsszenario/Funktionen) usw.

Einführung in die Unterschiede zwischen HTML-Name, ID, Klasse (Format/Anwendungsszenario/Funktionen) usw.
Auf einer Seite gibt es viele Steuerelemente (Elemente oder Tags). Um die Bedienung dieser Tags zu vereinfachen, müssen diese mit einem Ausweis gekennzeichnet werden.

Die erforderlichen Attribute sind: Name, ID, Klasse

1. Name

Geben Sie einen Namen für das Tag an.

1.1 Format: <input type="text" name="benutzername" />

1.2 Anwendungsszenarien

①Formular: Name kann als Variablenname der an den Server übertragenen Formularliste verwendet werden. Der oben an den Server übertragene Name lautet beispielsweise: Benutzername = „Textwert“.

②Eingabetyp = „Radio“-Radiotag: Wenn der Name mehrerer Radiotags auf denselben Wert eingestellt ist, wird ein Radioauswahlvorgang ausgeführt.

Code kopieren
Der Code lautet wie folgt:

<input type="radio" name='sex'/>Männlich
<input type="radio" name='sex'/>Weiblich③Schnell eine Gruppe von Tags mit demselben Namen abrufen: Tags mit demselben Namen abrufen und gemeinsam Vorgänge ausführen, z. B.: Attribute ändern, Ereignisse registrieren usw.;
[Code]
Funktion changtxtcolor() {
var txts = document.getElementsByName('txtcolor'); //Alle Tags mit Name=txtcolor abrufen
for (var i = 0; i < txts.length; i++) { //Durchlaufe die Tags und ändere die Hintergrundfarbe auf Rot
txts[i].style.backgroundColor = "rot";
}
}

1.3 Funktionen

Der Wert des Namensattributs ist auf der aktuellen Seite nicht eindeutig.

2. Ich würde

Gibt die eindeutige Kennung eines Tags an.

2.1 Format: <Eingabetyp=Passwort-ID="Benutzerkennwort" />

2.2 Anwendungsszenarien:

① Erhalten Sie das Tag-Objekt schnell anhand der bereitgestellten eindeutigen ID-Nummer. Beispiel: document.getElementById(id)

② Wird als Wert des For-Attributs des Label-Tags verwendet: Beispiel: <label for='userid'>Benutzername: </label>, was bedeutet, dass beim Klicken auf dieses Label-Tag das Label mit der ID „userid“ den Fokus erhält.

2.3 Funktionen

Der Wert des ID-Attributs muss auf der aktuellen Seite eindeutig sein.

3. Klasse

Gibt den Klassennamen des Tags an.

3.1 Format: <input type=button class="btnsubmit" />

3.2 Anwendungsszenarien:

①CSS-Operation: Fügen Sie einige bestimmte Stile in eine Klasse ein und fügen Sie diese Klasse hinzu, wenn Sie Tags dieses Stils benötigen.

3.3 Funktionen:

Sie können mehrere Klassen in ein Klassenattribut einfügen, diese müssen jedoch durch Leerzeichen getrennt sein. Beispiel: class='btnsubmit btnopen'

<<:  Detaillierte Schritte zum Erweitern der LVM-Festplatte unter Linux

>>:  Der Unterschied zwischen Anzeige, Sichtbarkeit, Deckkraft, RGBA und Z-Index: -1 in CSS

Artikel empfehlen

Beschreibung des MySQL-Optimierungsparameters query_cache_limit

query_cache_limit query_cache_limit gibt die Puff...

Javascript-Betriebsmechanismus „Event Loop“

Inhaltsverzeichnis 1. Vier Konzepte 1. JavaScript...

jQuery realisiert den Gleiteffekt des Dropdown-Menüs

Wenn wir eine Webseite erstellen, möchten wir man...

LINUX Prüft, ob der Port belegt ist

Ich konnte nie herausfinden, ob der Port belegt i...

Detailliertes Tutorial zum PyCharm- und SSH-Remote-Access-Server-Docker

Hintergrund: Einige Experimente müssen auf dem Se...

Implementierung des Imports und Exports von Docker-Images

Docker-Nutzung von Gitlab Gitlab Docker Startbefe...

Welchen MySQL-Eindeutigen Index oder Normalen Index soll ich wählen?

Stellen Sie sich ein Szenario vor, in dem beim En...

Detaillierte Erklärung von count(), group by, order by in MySQL

Ich bin vor Kurzem auf ein Problem gestoßen, als ...

Lösung zum Vergessen des Root-Passworts von MySQL5.7 unter Windows 8.1

【Hintergrund】 Mir ist beim Lernen kürzlich etwas ...

Tiefes Verständnis von Zeilenhöhe und vertikaler Ausrichtung

Mehrere Konzepte Zeilenbox: Eine Box, die eine In...