javascript - element.setAttribute('prop',value) vs element.prop = value

Question

DOM 要素用の setAttribute メソッドがあります。

https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

下の使い方とどう違うの？

 domElement.propName = value

どちらのアプローチにも利点はありますか?

ありがとう。

Answer 1

domElement.setAttribute('propName', obj)XML 属性を設定すると、文字列に変換されて DOM タグに追加されます。

domElement.propNameexpando プロパティを設定している場合、任意のタイプにすることができます。DOM オブジェクトの実装をラップする JS オブジェクトに設定しています。

のようなパーサーによって認識される属性を扱っていない限り、同じ効果はありませんsrc,id,value。これらのプロパティは expando プロパティにコピーされますが、多くのうさぎの穴があり、確実に機能しない場合があります (通常は、expando が のように文字列を取らない場合onclick, checked) 。

この例は、それらが異なることを示しています。

domElement.setAttribute('someProp', 5);
console.log(domElement.someProp); // undefined
domElement.someProp = 10; 
console.log(domElement.someProp); // 10
console.log(domElement.getAttribute('someProp')); // "5" -> it's a string 

常に DOM expando プロパティを使用すると、問題が発生する可能性が低くなります。setAttribute を使用する唯一のケースは、( を使用して) ノードをシリアル化する必要があり、outerHTMLその属性をシリアル化に反映させたい場合です。