Wenn Sie HTML-Quellcode schreiben, können Sie Eigenschaften auf Ihre HTML-Elemente. Sobald der Browser Ihren Code analysiert hat, wird ein entsprechender DOM-Knoten erstellt. Dieser Knoten ist ein Objekt und hat daher Eigenschaften .
Zum Beispiel dieses HTML-Element:
<input type="text" value="Name:">
hat 2 Attribute ( type y value ).
Sobald der Browser diesen Code analysiert hat, wird ein HTMLInputElement Objekt wird erstellt, und dieses Objekt enthält Dutzende von Eigenschaften wie: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc.
Für ein bestimmtes DOM-Knotenobjekt sind Eigenschaften die Eigenschaften dieses Objekts, und Attribute sind die Elemente der attributes Eigenschaft dieses Objekts.
Wenn ein DOM-Knoten für ein bestimmtes HTML-Element erstellt wird, beziehen sich viele seiner Eigenschaften auf Attribute mit denselben oder ähnlichen Namen, aber es ist keine Eins-zu-Eins-Beziehung. Zum Beispiel für dieses HTML-Element:
<input id="the-input" type="text" value="Name:">
wird der entsprechende DOM-Knoten mit id , type y value Eigenschaften (unter anderem):
-
Le site id Eigenschaft ist eine reflektierte Eigenschaft für die id Attribut: Beim Abrufen der Eigenschaft wird der Attributwert gelesen, beim Setzen der Eigenschaft wird der Attributwert geschrieben. id ist eine rein reflektierte Eigenschaft, sie verändert oder begrenzt den Wert nicht.
-
Le site type Eigenschaft ist eine reflektierte Eigenschaft für die type Attribut: Beim Abrufen der Eigenschaft wird der Attributwert gelesen, beim Setzen der Eigenschaft wird der Attributwert geschrieben. type ist keine rein reflektierte Eigenschaft, denn sie ist beschränkt auf bekannte Werte (z. B. die gültigen Typen einer Eingabe). Hätten Sie <input type="foo"> entonces theInput.getAttribute("type") gibt Ihnen "foo" sondern theInput.type gibt Ihnen "text" .
-
Im Gegensatz dazu ist die value Eigenschaft spiegelt nicht die value zuordnen. Stattdessen ist es das aktueller Wert der Eingabe. Wenn der Benutzer den Wert des Eingabefelds manuell ändert, wird der value wird diese Änderung widerspiegeln. Wenn der Benutzer also Folgendes eingibt "John" in das Eingabefeld ein, dann:
theInput.value // returns "John"
in der Erwägung, dass:
theInput.getAttribute('value') // returns "Name:"
Le site value spiegelt die Eigenschaft aktuell Text-Inhalt innerhalb des Eingabefeldes, während die value enthält das Attribut anfänglich Text-Inhalt der value Attribut aus dem HTML-Quellcode.
Wenn Sie also wissen wollen, was sich gerade im Textfeld befindet, lesen Sie die Eigenschaft. Wenn Sie jedoch wissen wollen, was der Anfangswert des Textfeldes war, lesen Sie das Attribut. Oder Sie können die defaultValue Eigenschaft, die ein reines Spiegelbild der value Attribut:
theInput.value // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue // returns "Name:"
Es gibt mehrere Eigenschaften, die ihr Attribut direkt widerspiegeln ( rel , id ), einige sind direkte Spiegelungen mit leicht abweichenden Namen ( htmlFor spiegelt die for Attribut, className spiegelt die class Attribut), viele, die ihr Attribut widerspiegeln, aber mit Einschränkungen/Änderungen ( src , href , disabled , multiple ), und so weiter. Die Spezifikation deckt die verschiedenen Arten der Reflexion ab.
