Question

As the title suggests, what’s the difference(s)?

I guess that the latter one can do what the former can at least.

Is my opinion right?

P.S: obj is a DOM Element

Answer 1

setAttribute is a DOM Element method — it can only be used on DOM elements. If you try to use it on your own objects a TypeError will be thrown as they do not support that method unless you create it yourself. For example:

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

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

However, the second method you have described is a valid way to assign properties and methods to your own objects and DOM objects (and there are a few special ones baked in for DOM objects in most browsers, such as onclick, like you’ve observed).

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>

You can read more about the Element interface and supported methods here: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614 (scroll down a bit for setAttribute)