Jaký je rozdíl mezi vlastnostmi a atributy v HTML?

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 pro id 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 pro type 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" ale theInput.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ímco value atribut obsahuje počáteční textový obsah value 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 odrazem value 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ů.