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

querySelector和querySelectorAll是W3C提供的新的查询接口复制代码代码如下: 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; }; [html] 从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持它们。如想获取页面class属性为"red"的元素，除了使用document.getElementsByClassName('red')还可以使用document.querySelector('.red')和document.querySelectorAll('.red')。但Element.querySelector和Element.querySelectorAll的实现有错误，如下 [code] <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__"。相关： http://msdn.microsoft.com/en-us/library/cc288169%28v=VS.85%29.aspx http://msdn.microsoft.com/en-us/library/cc304115%28VS.85%29.aspx https://developer.mozilla.org/En/DOM/Document.querySelector https://developer.mozilla.org/En/DOM/Document.querySelectorAll https://developer.mozilla.org/En/DOM/element.querySelector https://developer.mozilla.org/En/DOM/Element.querySelectorAll

　　推荐阅读

　　jQuery 瀑布流绝对定位布局（二）(延迟AJAX加载图片)

瀑布流-绝对定位布局，与浮动布局的区别在于 1.布局不一样：　　绝对定位：一个UL里面放置所有的绝对定位的LI；　　浮动布局：多个（一般三四个）UL分布放置LI； 2.AJAX不一样　　绝对定位：只需要将请求来的JS>>>详细阅读

本文标题：各浏览器中querySelector和querySelectorAll的实现差异分析

地址：http://www.17bianji.com/kaifa2/JS/23402.html

1/2 1