HTML kaynak kodunu yazarken , HTML öğelerinizde öznitelikler tanımlayabilirsiniz . Ardından, tarayıcı kodunuzu ayrıştırdığında, karşılık gelen bir DOM düğümü oluşturulur. Bu düğüm bir nesnedir ve bu nedenle özellikleri vardır .
Örneğin, bu HTML öğesi:
<input type="text" value="Name:">
2 özniteliğe ( typeve value) sahiptir.
Tarayıcı bu kodu ayrıştırdıktan sonra, bir HTMLInputElement nesnesi oluşturulur ve bu nesne düzinelerce özellik içerir: accept, accessKey, align, alt, nitelikler, autofocus, baseURI, işaretli, childElementCount, childNodes, children, classList, className, clientHeight vb.
Belirli bir DOM düğümü nesnesi için özellikler o nesnenin özellikleridir ve öznitelikler attributeso nesnenin özelliğinin öğeleridir .
Belirli bir HTML öğesi için bir DOM düğümü oluşturulduğunda, özelliklerinin çoğu aynı veya benzer adlara sahip özniteliklerle ilgilidir, ancak bire bir ilişki değildir. Örneğin, bu HTML öğesi için:
<input id="the-input" type="text" value="Name:">
karşılık gelen DOM düğümü olacaktır id, typeve value(diğerlerinin yanı sıra) özellikleri:
idTesiste olduğunu yansıyan özellik için idöznitelik: özelliği alınıyor öznitelik değerini okur ve özelliğini ayarlayarak özellik değerini yazar. ida, saf yansıyan özelliği, düzeltme veya değeri sınırlamaz.
typeTesiste olduğunu yansıyan özellik için typeöznitelik: özelliği alınıyor öznitelik değerini okur ve özelliğini ayarlayarak özellik değerini yazar. bilinen değerlerletype sınırlı olduğu için (örneğin, bir girişin geçerli türleri) salt yansıtılan bir özellik değildir . Eğer olsaydı , o zaman verir ama verir .<input type="foo">theInput.getAttribute("type")"foo"theInput.type"text"
Buna karşılık, valueözellik valueözniteliği yansıtmaz . Bunun yerine, girişin geçerli değeridir . Kullanıcı giriş kutusunun değerini el ile değiştirdiğinde, valueözellik bu değişikliği yansıtır. Kullanıcı "John"giriş kutusuna girerse , o zaman:
theInput.value // returns "John"
buna karşılık:
theInput.getAttribute('value') // returns "Name:"
valueÖzelliği yansıtan akım ise, giriş kutusu içindeki metin içeriğine valueözellik içeren ilk metin içeriği valueHTML kaynak kodundan öznitelik.
Şu anda metin kutusunun içinde ne olduğunu bilmek istiyorsanız, özelliği okuyun. Bununla birlikte, metin kutusunun başlangıç değerinin ne olduğunu bilmek istiyorsanız, niteliği okuyun. Veya defaultValueözelliğin saf bir yansıması olan valueözelliği kullanabilirsiniz:
theInput.value // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue // returns "Name:"
Doğrudan kendi özelliğini (yansıtacak birkaç özellik vardır rel, id), bazı hafif-farklı adlarla doğrudan yansımaları (vardır htmlForyansıtan forözelliği, classNameyansıtan classözelliği) onların niteliğini yansıtacak ama birçok kısıtlamalar / modifikasyonlar (ile src, href, disabled, multiple) ve bu yüzden üzerinde. Spec , çeşitli yansıma türlerini kapsar.
