《Javascript高级程序设计》DOM扩展

1、选择符API

Selectors API的核心方法：

querySelector()：接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。通过Document类型调用querySelector()方法时，会在文档元素的范围内查找匹配的元素，而通过Element了类型调用时，只会在该元素后代元素的范围内查找匹配元素。

//取得body元素
var body = document.querySelector("body");
//取得id为myDiv的元素
var myDiv = document.querySelector("#myDiv");
//取得class为selected的第一个元素
var selected = document.querySelector(".selected");
//取得class为button的第一个图像元素
var img = document.body.querySelector("img.button");

querySelectorAll():接收的参数与querySelector()一样，但返回的是所有匹配的元素(返回一个NodeList实例)。

//取得某<div>中的所有<em>元素
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得所有class为selected的元素
var selecteds = document.querySelectorAll(".selected");

matchesSelector():接受一个CSS选择符参数，如果调用元素与该选择符匹配，返回true。

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

2、元素遍历

Element Traversal API为DOM元素添加了5个属性：
(1)childElementCount:返回子元素(不包括文本节点和注释)的个数
(2)firstElementChild:指向第一个子元素
(3)lastElementChild:指向最后一个子元素
(4)previousElementSibling:指向前一个同辈元素
(5)nextElementSibling:指向后一个同辈元素

跨浏览器遍历某元素的所有子元素

var i,len,
    child = element.firstElementChild;
while(child != element.lastElementChild){
    processChild(child);  //已知它是元素
    child = child.nextElementSibling;
}

3、HTML5

getElementsByClassName()方法：接收一个参数(包含一个或者多个类名的字符串)，返回指定类的所有元素的NodeList。document对象和element对象调用有差异。

//取得所有类中包含username和current的元素
var allCurrentUsernames = document.getElementByClassName("username,current");
//取得id为myDiv的元素中带有类名selected元素
var selected = document.getElementById("myDiv").getElementByClassName("selected");

classList属性：HTML5新增的一种操作类名的方式

//删除disabled类
div.classList.remove("disabled");
//添加current类
div.classList.add("current");
//切换user类
div.classList.toggle("user");
//确定元素中是否包含既定的类名
if(div.classList.contains("bd") && !div.classList.contains("disabled")){
    //执行操作
}
//迭代类名
for(var i=0,len=div.classList.length;i<len;i++){
    doSomething(div.classList[i]);
}

hasFocus()方法：用于确定文档是否获得了焦点

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