html5 中高级选择器 querySelector

简介

HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。

用法

两个方法，其中，querySelector返回满足条件的单个DOM元素，按照深度院线和先序遍历的原则使用参数提供的css选择器在DOM中查找。

//返回class为list下，子元素里class为item的首个DOM元素。
element = document.querySelector('.list .item'); 
//注意参数必须严格符合css选择符规范，比如说元素名、类名和id均不能以数字开头，以下代码出错
document.querySelector('11abc');
//如果类名中有冒号等字符需要经过转义
document.querySelector('test\:abc')

而querySelectorAll，则是返回满足所有条件的元素，结果是个nodeList集合，查找规则与上面相同。

elements = document.querySelectorAll('.list .item'); //结果是是一个nodeList集合

这里返回的nodeList集合中的元素是非实时的static node list，而getElementsBy系列的返回的是一个live node list。看下面的例子

// for循环 [lis.length] 次，lis.length定下不会再被更新。
var ul = document.querySelectorAll('ul')[0],
    lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li"));
}

// append操作将无限循环，每append一次，lis都会随之更新，lis.length+1，达不到循环条件结束。
var ul = document.getElementsByTagName('ul')[0], 
    lis = ul.getElementsByTagName("li"); 
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li")); 
}

兼容性

querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持。