Was ist der Unterschied zwischen Eigenschaften und Attributen in HTML?

408

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?

schalkneethling
quelle
6
Mögliches Duplikat von .prop () vs .attr ()
Naftali aka Neal

Antworten:

826

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.

Šime Vidas
quelle
1
Hey Sime, ich vermute , das ist ziemlich zweideutig, besonders wenn Sie hier einen Blick darauf werfen: w3.org/TR/html4/index/attributes.html , und es gibt keine eindeutige Antwort. Grundsätzlich muss man den Anweisungen in der Zusammenfassung im jQuery-Blog folgen, und selbst dann wird das eine dem anderen zugeordnet und arbeitet in beiden Fällen mit einem leichten Leistungseinbruch, falls Sie prop falsch verwenden, wenn Sie attr
schalkneethling
4
@oss Ihr Link verweist auf eine Liste von HTML-Attributen. Diese Liste ist nicht mehrdeutig - das sind Attribute.
Šime Vidas
Gibt es einige Dokumente über die Beziehung? @ ŠimeVidas
SKing7
3
Wo finde ich eine vollständige Liste der Attribute für Eigenschaften (wie for-> htmlFor) und in ähnlicher Weise eine Liste der Eigenschaften, die ihren Anfangswert von einem Attribut beziehen, ihn aber nicht widerspiegeln ( input.value). Ich gehe davon aus, dass dies irgendwo in der Quelle einer Bibliothek wie github.com/Matt-Esch/virtual-dom liegt, aber es ist nicht wirklich dokumentiert.
sstur
1
@Pim Ich habe es selbst nicht gelesen, aber diese 4-teilige Artikelserie scheint eine großartige Ressource zu sein: twitter.com/addyosmani/status/1082177515618295808
Šime Vidas
53

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.

subtleseeker
quelle
Dieses Beispiel ist nicht richtig: Das colspanAttribut hat die colSpanEigenschaft. ... Also, welches Attribut hat jetzt keine verwandte Eigenschaft?
Robert Siemer
46

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.

sibidiba
quelle
21
Dies ist keine Antwort, aber ich stimme Ihnen zu. Es ist total verrückt.
Samuel
Ja, dieses Konzept ist scheiße und sollte nicht so schlecht standardisiert werden. Dies war einer der Fälle (wie zum Beispiel innerHTML), die im alten IE gut waren und von den Standards übernommen werden sollten. Eigenschaften und Attribute wurden nach Möglichkeit synchronisiert, sogar benutzerdefinierte Attribute, wodurch eine sehr gut lesbare js-Punktsyntax erzielt wurde. HTML5 macht benutzerdefinierte HTML-Tags zu erstklassigen Bürgern, benutzerdefinierte Attribute sollten es auch sein. Diese Funktion wird entfernt, da der alte IE immer noch ein echtes Problem darstellt. Wir sehen gerade erst, dass viele Unternehmen traditionell mit dem IE für alte Systeme stecken bleiben und feststellen, dass sie in IE10 defekt sind.
Mike Nelson
48
Es ist nicht verrückt. Du hast es falsch verstanden. Das checkedAttribut wird durch die defaultCheckedEigenschaft dargestellt (ebenfalls für eine Texteingabe wird das valueAttribut durch die defaultValueEigenschaft dargestellt). Eine zweite Eigenschaft checkedist erforderlich, um darzustellen, ob das Kontrollkästchen aktiviert ist, da dies ein wesentlicher Bestandteil der Funktionalität eines Kontrollkästchens ist: Es ist interaktiv und kann vom Benutzer geändert (und auf die Standardeinstellung zurückgesetzt werden, wenn eine Schaltfläche zum Zurücksetzen des Formulars vorhanden ist) auf eine Weise, die ein anderes Attribut wie idnicht ist. Es hat nichts mit der Tatsache zu tun, dass es sich um ein boolesches Attribut handelt.
Tim Down
3
@ TimDown - Danke. Das hat mich tatsächlich über die WTF gebracht? Buckel.
Pedz
12
@TimDown Ich halte es immer noch für "verrückt", weil bei jedem logischen Ansatz der Eigenschaftsname und der Attributname übereinstimmen oder zumindest kein Attributname und kein Eigenschaftsname übereinstimmen, die nicht miteinander zusammenhängen (dh das aktivierte Attribut bezieht sich auf defaultChecked Eigenschaft, während die überprüfte Eigenschaft nicht in Beziehung steht). Tatsächlich besteht der logische Ansatz, den jeder zu Beginn annimmt, darin, die Attribute und Eigenschaften überhaupt nicht zu trennen. Attribute sollten nicht unveränderlich sein, sondern immer die Eigenschaftswerte widerspiegeln. Es sollte keinen Unterschied zwischen den beiden geben.
Dallas
10

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

Daniel Ruf
quelle
Hey Daniel, das habe ich gelesen. Es scheint nur eine eindeutige Definition zu geben, um die beiden zu trennen, da einige der unten erwähnten Sime-Elemente auch dem HTML-Element hinzugefügt werden können, z. B. alt. Ich werde weiterhin einige der HTML-Spezifikationen lesen und prüfen, ob es tatsächlich eine Möglichkeit gibt, die beiden in der Praxis klar zu unterscheiden.
schalkneethling
3
Dieses Dokument bezieht sich auf SVG, nicht auf HTML.
Luzado
5

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):

HTML-Eigenschaften und -Attribute

  • 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.
Willem van der Veen
quelle