DOM(四)：h5扩展方法

getElementByClassName()方法
getElementByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList

//取得所有类中包含'username'和'current'的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementByClassName('username current');
//取得ID为'myDiv'的元素中带有雷鸣'selected'的所有元素
var selected = document.getElementById('myDiv').getElementByClassName('selected');

 

focus()

document.activeElement属性，这个属性会引用dom中当前获得了焦点的元素。元素获取焦点的方式有页面加载，用户输入和在代码中调用focus()方法

var button = document.getElementById('myButton');
button.focus();
console.log(document.activeElement == button); //true

document.hasFocus()方法，这个方法用于确定文档是否获得了焦点
var button = document.getElementById('myButton');
button.focus();
console.log(document.hasFocus()); //true

 

readyState属性
document的readyState属性有两个可能的值

loading,正在加载文档
complete,已经加载完文档

使用document.readyState的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指示器

if(document.readyState == 'complete'){
//执行操作
}

 

检测页面的兼容模式
ie为此给document添加了一个名为compatMode的属性，告诉开发人员浏览器采用了哪种渲染模式。

if(document.compatMode == 'CSS1Compat'){
    console.log('标准模式');
}else{
    console.log('混杂模式');
}

 

scrollInfoView()方法
可以在所有html元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

//让元素可见
document.forms[0].scrollInfoView();

当页面发生变化时，一般会用这个方法来吸引用户的注意力。实际上，为某个元素设置焦点也会导致浏览器滚动并显示出获得焦点的元素。D