Dom

HTML5  与类相关扩充

1、getElementsByClassName()方法

var div = document.getElementsByTagName('div')[0];

var classNames = div.className.split(/\s+/);

var pos = -1,

i,

len;

for(i=0, len=classNames.length; i<len; i++){

if(classNames[i]=='user'){

pos = i;

break;

}

}

classNames.splice(i,1);

div.className = classNames.join(" ");

2、classList 属性（一种操作类名的方式）

var div = document.getElementsByTagName('div')[0];

var list = div.classList;   //DOMTokenList(3) ["bd", "user", "disabled", value: "bd user disabled"]

add (value)  : 给定的字符串添加到列表中，如果已存在就不添加了

list.add('red');

list.add('user');

console.log(div.className); //bd user disabled red

contains(value):  列表是否有给定的字符串，真为true 假为false

var contains = list.contains("user");

console.log(contains)  //true

remove(value):  从列表中删除给定的字符串

list.remove('user');

console.log(div.className); //bd disabled red

toggle(value):  如果列表中有给定字符串就删除，没有就添加

list.toggle('green');

list.toggle('bd');

console.log(div.className); //disabled red green

3、焦点管理

var button = document.getElementById('myButton');

button.focus();

document.activeElement  获取页面中获取焦点的元素

console.log(document.activeElement === button) //true

document.hasFocus()   页面中是否有元素获得bug

console.log(document.hasFocus()) //true

4、HTMLDocument的变化

document.readyState  是IE4  引入的属性，只是HTML5 正式纳入标准

返回两个值

loading : 正在加载文档

complete: 文档加载完毕