各浏览器中querySelector和querySelectorAll的实现差异
分析
querySelector和querySelectorAll是W3C提供的
querySelector和querySelectorAll是W3C提供的新的查询接⼝，其主要特点如下：
1、querySelector只返回匹配的第⼀个元素，如果没有匹配项，返回null。
2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。
这两个⽅法都可以接受三种类型的参数：id(#)，class(.)，标签，很像jquery的选择器。
var obj = document.querySelector("#id");var obj = document.querySelector(".classname");
var obj = document.querySelector("div");
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");
var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img");
⽬前IE8+，ff，chrome都⽀持此api（IE8中的selector string只⽀持css2.1的）
浏览器⽀持查看
module dom {
[Supplemental, NoInterfaceObject]
interface NodeSelector {
Element querySelector(in DOMString selectors);
NodeList querySelectorAll(in DOMString selectors);
};
Document implements NodeSelector;
DocumentFragment implements NodeSelector;
Element implements NodeSelector;
};
Feature Chrome Firefox (Gecko)Internet Explorer Opera Safari (WebKit)
Basic support13.5 (1.9.1)
bug 416317
9
8 (CSS2 selectors only)
10
3.2 (525.3)
WebKit bug 16587
Feature Android Firefox Mobile (Gecko)IE Mobile Opera Mobile Safari Mobile
Basic support2.1yes910.0  3.2
从接⼝定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接⼝。即这三种类型的元素都拥有者两个⽅法。querySelector和querySelectorAll的参数须是符合的字符串。不同的是querySelector返回的是⼀个对
象，querySelectorAll返回的⼀个集合(NodeList)。
⽬前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经⽀持它们。
如想获取页⾯class属性为"red"的元素，除了使⽤ElementsByClassName('red')还可以使⽤
document.querySelector('.red')和document.querySelectorAll('.red')。
但Element.querySelector和Element.querySelectorAll的实现有错误，如下
<div id="d1">
nodeselector<p><a href="www.sina">SINA</a></p>
</div>
<script type="text/javascript">
function $(id){ElementById(id);}
var d1 = $('d1');
var obj1 = d1.querySelector('div a');
var obj2 = d1.querySelectorAll('div a');
alert(obj1); // -> www.sina/
alert(obj2.length); // -> 1
</script>
function $(id){ElementById(id);}
var d1 = $('d1');
var obj1 = d1.querySelector('div a');
var obj2 = d1.querySelectorAll('div a');
var old = d1.id, id = d1.id = "__sizzle__"; try {
var query = '#' + id + ' div a';
alert(d1.querySelector( query ));
alert(d1.querySelectorAll( query ).length); } catch(e) {
} finally {
old ? d1.id = old : d1.removeAttribute( "id" ); }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。