Beim Schreiben von HTML-Quellcode können Sie Attribute für Ihre HTML-Elemente definieren. Sobald der Browser Ihren Code analysiert, 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 ( typeund value).
Sobald der Browser diesen Code analysiert, wird ein HTMLInputElement- Objekt erstellt, und dieses Objekt enthält Dutzende von Eigenschaften wie: accept, accessKey, align, alt, Attribute, Autofokus, baseURI, markiert, childElementCount, childNodes, children, classList, className, clientHeight usw.
Für ein bestimmtes DOM-Knotenobjekt sind Eigenschaften die Eigenschaften dieses Objekts und Attribute die Elemente der attributesEigenschaft dieses Objekts.
Wenn ein DOM-Knoten für ein bestimmtes HTML-Element erstellt wird, beziehen sich viele seiner Eigenschaften auf Attribute mit demselben oder einem ähnlichen Namen, es handelt sich jedoch nicht um eine Eins-zu-Eins-Beziehung. Zum Beispiel für dieses HTML-Element:
<input id="the-input" type="text" value="Name:">
der entsprechende DOM Knoten hat id, typeund valueEigenschaften (unter anderem):
Die idEigenschaft ist eine reflektierte Eigenschaft für das idAttribut: Beim Abrufen der Eigenschaft wird der Attributwert gelesen, und beim Festlegen der Eigenschaft wird der Attributwert geschrieben. idist eine reine reflektierte Eigenschaft, die den Wert nicht ändert oder einschränkt.
Die typeEigenschaft ist eine reflektierte Eigenschaft für das typeAttribut: Beim Abrufen der Eigenschaft wird der Attributwert gelesen, und beim Festlegen der Eigenschaft wird der Attributwert geschrieben. typeist keine reine reflektierte Eigenschaft, da sie auf bekannte Werte beschränkt ist (z. B. die gültigen Typen einer Eingabe). Wenn Sie hatten <input type="foo">, dann theInput.getAttribute("type")gibt Ihnen, "foo"aber theInput.typegibt Ihnen "text".
Im Gegensatz dazu valuespiegelt die valueEigenschaft das Attribut nicht wider . Stattdessen ist es der aktuelle Wert der Eingabe. Wenn der Benutzer den Wert des Eingabefelds manuell ändert, valuespiegelt die Eigenschaft diese Änderung wider. Wenn der Benutzer also "John"in das Eingabefeld eingibt, gilt Folgendes:
theInput.value // returns "John"
wohingegen:
theInput.getAttribute('value') // returns "Name:"
Die valueEigenschaft spiegelt den aktuellen Textinhalt im Eingabefeld wider , während das valueAttribut den anfänglichen Textinhalt des valueAttributs aus dem HTML-Quellcode enthält.
Wenn Sie also wissen möchten, was sich derzeit im Textfeld befindet, lesen Sie die Eigenschaft. Wenn Sie jedoch wissen möchten, wie hoch der Anfangswert des Textfelds war, lesen Sie das Attribut. Oder Sie können die defaultValueEigenschaft verwenden, die das valueAttribut rein widerspiegelt :
theInput.value // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue // returns "Name:"
Es gibt mehrere Eigenschaften , die direkt ihr Attribut widerspiegeln ( rel, id), einige sind direkte Reflexionen mit leicht-verschiedenen Namen ( htmlForentspricht das forAttribut, classNamespiegelt das classAttribut), viele , die ihre Eigenschaft reflektieren , aber mit Einschränkungen / Änderungen ( src, href, disabled, multiple), und so auf. Die Spezifikation deckt die verschiedenen Arten der Reflexion ab.
