DOM扩展的两个常用方法

Selectors API Level 1的核心是两个方法：querySelector() 和 querySelectorAll() 。在兼容的浏览器中，可以通过 Document 及 Element 类型的实例调用它们。目前已完全支持Selectors
API Level 1的浏览器有IE 8+、Firefox 3.5+、Safari 3.1+、Chrome和Opera 10+。

querySelector()方法

querySelector() 方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null 。请看下面的例子。

//取得body元素
var body = document.querySelector(“body”);
//取得ID为“myDiv”的元素
var myDiv = document.querySelector(“#myDiv”);
//取得类为“selected”的第一个元素
var selected = document.querySelector(“.selected”);
//取得类为“button”的第一个图像元素
var img = document.body.querySelector(“img.button”);

通过 Doument 类型调用 querySelector() 方法时，会在文档元素的范围内查找匹配的元素。而通过 Element 类型调用 querySelector() 方法时，只会在该元素后代元素的范围内查找匹配的元素。

CSS选择符可以简单也可以复杂，视情况而定。如果传入了不被支持的选择符， querySelector() 会抛出错误。

querySelectorAll()方法

querySelectorAll() 方法接收的参数与 querySelector() 方法一样，都是一个CSS选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个
NodeList 的实例。

具体来说，返回的值实际上是带有所有属性和方法的 NodeList ，而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。这样实现可以避免使用
NodeList 对象通常会引起的大多数性能问题。

只要传给 querySelectorAll() 方法的CSS选择符有效，该方法都会返回一个 NodeList对象，而不管找到多少匹配的元素。如果没有找到匹配的元素， NodeList 就是空的。

与 querySelector() 类似，能够调用 querySelectorAll() 方法的类型包括Document 、 DocumentFragment 和 Element 。下面是几个例子。

//取得某<div>中的所有<em>元素（类似于getElementsByTagName(“em”)）
var ems = document.getElementById(“myDiv”).querySelectorAll(“em”);
//取得类为“selected”的所有元素
var selecteds = document.querySelectorAll(“.selected”);
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll(“p strong”);

要取得返回的 NodeList 中的每一个元素，可以使用 item() 方法，也可以使用方括号语法，比如：

var i, len, strong;
for (i=0, len=strongs.length; i < len; i++){
strong =
4000
strongs[i]; //或者strongs.item(i)
strong.className = “important”;
}

同样与 querySelector() 类似，如果传入了浏览器不支持的选择符或者选择符中有语法错误，
querySelectorAll() 会抛出错误。