js--DOM--2.DOM扩展

1.DOM扩展之选择器API

选择器API就是根据CSS选择器选择与某个模式匹配的DOM元素

1.1.querySelector()方法

接收值：接收一个CSS选择器
返回值：返回与该模式匹配的第一个元素

1.2.querySelectorAll()方法

接收值：接收一个CSS选择器
返回值：返回与该模式匹配的所有元素，是一个NodeList实例

1.3.matchesSelector()方法

接收值：接收一个CSS选择器
返回值：true或者false

if(document.body.matchesSelector("body.page1")) {
}

这个方法使用时，最好写一个包装函数，如下：
msMatchesSelector是IE9
mozMatchesSelector是火狐
webkitMatchseSelector是谷歌和safari

function matchesSelector(element,selector) {
    if(element.matchesSelector){
        return element.matchesSelector(selector);
    }else if(element.msMatchesSelector){
        return element.msMatchesSelector(selector);
    }else if(element.mozMatchesSelector){
        return element.mozMatchesSelector(selector);
    }else if(element.webkitMatchseSelector{
        return element.webkitMatchesSelector(selector);
    }
}

2.Element Traversal API

之前的childNodes有空格问题，则引出了五个元素
childElementCount：返回子元素的个数
firstElementChild：指向第一个子元素
lastElementChild：指向最后一个子元素
perviousElementSibling：指向前一个同辈元素
nextElementSibling：指向后一个同辈元素

3.使用HTML5 DOM扩展

3.1.与类相关的扩展

1.getElementsByClassName()
2.classList属性
先回顾通过className添加、删除和替换类名

// 取得类名字符串并拆分成数组
var classNames = div.className.split(/\s+/);

var pos = -1,
    len,
    i;
// 找到要删除的类名
for(i=0,len = classNames.length;i < len;i++) {
    if(classNames[i] == "user") {
        pos = i;
        break;
    }
}
// 删除类名
classNames.splice(i,1);
// 剩下的类名拼接成字符串
div.className = classNames.join(" ");

通过classList添加、删除和替换类名更容易

div.classList.remove("user");
div.classList.add("user");
// 若列表中存在已有的类名，删除；若无，添加值
div.classList.toggle("user");
// 列表中是否存在给定的类名，存在则返回true，否则false
div.classList.contains("");

3.2.焦点管理

HTML5添加了辅助管理DOM焦点的功能
document.activeElement是引用DOM中当前获得了焦点的元素
document.hasFocus()方法是确定文档是否获得了焦点
元素获得焦点的方法：
页面加载，用户输入，代码中调用focus()

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button);//true

var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus());//true

4.了解专有的DOM扩展

children属性
contains()方法
innerText
outerText