每个HTML属性对应相应的DOM对象操作

属性操作

• getAttribute()
  • 获取元素的attribute值

读:
var attribute = Element.getAttribute(attributeName)  //括号里带引号

• setAttribute(name,value)
  • 用于设置元素属性
• createAttribute()
  • 生成一个新的属性对象节点，并返回它。

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
等同于
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

• romoveAttribute()
  • 用于删除元素属性

node.removeAttribute('id');

• dataset自定义
  • HTMLElement.dataset
  • data-*属性集
  • 元素上保存数据

html
<li data-id="123456" data-account-name="wwq"
    data-name="魏文庆" data-email="wwq123@163.com" 
    data-mobile="13524543878">wwq</li>

li.dataset.
id    //"123456"
accountName    //"wwq"

样式操作

外部样式表

内联样式

更新样式

• element.style
  • 设置在了内联样式上,优先级最高
  • 更新一个属性需要一个语句

element.style.borderColor = 'red';
element.style.color = 'red';

• element.style.cssText
  • 样式混在逻辑中

element.style.cssText = 'border-color:red;color:red;';

获取样式

style获取的不一定是实际样式值

• Class操作

• window.getComputedStyle()

var style = window.getComputedStyle(element)

window.getComputedStyle(element).color  //#fff;

• ie-9使用element.currentStyle做兼容

CSS DOM overview