Ich denke, Tim hat es ganz gut gesagt , aber lasst uns zurücktreten:
Ein DOM-Element ist ein Objekt, eine Sache im Speicher. Wie die meisten Objekte in OOP verfügt es über Eigenschaften . Es enthält auch separat eine Karte der für das Element definierten Attribute (normalerweise aus dem Markup, das der Browser gelesen hat, um das Element zu erstellen). Einige Eigenschaften des Elements erhalten ihre Anfangswerte von Attributen mit demselben oder ähnlichen Namen ( value
erhält seinen Anfangswert vom Attribut "value"; href
erhält seinen Anfangswert vom Attribut "href", aber es ist nicht genau der gleiche Wert; className
vom Attribut "Klasse"). Andere Eigenschaften erhalten ihre Anfangswerte auf andere Weise: Beispielsweise parentNode
erhält die Eigenschaft ihren Wert basierend auf dem übergeordneten Element.style
Eigenschaft, ob es ein "style" -Attribut hat oder nicht.
Betrachten wir diesen Anker auf einer Seite unter http://example.com/testing.html
:
<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>
Einige unentgeltliche ASCII-Kunstwerke (und viele Dinge weglassen):
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
| HTMLAnchorElement |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
| href: "http://example.com/foo.html" |
| Name: "fooAnchor" |
| id: "fooAnchor" |
| className: "test one" |
| Attribute: |
| href: "foo.html" |
| Name: "fooAnchor" |
| id: "fooAnchor" |
| Klasse: "test one" |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
Beachten Sie, dass die Eigenschaften und Attribute unterschiedlich sind.
Obwohl sie unterschiedlich sind, schreiben einige Eigenschaften auf das Attribut zurück, von dem sie abgeleitet wurden, wenn Sie sie festlegen, da sich all dies entwickelt hat, anstatt von Grund auf neu entworfen zu werden. Aber nicht alle tun dies, und wie Sie von href
oben sehen können, ist das Mapping nicht immer ein direktes "Weitergeben des Werts", manchmal ist eine Interpretation erforderlich.
Wenn ich davon spreche, dass Eigenschaften Eigenschaften eines Objekts sind, spreche ich nicht abstrakt. Hier ist ein Nicht-jQuery-Code:
var link = document.getElementById('fooAnchor');
alert(link.href); // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"
(Diese Werte entsprechen den meisten Browsern; es gibt einige Abweichungen.)
Das link
Objekt ist eine echte Sache, und Sie können sehen, dass es einen echten Unterschied zwischen dem Zugriff auf eine Eigenschaft und dem Zugriff auf ein Attribut gibt .
Wie Tim sagte, die überwiegende Mehrheit will der Zeit, wir mit Eigenschaften zu arbeiten. Dies liegt zum Teil daran, dass ihre Werte (sogar ihre Namen) in allen Browsern konsistenter sind. Wir möchten meistens nur mit Attributen arbeiten, wenn keine zugehörige Eigenschaft vorhanden ist (benutzerdefinierte Attribute) oder wenn wir wissen, dass für dieses bestimmte Attribut das Attribut und die Eigenschaft nicht 1: 1 sind (wie bei href
und "href" oben). .
Die Standardeigenschaften sind in den verschiedenen DOM-Spezifikationen aufgeführt:
Diese Spezifikationen haben ausgezeichnete Indizes und ich empfehle, Links zu ihnen griffbereit zu halten. Ich benutze sie die ganze Zeit.
Zu den benutzerdefinierten Attributen gehören beispielsweise alle data-xyz
Attribute, die Sie möglicherweise auf Elemente setzen, um Metadaten für Ihren Code bereitzustellen (jetzt, da dies ab HTML5 gültig ist, solange Sie sich an das data-
Präfix halten). (Neuere Versionen von jQuery ermöglichen Ihnen den Zugriff auf data-xyz
Elemente über die data
Funktion, aber diese Funktion ist nicht nur ein Accessor für data-xyz
Attribute [sie macht mehr und weniger als das]. Wenn Sie ihre Funktionen nicht tatsächlich benötigen, würde ich die attr
Funktion zur Interaktion verwenden mit data-xyz
Attribut.)
attr
Früher hatte die Funktion eine verworrene Logik, um das zu bekommen, was sie wollten, anstatt das Attribut buchstäblich zu bekommen. Es verschmolz die Konzepte. Der Umzug nach prop
und attr
sollte sie entmischen. Kurz in v1.6.0 jQuery zu weit gegangen in dieser Hinsicht, aber die Funktionalität wurde schnell wieder hinzugefügt , um attr
zu handhaben, die gemeinsame Situationen , in denen Menschen nutzen , attr
wenn technisch sollen sie nutzen prop
.