5行简单代码，谁来解释一下这个现象？

Question

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节点的属性到底有怎样千丝万缕的联系？求大牛解释原理。

Answer 1

难道这么写可以代替a.setAttribute()吗
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
貌似是反过来的，ajax兴起之前代码都是这样写的，但ajax兴起之后因为IE的内存泄露漏洞等原因，开始使用a.setAttribute()等方法。

Answer 2

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中。

Answer 3

myname只是dom对象的属性，跟dom节点没关系不能代替a.setAttribute()，setAttribute是用来改变dom对象对应的dom节点的，而a.myname只是对dom对象的操作om对象的属性与dom节点的属性，一些特殊的属性如id，又如input的id，name，type等特殊的属性，是共通的，可以直接类似a.id来设置，就会直接在dom节点上显示。而一般自定义的属性只能通过setAttribute来设置才能在dom节点上显示出来。

Answer 4

但是alert(b.myname);为什么也是a1呢，设置a的属性 怎么 把b的属性也同时设置上了？呵呵 ，不过又长见识了，谢了

Answer 5

先表达一下感想，呵呵，学习了。
那么，我第二次写的var b = document.getElementById('a');这个b应该是用HTMLDivElement构造出的一个新对象，这个对象上，为什么会有myname属性呢？

Answer 6

回6,7楼
var a = document.getElementById('a');
var b = document.getElementById('a');
并没有创建一个新对象.a和b都是一个引用型的对象.他们都是指向div#a这个HTMLDivElement对象

Answer 7

编辑下我9楼说的..
var a = document.getElementById('a');
var b = document.getElementById('a');
创建的是两个引用型对象,而没有创建两个HTMLDivElement对象.
a和b都是指向div#a这个HTMLDivElement对象.

Answer 8

用伪代码表示下/*
 *这里是模拟浏览器的伪代码;
 */
function HTMLDivElement(htmlStr){
this.tagName = "div";
this.attributes = new NamedNodeMap(htmlStr);
//然后id和name属性是需要添加到HTMLDivElement上的.所以
this.id = this.attributes.id;
this.name = this.attributes.name;
}
function NamedNodeMap(htmlStr){
//DOM的属性都在这里
//通过字符串分析出几个属性值
this.id = "a";
this.name = "b";
this.cusAttr="11";
}
var divA = new HTMLDivElement('<div id="a" name="b" cusAttr="11"></div>');
/*
 *divA的对象结构就是这样的
{
tagName: "div",
attributes: {
id: "a",
name: "b",
cusAttr: "11"
},
id: "a",
name: "b"
}
 *//*
 *这里是你的代码;
 */
var a = document.getElementById('a'); //其实就是a=divA
var b = document.getElementById('a'); //其实就是b=divA

Answer 9

个人对于这个的理解是这样的：
setAttribute()是对dom元素本身已经带有的属性进行赋值；
而a.myname = 'a1'这个是给dom元素新增一个自定义的属性并赋值

Answer 10

楼上有误吧，setAttribute()不光可以给本身已带有的属性赋值，你随便写个属性名字，也可以加到节点上的

Answer 11

用chrome打开页面，在element标签页里选中div a，在右边“Properties”里找“div#a”，你会发现多了属性“myname”。这种任意增加属性的功能应该是javascript的。执行
var a = document.getElementById('a');就在javascript运行环境中创建了一个对象，作为操作div a的代理。页面生命周期内，这个代理一旦创建不会销毁，以后执行var b = document.getElementById('a')时不再新建对象，而只是引用拷贝。以id为key可以很容易实现这一点。对象的内容可能放在当前进程里，或者页面缓存里？以上只是猜测。