Was ist der Unterschied zwischen Eigenschaften und Attributen in HTML?

Question

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

Ein Blick auf die Liste auf der jQuery 1.6.1 Versionshinweise (ganz unten) kann man die HTML-Eigenschaften und -Attribute wie folgt klassifizieren:

• Eigenschaften: Alles, was entweder einen booleschen Wert hat oder von UA berechnet wird, wie z. B. selectedIndex.

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

Was denken Sie?

Answer 1

Update zu meiner Antwort ein Zitat aus https://angular.io/guide/binding-syntax

HTML-Attribute und DOM-Eigenschaften

Attribute initialisieren DOM-Eigenschaften und Sie können sie konfigurieren, um das Verhalten eines Elements zu ändern, aber Eigenschaften sind Merkmale von DOM-Knoten.

• Einige HTML-Attribute haben eine 1:1-Zuordnung zu den Eigenschaften, zum Beispiel id.

• Einige HTML-Attribute haben keine entsprechenden Eigenschaften, zum Beispiel aria-*.

• Einige DOM-Eigenschaften haben keine entsprechenden Attribute, zum Beispiel textContent.

Denken Sie daran, dass HTML-Attribute und DOM-Eigenschaften unterschiedliche Dinge sind, auch wenn sie denselben Namen haben.

Beispiel 1: an Wenn der Browser gerendert wird, erstellt er einen entsprechenden DOM-Knoten mit einer value-Eigenschaft und initialisiert diesen Wert auf "Sarah".

<input type="text" value="Sarah">

Wenn der Benutzer Sally in das Feld eingibt, wird die Werteigenschaft des DOM-Elements zu Sally. Wenn Sie sich jedoch den Wert des HTML-Attributs mithilfe von input.getAttribute('value') ansehen, können Sie feststellen, dass das Attribut unverändert bleibt - es gibt "Sarah" zurück.

Das HTML-Attribut value gibt den Anfangswert an, die DOM value-Eigenschaft ist der aktuelle Wert.

Beispiel 2: eine deaktivierte Schaltfläche Die deaktivierte Eigenschaft einer Schaltfläche ist standardmäßig falsch, so dass die Schaltfläche aktiviert ist.

Wenn Sie das Attribut disabled hinzufügen, initialisieren Sie die Eigenschaft disabled der Schaltfläche auf true, wodurch die Schaltfläche deaktiviert wird.

<button disabled>Test Button</button>

Durch Hinzufügen und Entfernen des Attributs disabled wird die Schaltfläche deaktiviert bzw. aktiviert. Der Wert des Attributs ist jedoch irrelevant, weshalb Sie eine Schaltfläche nicht aktivieren können, indem Sie Still Disabled schreiben.

Um den Zustand der Schaltfläche zu steuern, setzen Sie stattdessen die Eigenschaft disabled.

Vergleich von Eigenschaften und Attributen Obwohl Sie technisch gesehen die Attributbindung [attr.disabled] setzen könnten, unterscheiden sich die Werte insofern, als die Eigenschaftsbindung ein boolescher Wert sein muss, während die entsprechende Attributbindung davon abhängt, ob der Wert null ist oder nicht. Betrachten Sie das Folgende:

<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">

In der ersten Zeile, die die Eigenschaft disabled verwendet, wird ein boolescher Wert eingesetzt. In der zweiten Zeile, die das Attribut disabled verwendet, wird auf null geprüft.

Im Allgemeinen ist die Bindung von Eigenschaften der Bindung von Attributen vorzuziehen, da ein boolescher Wert einfach zu lesen ist, die Syntax kürzer ist und eine Eigenschaft leistungsfähiger ist.