obj.setAttribute（ 'whatever'、value）とobj.whatever = valueの違いは何ですか？

Question

タイトルが示すように、違いは何ですか？

私は後者が前者が少なくともできることができると思います。

私の意見は正しいですか？

PSは：objがDOM要素である

Answer 1

setAttributeはDOM要素メソッドです。これはDOM要素でのみ使用できます。あなた自身のオブジェクトでそれを使用しようとすると、自分で作成しない限り、そのメソッドをサポートしていないので、TypeErrorがスローされます。たとえば：

var myObject = {}; 
myObject.setAttribute('foo', 'bar');   // this will throw a TypeError 

var myDiv = document.createElement('div'); 
myDiv.setAttribute('foo', 'bar');    // this works fine 

しかし、あなたが説明した第二の方法は、独自のオブジェクトにプロパティとメソッドを割り当てるための有効な方法であり、DOMは、オブジェクト（およびDOMは内のオブジェクトの中に焼いたいくつかの特別なものがありますあなたが観察したようなonclickのようなほとんどのブラウザ）。

var myObject = {}; 
myObject.foo = 'bar'; 
console.log(myObject.foo);  // --> 'bar' 
console.log(myObject['foo']); // --> 'bar' 

var myDiv = document.createElement('div'); 
myDiv.foo = 'bar'; 
myDiv.onclick = function() { console.log('clicked!') }; 
// same as: <div foo="bar" onclick="function() {console.log('clicked'!) }"></div> 

あなたはElementインタフェースと、ここでサポートされるメソッドの詳細を読むことができ
：http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614（setAttributeメソッドのためのビットをスクロールダウン）

Answer 2

一つの大きな違いは、変数名になります - 次の例を取る：

また

obj.what-ever = value; 
/// syntax error - the parser attempts to subtract obj.what 
/// from the nonexistent variable 'ever'. 

obj.setAttribute('what-ever',value); 
/// this works! 

、私の知る限り、obj.setAttributeは、ネイティブjavascriptの方法ではありません - ネイティブに、次のように許可されていない名前のオブジェクトにキーを設定します。 obj['@#^&*^'] = value;

Answer 3

1つはプロパティを設定し、もう1つは属性を設定します。

一部の属性は（例えば<input type="password">とmyInput.type), some do not (such asand myInput.className . Some properties do not have an attribute (such as myDiv.getElementsByTagName`として）同じ名前のプロパティに直接マップ。

Internet Explorer 7以下（およびQuirksモードの新しいIE）では、プロパティと属性が互いにマップされているかどうかにかかわらず、setAttributeが同じ名前のプロパティに直接マップするバグがあります。

square backet notationは識別子の代わりに文字列を使用するため、識別子で表現できないオブジェクトのプロパティにアクセスできることに注意してください。例えばfoo.barとfoo['bar']は同じですが、foo['bar-bar']はドット表記を使用して表すことはできません）。