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: 文档加载完毕