点运算符与attribute的几点区别

操作Dom元素时，我们经常可以用attribute的读写方法与点运算符进行运算，大部分的情况下，它们的运算结果是一致的，但也存在一些例外情况。

1. attribute值不能设置为对象

//  如果设置的值为对象，将会调用对象的toString方法
username.setAttribute("expr", {
   "username" : "yiifaa", 
   toString () {
            return "yiifaa";
}});
//  输出yiifaa，而不是'Object object'
alert(username.getAttribute("expr"));
//  输出undefined，而不是yiifaa
alert( username.getAttribute("expr").username);

如果确实需要将属性的值设置为对象，可以使用JSON.stringify与JSON.parse方法。

//  将对象进行序列化
username.setAttribute("expr", 
        JSON.stringify({"username" : "yiifaa"})
    );
//  取值时对其进行反序列化，输出yiifaa
alert(JSON.parse(username.getAttribute("expr")).username)

2. 点运算符不能读取非标准属性

假定HTML片段如下：

<input type="text" id="username" expr="yiifaa"/>

此时获取到的username对象，不能通过getAttribute获取到expr属性。

 var username = document.getElementById("username");
//  输出undefined
alert(username.expr);

将expr改为alt、title，则点运算符可以顺利读出alt、title属性。