属性节点的特征：

1.nodeType值为11

2.parentNode值为null

3.在HTML中不包含子元素

注意：（1）尽管属性也是节点，但却不认为是DOM文档树的一部分。（2）开发人员常用getAttribute（）、setAttribute( )、removeAttribute( )等方法来操作属性。

方法：

（1）createAttribute(name)+value+setAttributeNode(属性节点）

（2）setArrtibute(name,value)  

（3）点方法 ：DOM节点.name="value";《特殊属性为，class->className,for->htmlFor》

注意：setArrtibute如果用来设置原来已经存在的类时，新的类值将覆盖掉原来的值，尤其在添加class类时，要先看看原来有没有class类存在，如果有的话，那么只能用添加类的操作，不能用设置类的操作。

实例：

方法：

（1）element.attributes["name"].value

（2）element.getAttributeNode（"name"）.value

（3）element.getAttribute("name");      返回的是字符串

（4）element.name;         返回字符串；className,for->htmlFor>

（5）只能用来读取class的属性值。element.classList;    返回属性列表；

实例：

 注意：通过getAttribute(),点方法得到的属性值是字符串类型，

当有多个class属性值时，需要利用split（）函数进行字符串切割；

当只有一个class属性值时，element.clsaaList返回值仍旧是数组列表，需要加索引取值：element.classList[0];

方法：

removeAttribute(name);

实例：

 上面提到的getAttribute（）、setAttribute( )、removeAttribute( )方法可以对属性节点中的各种属性（id,class,align,data-*）进行设置，读取，移除的操作.

这里的classList仅仅针对class属性进行操作

（1）element.classList.length；返回类列表中类的数量个数

（2）element.classList.add("name1","name2",......);向元素中添加一个或多个类，如果已存在则不会再添加

（3）element.classList.remove("name1","name2",......);删除元素中指定的一个或多个类名，删除不存在的不报错。

（4）element.classList.toggle("name");切换类名：若有则移除，返回false；若无则添加，返回true；

（5）element.classList.contains("name");判断是否包含指定的类型名。true包含，false不包含。

（6）element.classList.item(index);返回指定index值的类名。

添加自定义属性方法：

（1）element.setAttribute("data-*);

（2）element.dataset.name="value"

读取自定义属性的方法： 

（1）element.getAttribute("name");

（2） element.dataset.name;

这里javascript获取和设置的CSS样式均体现在指定DOM节点的内联style样式；

注意：回流和重绘的触发，尽量不要一个一个的改变样式属性

（1）element.style.name="value";

（2）element.setAttribute("style","name1:value1;name2:value2");

可以设置一个或多个style样式。当一次设置多个时就能有效避免回流和重绘。

 （3）element.style.setProperty("name","value");   只能设置一个style属性 

        eg:element.style.setProperty("color","blue");  （4）使用element.style.cssText = "name1:value1;name2:value2";可以添加一个或多个style样式

          最终使用形式：element.style.cssText  +=  ";name1:value1;name2:value2";

存在问题及优化：

1.使用element.style.cssText设置style样式，会把原有的style中的样式覆盖掉。

解决方法：使用累加style样式的方法。

2.在IE6/7/8版本下，element.style.cssText读取的style属性值会忽略掉最后的“；”，

IE6/7/8下cssText值与IE9/Firefox/Safari/Chrome/Opera不同

解决方法：element.style.cssText  +=  ";name1:value1;name2:value2";加上前置分号“；”,在IE高版本和Chrome等浏览器中会自动去重。