Po změnách provedených v jQuery 1.6.1 jsem se snažil definovat rozdíl mezi vlastnostmi a atributy v HTML.
Při pohledu na seznam v poznámkách k vydání jQuery 1.6.1 (v dolní části) se zdá, že lze klasifikovat vlastnosti a atributy HTML následovně:
-
Vlastnosti:Všechny, které mají buď booleovskou hodnotu, nebo které jsou vypočteny UA, jako je selectedIndex.
-
Atributy:‚Atributy‘, které lze přidat k prvku HTML, který není ani booleovský, ani neobsahuje hodnotu vygenerovanou UA.
Myšlenky?
Odpověď
Při psaní zdrojového kódu HTML můžete definovat atributy na prvky HTML. Poté, jakmile prohlížeč analyzuje váš kód, vytvoří se odpovídající uzel DOM. Tento uzel je objekt, a proto má vlastnosti .
Například tento prvek HTML:
<input type="text" value="Name:">
má 2 atributy (type
a value
).
Jakmile prohlížeč analyzuje tento kód, vytvoří se objekt HTMLInputElement a tento objekt bude obsahovat desítky vlastností, jako jsou:accept, accessKey, align, alt, atributy, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight atd.
Pro daný objekt uzlu DOM jsou vlastnosti vlastnostmi tohoto objektu a atributy jsou prvky attributes
vlastnost tohoto objektu.
Když je pro daný prvek HTML vytvořen uzel DOM, mnoho jeho vlastností se vztahuje k atributům se stejnými nebo podobnými názvy, ale nejedná se o vztah jedna k jedné. Například pro tento HTML element:
<input id="the-input" type="text" value="Name:">
odpovídající uzel DOM bude mít id
,type
a value
vlastnosti (mimo jiné):
-
id
vlastnost je reflektovaná vlastnost proid
atribut:Získání vlastnosti přečte hodnotu atributu a nastavení vlastnosti zapíše hodnotu atributu.id
je čistý odráží vlastnost, nemění ani neomezuje hodnotu. -
type
vlastnost je reflektovaná vlastnost protype
atribut:Získání vlastnosti přečte hodnotu atributu a nastavení vlastnosti zapíše hodnotu atributu.type
není čistě reflektovaná vlastnost, protože je omezena na známé hodnoty (např. platné typy vstupu). Pokud jste měli<input type="foo">
a potétheInput.getAttribute("type")
vám dává"foo"
aletheInput.type
vám dává"text"
. -
Naproti tomu
value
vlastnost neodrážívalue
atribut. Místo toho je to aktuální hodnota vstupu. Když uživatel ručně změní hodnotu vstupního pole,value
vlastnost bude tuto změnu odrážet. Pokud tedy uživatel zadá"John"
do vstupního pole a poté:theInput.value // returns "John"
zatímco:
theInput.getAttribute('value') // returns "Name:"
value
vlastnost odráží aktuální text-content uvnitř vstupního pole, zatímcovalue
atribut obsahuje počáteční textový obsahvalue
atribut ze zdrojového kódu HTML.Pokud tedy chcete vědět, co je aktuálně uvnitř textového pole, přečtěte si vlastnost. Pokud však chcete vědět, jaká byla počáteční hodnota textového pole, přečtěte si atribut. Nebo můžete použít
defaultValue
vlastnost, která je čistým odrazemvalue
atribut:theInput.value // returns "John" theInput.getAttribute('value') // returns "Name:" theInput.defaultValue // returns "Name:"
Existuje několik vlastností, které přímo odrážejí jejich atribut (rel
, id
), některé jsou přímé odrazy s mírně odlišnými názvy (htmlFor
odráží for
atribut, className
odráží class
atribut), mnohé z nich odrážejí jejich atribut, ale s omezeními/úpravami (src
, href
, disabled
, multiple
), a tak dále. Specifikace pokrývá různé druhy odrazů.