Soru DOM nesnelerine isteğe bağlı özellik ekleyebilir miyim?


Gibi JavaScript DOM nesnelerine isteğe bağlı özellikler ekleyebilir miyim <INPUT> veya <SELECT> elementler? Ya da, bunu yapamazsam, kendi nesnelerimı bir referans özelliği aracılığıyla sayfa öğeleriyle ilişkilendirmenin bir yolu var mı?


32
2017-11-23 16:41


Menşei




Cevaplar:


Elbette, insanlar bunu yıllardır yapıyor. Dağınık olduğu için tavsiye edilmez ve mevcut özelliklerle uğraşabilirsiniz.

İle kod döngü yapıyorsanız for..in kodunuz kırılabilir, çünkü şimdi bu yeni eklenen özellikler aracılığıyla numaralandırıyor olacaksınız.

JQuery gibi bir şey kullanmanızı öneririm .data metadata nesnelere bağlı tutar. Bir kütüphane kullanmak istemiyorsanız, tekrar uygulayın jQuery.data


21
2017-11-23 16:42



Havalı ... data jQuery tarafından kullanılan veya ona herhangi bir değer atamak serbest miyim? - Tony the Pony
$.data jQuery tarafından tanımlanır. Onu kullanırsın $('#el').data('key', 'value'). - meder omuraliev
Onun $(element).data('name', value) bir değer belirlemek $(element).data('name') okumak için - Rocket Hazmat
Manuel DOM yöntemini nasıl yapacağınızı biliyorsunuzdur. el['data-foo'] = 'value'; - meder omuraliev
İle hatalar / tutarsızlıklar var getAttribute ve setAttribute IE kullanmaya karar vermezseniz $.data ile önceliğiniz data- - meder omuraliev


Evet, kendi özelliklerinizi DOM nesnelerine ekleyebilirsiniz, ancak çarpışmaların ve döngüsel referansların adının önüne geçmek için özen göstermeyi unutmayın.

document.getElementById("myElement").myProperty = "my value";

HTML5, biçimlendirme yoluyla öğelere veri eklemenin geçerli bir yolunu tanıttı. data- öznitelik öneki. Bu yöntemi HTML 4 belgelerinde de sorun olmadan kullanabilirsiniz, ancak bunlar doğrulanmayacaktır:

<div id="myElement" data-myproperty="my value"></div>

Kullanarak JavaScript kullanarak erişebilirsiniz. getAttribute():

document.getElementById("myElement").getAttribute("data-myproperty");

16
2017-11-23 16:43



Bu son satır olmalı setAttribute()? - alex
@alex: nope, yine de bir hata yaptı :-) - Andy E
veri-öznitelikleri, genel çalışma zamanı nesnelerini değil, yalnızca bir dom nesnesinde yeni bir özellik ayarlayabilirken, dizeleri (ya da dizilere seri hale getirilebilir / seri hale getirilebilir nesneler) depolayabilir. - Triynko
Dairesel referanslarla ilgili sorun nedir? A'ya referansı olan bir B nesnesine atıfta bulunan bir A nesnesi genel olarak bir sorun değildir, bu yüzden bir DOM elemanına eklenen keyfi özellikler durumunda kaçınılması gereken durum nedir? - matteo
@matteo Dairesel bir referans could bir bellek sızıntısına yol açar. stackoverflow.com/questions/7347203/... - Yay295


Birisi 2015 yılında merak ediyorsa, evet, yapabilirsiniz - ve jQuery sadece bunu yapıyor veri. Sadece satıcı önekleri veya zamana dayalı rastgele sonekler (jQuery) gibi geleceğe hazır isimleri seçin.


7
2017-07-31 22:33





Nesneye özellik eklemek mi yoksa öğeye öznitelikleri mi eklemek istiyorsunuz?

Kullanarak öznitelikleri ekleyebilirsiniz. setAttribute

var el = document.getElementById('myelement');
el.setAttribute('custom', 'value');

veya javascript nesnesine özellikler ekleyebilirsiniz.

var el = document.getElementById('myelement');
el.myProperty = 'myValue';

4
2017-11-23 16:45





ECMAScript 6'da, WeakMap'iniz vardır; bu, özel verilerinizi bir DOM öğesiyle (veya başka bir nesneyle) ilişkilendirdiğinizde, bu nesne mevcut olduğu sürece.

const wm = new WeakMap();
el = document.getElementById("myelement");
wm.set(el, "my value");
console.log(wm.get(el)); // "my value"

Diğer cevaplardan farklı olarak, bu yöntem hiçbir zaman bir mülkün veya verinin adıyla bir çatışmanın olmayacağını garanti eder.


4
2018-04-17 13:24





Gerekirse, standart HTML niteliklerini kullanmayın. İşte özel özellikleri kullanarak bir öğretici:

http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

Bu HTML5, ancak geriye dönük uyumlu.


1
2017-11-23 16:45