Was ist der Unterschied zwischen Eigenschaften und Attributen in HTML?

Question

Nach den in jQuery 1.6.1 vorgenommenen Änderungen habe ich versucht, den Unterschied zwischen Eigenschaften und Attributen in HTML zu definieren.

Betrachtet man die Liste in den Versionshinweisen jQuery 1.6.1 (am unteren Rand), kann man HTML-Eigenschaften und -Attribute wie folgt klassifizieren:

Eigenschaften: Alle, die entweder einen booleschen Wert haben oder der UA berechnet ist, z. B. selectedIndex.
Attribute: 'Attribute', die einem HTML-Element hinzugefügt werden können, das weder boolean ist noch einen von der UA generierten Wert enthält.

Gedanken?

Šime Vidas · Accepted Answer

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 (type und 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, checked, childElementCount, childNodes , children, classList, className, clientHeight usw.

Für ein bestimmtes DOM-Knotenobjekt sind Eigenschaften die Eigenschaften dieses Objekts und Attribute die Elemente der Eigenschaft attributes 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 verfügt unter anderem über die Eigenschaften id, type und value:

Die Eigenschaft id ist eine reflektierte Eigenschaft für das Attribut id: Beim Abrufen der Eigenschaft wird der Attributwert gelesen und beim Festlegen der Eigenschaft wird der Attributwert geschrieben. id ist eine reine reflektierte Eigenschaft, die den Wert nicht ändert oder einschränkt.
Die Eigenschaft type ist eine reflektierte Eigenschaft für das Attribut type: Beim Abrufen der Eigenschaft wird der Attributwert gelesen und beim Festlegen der Eigenschaft wird der Attributwert geschrieben. type ist keine rein reflektierte Eigenschaft, da sie auf bekannte Werte (z. B. die gültigen Typen einer Eingabe) beschränkt ist. Wenn Sie <input type="foo"> hatten, dann theInput.getAttribute("type") gibt Ihnen "foo", aber theInput.type gibt Ihnen "text".
Im Gegensatz dazu gibt die Eigenschaft value das Attribut value nicht wieder. Stattdessen ist es der aktuelle Wert der Eingabe. Wenn der Benutzer den Wert des Eingabefelds manuell ändert, spiegelt die Eigenschaft value diese Änderung wider. Wenn der Benutzer also "John" in das Eingabefeld eingibt, dann:
```
theInput.value // returns "John" 
```
wohingegen:
```
theInput.getAttribute('value') // returns "Name:" 
```
Die Eigenschaft value spiegelt den Textinhalt current im Eingabefeld wider, während das Attribut value den Textinhalt initial des Attributs value aus dem HTML-Quellcode enthält.

Wenn Sie also wissen möchten, was sich aktuell im Textfeld befindet, lesen Sie die Eigenschaft. Wenn Sie jedoch wissen möchten, wie der Anfangswert des Textfelds lautete, lesen Sie das Attribut. Sie können auch die Eigenschaft defaultValue verwenden, die das Attribut value widerspiegelt:
```
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 Reflexionen mit leicht abweichenden Namen (htmlFor spiegelt das Attribut for, className spiegelt das Attribut class wider, viele spiegeln ihr Attribut aber mit Einschränkungen/Modifikationen (srcvariable_, href, disabled, multiple) und so weiter. Die Spezifikation deckt die verschiedenen Arten der Reflexion ab.

sibidiba · Answer

Die Antworten erklären bereits, wie Attribute und Eigenschaften unterschiedlich behandelt werden, aber ich möchte wirklich darauf hinweisen, wie total verrückt das ist. Auch wenn es zu einem gewissen Grad die Spezifikation ist.

Es ist verrückt, einige der Attribute (z. B. id, class, foo, bar) zu haben, um nur einen Wert im DOM zu erhalten, während einige Attribute (z. B. markiert, ausgewählt) zwei Werte beibehalten; das heißt, der Wert "wann es geladen wurde" und der Wert des "dynamischen Zustands". (Soll das DOM nicht den Zustand des Dokument in vollem Umfang darstellen?)

Es ist absolut wichtig, dass zwei Eingabefelder , z. Ein Text und ein Kontrollkästchen verhalten sich genauso . Wenn das Texteingabefeld keinen separaten Wert "beim Laden" und den "aktuellen, dynamischen" Wert enthält, warum wird das Kontrollkästchen aktiviert? Wenn das Ankreuzfeld zwei Werte für das Attribut geprüft hat, warum hat es nicht zwei Werte für die Attribute Klasse und ID ?, Wenn Sie dies erwarten Ändern Sie den Wert eines Text * input * -Felds, und Sie erwarten, dass sich das DOM (dh die "serialisierte Darstellung") ändert, und reflektieren Sie diese Änderung. Warum würden Sie nicht dasselbe von einem _ erwarten?Eingabe Feld vom Typ Ankreuzfeld für das geprüfte Attribut?

Die Unterscheidung "es ist ein boolesches Attribut" macht für mich einfach keinen Sinn oder ist zumindest kein ausreichender Grund dafür.

Daniel Ruf · Answer

nun, diese werden vom W3C angegeben. Was ist ein Attribut und was ist eine Eigenschaft http://www.w3.org/TR/SVGTiny12/attributeTable.html

aber derzeit sind attr und prop nicht so verschieden und es gibt fast das gleiche

aber sie bevorzugen Stütze für einige Dinge

Zusammenfassung der bevorzugten Verwendung

Die .prop () - Methode sollte für boolesche Attribute/Eigenschaften und für Eigenschaften verwendet werden, die in html nicht vorhanden sind (z. B. window.location). Alle anderen Attribute (die Sie in der HTML-Datei sehen können) können und sollten weiterhin mit der .attr () -Methode bearbeitet werden.

nun, eigentlich muss man nichts ändern, wenn man attr oder prop oder beides verwendet, beide funktionieren aber ich sah in meiner eigenen Anwendung, dass der prop dort arbeitete, wo atrr nicht tat, also nahm ich meinen 1.6 app prop =)

subtleseeker · Answer

Nachdem ich die Antwort von Sime Vidas gelesen hatte, suchte ich mehr und fand eine sehr einfache und leicht verständliche Erklärung in den eckigen Dokumenten .

HTML-Attribut vs. DOM-Eigenschaft

Attribute werden durch HTML definiert. Eigenschaften werden vom DOM definiert (Dokumentobjektmodell).

Einige HTML-Attribute haben eine 1: 1-Zuordnung zu Eigenschaften. id ist einer Beispiel.

Einige HTML-Attribute haben keine entsprechenden Eigenschaften. colspan ist ein Beispiel.

Einige DOM-Eigenschaften haben keine entsprechenden Attribute. textContent ist ein Beispiel.

Viele HTML-Attribute scheinen Eigenschaften zuzuordnen ... aber nicht in der wie du denkst!

Diese letzte Kategorie ist verwirrend, bis Sie diese allgemeine Regel verstehen:

Attribute initialize DOM-Eigenschaften und dann sind sie fertig. Eigentum Werte können sich ändern; Attributwerte können nicht.

Wenn der Browser beispielsweise <input type="text" value="Bob">, .__ rendert. es erstellt einen entsprechenden DOM-Knoten mit einer value-Eigenschaft, die initialisiert wurde zu "Bob".

Wenn der Benutzer "Sally" in das Eingabefeld eingibt, das DOM-Element value Eigenschaft wird zu "Sally". Das HTML value -Attribut bleibt jedoch unverändert, wenn Sie feststellen, ob Sie das Eingabeelement danach fragen Attribut: input.getAttribute('value') gibt "Bob" zurück.

Das HTML-Attribut value gibt den Anfangswert an. das DOM value Eigenschaft ist der Wert von current.

Das disabled-Attribut ist ein weiteres besonderes Beispiel. Ein Button disabled-Eigenschaft ist standardmäßig false, daher ist die Schaltfläche aktiviert. Wann Sie fügen das disabled-Attribut hinzu, nur durch die Anwesenheit von Die Eigenschaft disabled der Schaltfläche ist true, sodass die Schaltfläche deaktiviert ist.

Durch das Hinzufügen und Entfernen des disabled-Attributs wird das .__ deaktiviert und aktiviert. Taste. Der Wert des Attributs ist irrelevant, weshalb Sie Sie können eine Schaltfläche nicht aktivieren, indem Sie <button disabled="false">Still Disabled</button>. schreiben.

Durch Setzen der disabled -Eigenschaft der Schaltfläche wird die Schaltfläche deaktiviert oder aktiviert. Der Wert der -Eigenschaft ist wichtig.

Das HTML-Attribut und die DOM-Eigenschaft sind nicht dasselbe, auch wenn sie den gleichen Namen haben.

Willem van der Veen · Answer

Unterschiedliche HTML-Eigenschaften und -Attribute:

Schauen wir uns zuerst die Definitionen dieser Wörter an, bevor wir den Unterschied in HTML auswerten:

Englische Definition:

Attribute beziehen sich auf zusätzliche Informationen eines Objekts.
Eigenschaften beschreiben die Eigenschaften eines Objekts.

Im HTML-Kontext:

Wenn der Browser den HTML-Code analysiert, erstellt er eine Baumdatenstruktur, die im Wesentlichen eine In-Memory-Darstellung des HTML-Codes ist. Die Baumdatenstruktur enthält Knoten, die HTML-Elemente und Text sind. Attribute und Eigenschaften beziehen sich auf die folgende Weise:

Attribute sind zusätzliche Informationen, die wir in den HTML-Code einfügen können, um bestimmte DOM-Eigenschaften mit initialize zu initialisieren.
Properties werden gebildet, wenn der Browser den HTML-Code analysiert und das DOM generiert. Jedes der Elemente im DOM verfügt über eigene Eigenschaften, die alle vom Browser festgelegt werden. Bei einigen dieser Eigenschaften kann der Anfangswert durch HTML-Attribute festgelegt werden. Wenn sich eine DOM-Eigenschaft ändert, die Einfluss auf die gerenderte Seite hat, wird die Seite sofort erneut gerendert.

Es ist auch wichtig zu wissen, dass die Zuordnung dieser Eigenschaften nicht 1 zu 1 ist. Mit anderen Worten, nicht jedes Attribut, das wir für ein HTML-Element angeben, hat eine ähnliche benannte DOM-Eigenschaft.

Weiterhin haben unterschiedliche DOM-Elemente unterschiedliche Eigenschaften. Beispielsweise hat ein <input>-Element eine value-Eigenschaft, die in einer <div>-Eigenschaft nicht vorhanden ist.

Beispiel:

Nehmen wir das folgende HTML-Dokument:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- charset is a attribute --> <meta name="viewport" content="width=device-width"> <!-- name and content are attributes --> <title>JS Bin</title> </head> <body> <div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes --> </body> </html>

Dann prüfen wir den <div> in der JS-Konsole:

 console.dir(document.getElementById('foo'));

Wir sehen die folgenden DOM-Eigenschaften (chrome devtools, nicht alle gezeigten Eigenschaften):

Wir können sehen, dass das Attribut id im HTML jetzt auch eine id-Eigenschaft im DOM ist. Die ID wurde von HTML initialisiert (obwohl wir sie mit Javascript ändern konnten).
Wir sehen, dass das Klassenattribut im HTML keine entsprechende Klasseneigenschaft hat (class ist reserviertes Schlüsselwort in JS). Aber eigentlich 2 Eigenschaften, classList und className.