DOM扩展(1)

一、Selectors API

主要有三个方法：
（1）querySelector方法->返回匹配的元素
（2）querySelectorAll方法->返回NodeList对象（类数组对象）
（3）matchesSelector方法->返回布尔值

关于方法（3）：这个方法接受一个CSS选择符，如果调用元素与改选择符匹配，返回
true，否则，返回false。例：

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

方法（3）直到2011年年中，还没有浏览器支持。不过，IE9+通过msMachiesSelector()支持该方法，Firefox3.6+通过mozMatchesSelector()支持该方法。safari5+和Chrome通过webkitMatchseSelector()支持该方法。
因此，如果想要使用这个方法，最好编写一个包装函数。

function matchseSelector(element, selector){  //参1为需要进行匹配的元素，参2为css选择符
    if(element.matchesSelector){              //如果原生支持
        return element.matchesSelector(selector);
    }
   else if(element.msMatchesSelector){  //如果是IE
        return element.msMatchesSelector(selector);
    }
   else if(element.mozMatchesSelector){  //如果是火狐(firefox)
        return element.mozMatchesSelector(selector);
    }
   else if(element.webkitMatchesSelector){ //如果是webkit系浏览器(safari,chrome)
        return element.webkitMatchesSelector(selector);
    }
   else {
       throw new Error("Not supported.");   //都不支持，抛出错误
   }
}

二、元素遍历属性

对于元素间的空格，IE9以及之间的版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样，就导致在使用childNodes和firstChild等属性时的行为不一致。

为了弥补这一差异，而同时又保持DOM规范不变，Element Traversal规范（www.w3.org/TR/ElementTraversal/）新定义了一组属性。

包括下面的部分：
1.childElementCount: 返回子元素（不包括文本节点和注释）的个数。
2.firstElementChild: 指向第一个子元素；firstChild的元素版。
3.lastElementChild：指向最后一个子元素；lastChild的元素版。
4.previousElementSibling: 指向前一个同辈元素；previousSibling的元素版
5.nextElementSibling: 指向后一个同辈元素； nextSibling的元素版
利用上面的这些元素，就可以在使用childNodes进行子元素遍历时，不必担心空白文本节点的遍历

支持Element Traversal规范的浏览器有IE9+、Firefox 3.5+、 Safari 4+、Chrome和Opera 10+。

三、HTML5

这里只讨论HTML5中和DOM操作相关的内容

html5规范围绕如何使用新增标记定义了大量javaScript API。其中一些API与DOM重叠，定义了浏览器应该支持的DOM扩展：

1.与类相关的扩充

（1）getElementsByClassName()方法
原生实现，性能比较有优势
参数：“一个包含一或多个类名的字符串”，传入多个类名的时候，类名顺序不重要
返回："带有指定类的所有元素的NodeList对象。

例：

//取得所有勒种包含"username"和"current"的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");

注意问题：性能问题，检索所有对象耗时比较长

支持getElementsByClassName的浏览器有IE 9+,Firefox 3+,Safari 3.1+,Chrome和Opera 9.5+

（2）classList属性
该属性是为了能够解决使用className进行类名的添加和删除的麻烦
因为className是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。所以比较麻烦。例如以下删除其中一个类的例子。

...         //html代码

//删除“user”类
//以下为js代码
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 = className.join(" ");

原生实现删除如上，大部分的js库都有这类实现，用来简化操作。
另外注意的是，如果原生实现添加类名（也就是拼接字符串），要注意检测不要多次添加相同的类名。

HTML5新增了一种操作类名的方式，可以让操作更加简单和安全，那就是为所有的元素都添加classList属性。

classList属性是新集合类型DOMTokenList的实例。这类集合类型除了有其他DOM集合的特性（有自己的length属性，也有方括号语法和item()方法）。另外定义了一些新的方法(value都为string)：
1.add(value):将给定的字符串值添加到列表中
2.contains(value) : 表示列表中会否存在给定的值
3.remove(value): 从列表中制定的字符串。
4.toggle(value): 如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，那么添加给定的值到列表中。

这样子，上面的一大串代码就可以这样代替了：

div.classList.remove("user");//删除user类

支持classList的属性有Firefox 3.6+ 和Chrome

2.焦点管理

新属性：document.activeElement属性。
说明：这个属性始终会引用DOM中当前获得了焦点的元素。
默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。在文档加载期间，document.activeElement的值为null。

新方法：document.hasFocus()方法
说明: 用于确定本文档是否获得了焦点。
例如：

//html代码

function buttonClick(){
var button = document.getElementById("myButton");
button.focus();
alert("文档聚焦：" + document.hasFocus());//true 本文档获得了焦点
}

点击按钮后：

点击按钮后结果

这个文档聚焦功能主要用于无障碍Web应用，无障碍Web应用的一个主要标志就是恰当的焦点管理。

实现了上述的属性和方法的浏览器有IE 4+、Firefox 3+、Safari 4+、Chrome和Opera 8+