选择符API

Selector API Level1 的核心就是两个方法：querySelector()和querySelectorAll()。实际上，jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用。

querySelector()方法

该方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。如：

console.log(document.querySelector("body")); //HTMLBodyElementconsole.log(document.querySelector("#divId")); //HTMLDivElementconsole.log(document.querySelector(".info")); //HTMLParagraphElementconsole.log(document.querySelector("p.info")); //HTMLParagraphElementconsole.log(document.body.querySelector(".info")); //HTMLParagraphElementconsole.log(document.querySelector("body.title")); //nulltry{    document.querySelector(wtf);}catch(e){    console.log(e); //ReferenceError stack: message: wtf is not defined}

如上，如果传入了不被支持的选择符，该方法会抛出错误。

querySelectorAll()方法

该方法接收一个CSS选择符，返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。这样可以避免使用NodeLIst对象。能够调用该方法的类型包括Document、DocumentFragment和Element。如：

var p = document.querySelector("#divId").querySelector(".info");console.log(p.firstChild.nodeValue); //获取id为divId的div里面的className值为.info的节点var p = document.querySelectorAll("p");console.log(p.length); //获取所有p的数量

同样的，如果传入了浏览器不支持的选择符或者选择符中有语法错误，该方法会抛出错误。

matchesSelector()方法

这个方法接受一个参数，CSS选择符，如果调用元素与该选择符匹配，返回true，否则返回false。为了解决浏览器兼容问题，可以使用下面的包装函数：

function matchesSelector(element, selector) {    if (element.matchSelector) {        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) { //safari,chorme        return element.webkitMatchesSelector(selector);    } else {        throw new Error("No supportted!");    }}console.log(matchesSelector(document.body, "body")); //true

元素遍历Element Traversal规范

对于元素间的空格，各浏览器会做出不同反应，就导致了在使用childNodes和firstChild等属性时的行为不一致。

由此，Element Traversal API 为DOM元素添加了以下5个属性：

• childElementCount：子元素的个数（不包括文本节点和注释）；

• firstElementChild：第一个子元素；

• lastElementChild：最后一个子元素；

• previousElementSibling：前一个同辈元素；

• nextElementSibling：后一个同辈元素；

如：

<ul id="ulId">    <li class="list1">list1</li>    <li class="list2">list2</li>    <li class="list3">list3</li></ul>var ul = document.querySelector("#ulId");console.log(ul.querySelectorAll("li").length); //3个listconsole.log(ul.childElementCount); //3个listconsole.log(ul.firstElementChild.firstChild.nodeValue); //list1console.log(ul.lastElementChild.firstChild.nodeValue); //list3var li = ul.querySelectorAll("li");var li1 = li[0];console.log(li1.firstChild.nodeValue); //list1console.log(li1.nextElementSibling.firstChild.nodeValue); //list2console.log(li1.nextElementSibling.previousElementSibling.firstChild.nodeValue); //list1

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