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