5行简单代码，谁来解释一下这个现象？
js代码如下：
var a = document.getElementById('a');
a.myname = 'a1';
alert(a.myname);

var b = document.getElementById('a');
alert(b.myname);

文档中只有一个光杆司令<div id="a"></div>

现象：执行这段代码会弹出两次a1，myname这个属性好像是已经跑到了dom结构中去了，但是这个div并未出现这个属性。难道这么写可以代替a.setAttribute()吗？dom对象的属性与dom节点的属性到底有怎样千丝万缕的联系？

求大牛解释原理。
------解决方案--------------------
div里还有myname吗？

------解决方案--------------------
1，HTML元素，也会被浏览器解析成一个js对象。例如你上面那个div。只不过他的构造函数是HTMLDivElement（通过chrome开发人员工具console.dir(document.getElementById("a")) 可以看到）
2，js对象的属性跟DOM中出现的属性不是同一个概念。我们可以理解js对象的属性是property，DOM的属性为attribute。
3，浏览器在解析DOM树的时候，会把DOM的一些属性（attribute）也解析为HTMLDivElement对象的属性（property）。你可以通过a.myname = 'a1'来设置这个HTMLDivElement对象的属性（property）。但是这个属性不会被加到DOM中。
------解决方案--------------------
myname只是dom对象的属性，跟dom节点没关系

不能代替a.setAttribute()，setAttribute是用来改变dom对象对应的dom节点的，而a.myname只是对dom对象的操作

om对象的属性与dom节点的属性，一些特殊的属性如id，又如input的id，name，type等特殊的属性，是共通的，可以直接类似a.id来设置，就会直接在dom节点上显示。而一般自定义的属性只能通过setAttribute来设置才能在dom节点上显示出来。