attribute

[cy0707]

操作特性的DOM方法有三个

1. getAttibute()
2. setAttibute()
3. removeAttibute()
   这三个方法可以针对任何特性使用，包括哪些以HTMLElement类型属性的形式定义的特性。

getAttribute()

var div = document.getElementById("div");
//取得class的name;
console.log(div.getAttibute("class"));

1. 用getAttibute()方法时，传递的参数是与实际的特性名相同，例如要取得class特性的话，那就直接传递class,而对于通过对象访问属性的话，就需要用className。
2. 如果特性不存在那么该方法会返回null 。
3. 该方法可以取得自定义属性（即标准HTML语言中没有的特性）的值
4. 特性名是不区分大小写的ID与id是一样的
5. HTML5中规定中，自定义特性应该加上data-前缀以便验证
   例如：取得自定义属性值

<div hello-suan="hello" id="div">hello</div>

var div = document.getElementById("div");
console.log(div.getAttribute("hello-suan"));

getAttribute()取得特性与通过对象取得属性的区别

1. 只有公认的（非自定义的）特性才会以属性的形式添加到DOM对象中。自定义的会访问不到，会返回undefined的(但是IE除外，他会为自定义特性创建属性)。
2. getAttribute(“div.style”)会得到一个css文本,而通过属性就会得到一个对象。
3. getAttribute(“div.onclick”)等等的事件处理程序会得到相应代码的字符串，而onclick属性的话，会得到一个js函数。如果没找到就会返回null
   所以，对于以上差别，通常取得特性值的话，用对象的属性来取得，只有对于自定义的特性时，才会使用getAttribute()。

setAttribute()设置特性

1. 该方法接受两个参数一个要设置的特性名，一个是特性值
2. 改方法可以操作HTML的特性，也可以操作自定义特性
3. 通过该方法设置的特性名会被统一转换为小写形式，例如“ID”转为“id”。
4. 通过的DOM元素添加一个自定义属性时，改特性不会自动成为元素的特性。

//设置特性
div.setAttribute("id","hello");

//添加一个自定义属性
div.hello-suan = "hello";
//并不会成为元素的特性
console.log(div.getAttribute("hello-suan"));
//放回null

removeAttribute()移除特性

改方法是彻底删除元素的特性，该方法不仅会清除特性值，也会从元素中完全删除特性。

//设置特性
div.removeAttribute("id");