当前位置：首页 > 资讯 > 技术文档

各浏览器中querySelector和querySelectorAll的实现差异分析

时间：2020-06-04 06:18 编辑：来源：阅读：
扫一扫，手机访问

摘要：各浏览器中querySelector和querySelectorAll的实现差异分析

querySelector和querySelectorAll是W3C提供的[url=http://www.w3.org/TR/selectors-api/#nodeselector]新的查询接口[/url] 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 support	1	3.5 (1.9.1) [url=https://bugzilla.mozilla.org/show_bug.cgi?id=416317]bug 416317[/url]	9 8 (CSS2 selectors only)	10	3.2 (525.3) [url=https://bugs.webkit.org/show_bug.cgi?id=16587]WebKit bug 16587[/url]

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.1	yes	9	10.0	3.2

从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 [url=http://www.w3.org/TR/css3-selectors/]css selector[/url] 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持它们。如想获取页面class属性为"red"的元素，除了使用document.getElementsByClassName('red')还可以使用document.querySelector('.red')和document.querySelectorAll('.red')。但Element.querySelector和Element.querySelectorAll的实现有错误，如下

<div id="d1"> 
<p><a href="http://www.sina.com.cn">SINA</a></p> 
</div> 
<script type="text/javascript"> 
function $(id){return document.getElementById(id);} 
var d1 = $('d1'); 
var obj1 = d1.querySelector('div a'); 
var obj2 = d1.querySelectorAll('div a'); 
alert(obj1); // -> http://www.sina.com.cn/ 
alert(obj2.length); // -> 1 
</script>

如果支持这两个方法的浏览器可以看到分别弹出了“http://www.sina.com.cn/”，和 “1”。说明查询到了想要的元素或元素集合。这与W3C的定义却是不合的，根据定义应该是在元素d1范围内查找"div a"，而d1内压根没有div。因此应该分别返回null，空集合。 jQuery1.4.2 及之前版本中只使用了document.querySelectorAll，没有使用Element.querySelectorAll。 jQuery1.4.3 后使用了Element.querySelectorAll，但做了修复。在选择器前加了"#__sizzle__"以强制其在指定元素内查找（3903-3918行）。简化下

function $(id){return document.getElementById(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" ); 
}

实现很巧妙，指定范围的元素如果有id，将其保留在old，"__sizzle__"赋值其作为临时id，在选择器"div a"前指定查找范围为"#__sizzle__"，即d1。finally语句来最后清理，如果指定范围的元素本身有id将其恢复为old，没有则去掉临时的id属性"__sizzle__"。相关： [url=http://msdn.microsoft.com/en-us/library/cc288169%28v=VS.85%29.aspx]http://msdn.microsoft.com/en-us/library/cc288169%28v=VS.85%29.aspx [/url] [url=http://msdn.microsoft.com/en-us/library/cc304115%28VS.85%29.aspx]http://msdn.microsoft.com/en-us/library/cc304115%28VS.85%29.aspx [/url] [url=https://developer.mozilla.org/En/DOM/Document.querySelector]https://developer.mozilla.org/En/DOM/Document.querySelector [/url] [url=https://developer.mozilla.org/En/DOM/Document.querySelectorAll]https://developer.mozilla.org/En/DOM/Document.querySelectorAll [/url] [url=https://developer.mozilla.org/En/DOM/element.querySelector]https://developer.mozilla.org/En/DOM/element.querySelector [/url] [url=https://developer.mozilla.org/En/DOM/Element.querySelectorAll]https://developer.mozilla.org/En/DOM/Element.querySelectorAll[/url]

全部评论(0)

上一篇：JS判断不能为空实例代码
下一篇：Swift中的协议(protocol)学习教程

资讯排行榜
更多>>