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

Wenn man sich die Liste in den Versionshinweisen zu jQuery 1.6.1 (unten) ansieht , kann man HTML-Eigenschaften und -Attribute wie folgt klassifizieren:

• Eigenschaften: Alle, die entweder einen booleschen Wert haben oder UA-berechnet sind, z. B. selectedIndex.

• Attribute: 'Attribute', die einem HTML-Element hinzugefügt werden können, das weder boolesch ist noch einen von UA ​​generierten Wert enthält.

Gedanken?

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.

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 (Document Object Model) definiert.

• Einige HTML-Attribute weisen eine 1: 1-Zuordnung zu Eigenschaften auf. idist ein Beispiel.

• Einige HTML-Attribute haben keine entsprechenden Eigenschaften. colspanist ein Beispiel.

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

• Viele HTML-Attribute scheinen Eigenschaften zuzuordnen ... aber nicht so, wie Sie vielleicht denken!

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

Attribute initialisieren DOM-Eigenschaften und dann sind sie fertig. Eigenschaftswerte können sich ändern. Attributwerte können nicht.

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

Wenn der Benutzer „Sally“ in das Eingabefeld eingibt, die DOM - Element value Eigenschaft wird „Sally“. Das HTML- value Attribut bleibt jedoch unverändert, wenn Sie feststellen, dass Sie das Eingabeelement nach diesem Attribut fragen: input.getAttribute('value')Gibt "Bob" zurück.

Das HTML-Attribut valuegibt den Anfangswert an. Die DOM- value Eigenschaft ist der aktuelle Wert.

---

Das disabledAttribut ist ein weiteres besonderes Beispiel. Die disabledEigenschaft einer Schaltfläche ist falsestandardmäßig aktiviert, sodass die Schaltfläche aktiviert ist. Wenn Sie das disabledAttribut hinzufügen , wird allein durch seine Anwesenheit die disabledEigenschaft trueder Schaltfläche initialisiert , sodass die Schaltfläche deaktiviert wird.

Durch Hinzufügen und Entfernen des disabledAttributs wird die Schaltfläche deaktiviert und aktiviert. Der Wert des Attributs ist irrelevant, weshalb Sie eine Schaltfläche nicht durch Schreiben aktivieren können<button disabled="false">Still Disabled</button>.

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

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

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

Es ist verrückt, einige der Attribute (z. B. id, class, foo, bar ) zu haben, um nur eine Art von Wert im DOM beizubehalten, während einige Attribute (z. B. aktiviert, ausgewählt ) zwei Werte beibehalten; das heißt, der Wert "als es geladen wurde" und der Wert des "dynamischen Zustands". (Soll das DOM nicht den Status des Dokuments in vollem Umfang darstellen?)

Es ist unbedingt erforderlich , dass sich zwei Eingabefelder , z. B. ein Text und ein Kontrollkästchen, gleich verhalten . Wenn das Texteingabefeld keinen separaten Wert "beim Laden" und keinen "aktuellen, dynamischen" Wert enthält, warum wird das Kontrollkästchen aktiviert? Wenn das Kontrollkästchen zwei Werte für das aktivierte Attribut enthält, warum hat es keine zwei für seine Klassen- und ID- Attribute? Wenn Sie erwarten, den Wert eines Texteingabefelds zu ändern , und Sie erwarten, dass sich das DOM (dh die "serialisierte Darstellung") ändert und diese Änderung widerspiegelt, warum um alles in der Welt würden Sie dasselbe nicht von einem Eingabefeld von erwarten ? Typ Checkbox auf das markierte Attribut?

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

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

aber derzeit sind attr und prop nicht so unterschiedlich und es gibt fast die gleichen

aber sie bevorzugen Requisiten 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 im HTML-Code sehen können) können und sollten weiterhin mit der Methode .attr () bearbeitet werden.

Nun, eigentlich müssen Sie nichts ändern, wenn Sie attr oder prop oder beides verwenden. Beide funktionieren, aber ich habe in meiner eigenen Anwendung gesehen, dass prop dort funktioniert, wo atrr nicht funktioniert hat, also habe ich meine 1.6 App prop =) aufgenommen

Unterschied HTML-Eigenschaften und -Attribute:

Schauen wir uns zunächst die Definitionen dieser Wörter an, bevor wir den Unterschied in HTML bewerten:

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 Grunde genommen 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 folgende Weise darauf:

• Attribute sind zusätzliche Informationen, die wir in den HTML- Code einfügen können, um bestimmte DOM-Eigenschaften zu initialisieren .
• Eigenschaften 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 neu 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 einem HTML-Element geben, hat eine ähnlich benannte DOM-Eigenschaft.

Weiterhin haben unterschiedliche DOM-Elemente unterschiedliche Eigenschaften. Ein <input>Element verfügt beispielsweise über eine value-Eigenschaft, die für eine <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 überprüfen wir die <div>in der JS-Konsole:

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

Wir sehen die folgenden DOM-Eigenschaften (Chrome Devtools, nicht alle Eigenschaften gezeigt):

• Wir können sehen, dass die Attribut-ID im HTML jetzt auch eine ID-Eigenschaft im DOM ist. Die ID wurde vom HTML-Code initialisiert (obwohl wir sie mit Javascript ändern könnten).
• Wir können sehen, dass das Klassenattribut im HTML keine entsprechende Klasseneigenschaft hat ( classist ein reserviertes Schlüsselwort in JS). Aber eigentlich 2 Eigenschaften, classListund className.