再谈querySelector和querySelectorAll的区别与联系
再谈querySelector和querySelectorAll的区别与联系
发布时间:2016-12-30 来源:查字典编辑
摘要:先按W3C的规范来说这两个方法应该返回的内容吧:querySelector:returnthefirstmatchingElementnod...

先按W3C的规范来说这两个方法应该返回的内容吧:

querySelector:

return the first matching Element node within the node's subtrees. If there is no such node, the method must return null.(返回指定元素节点的子树中匹配selector的集合中的第一个,如果没有匹配,返回null)

querySelectorAll:

return a NodeList containing all of the matching Element nodes within the node's subtrees, in document order. If there are no such nodes, the method must return an empty NodeList. (返回指定元素节点的子树中匹配selector的节点集合,采用的是深度优先预查找;如果没有匹配的,这个方法返回空集合)

使用方法:

复制代码 代码如下:

var element = baseElement.querySelector(selectors);

var elementList = baseElement.querySelectorAll(selectors);

这在BaseElement 为document的时候,没有什么问题,各浏览器的实现基本一致;但是,当BaseElement 为一个普通的dom Node的时候(支持这两个方法的dom Node),浏览器的实现就有点奇怪了,举个例子:

复制代码 代码如下:

<div id="testId">

<p><span>Test</span></p>

</div>

<script type="text/javascript">

var testElement= document.getElementById('testId');

var element = testElement.querySelector('.test span');

var elementList = document.querySelectorAll('.test span');

console.log(element); // <span>Test</span>

console.log(elementList); // 1

</script>

按照W3C的来理解,这个例子应该返回:element:null;elementList:[];因为作为baseElement的 testElement里面根本没有符合selectors的匹配子节点;但浏览器却好像无视了baseElement,只在乎selectors,也就是说此时baseElement近乎document;这和我们的预期结果不合,也许随着浏览器的不断升级,这个问题会得到统一口径!

人的智慧总是无穷的,Andrew Dupont发明了一种方法暂时修正了这个怪问题,就是在selectors前面指定baseElement的id,限制匹配的范围;这个方法被广泛的应用在各大流行框架中;

Jquery的实现:

复制代码 代码如下:

var oldContext = context,

old = context.getAttribute( "id" ),<BR> nid = old || id,

try {

if ( !relativeHierarchySelector || hasParent ) {

return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );

}

} catch(pseudoError) {} <BR>finally {

if ( !old ) {oldContext.removeAttribute( "id" );}

}

先不看这点代码中其他的地方,只看他如何实现这个方法的;这点代码是JQuery1.6的片段;当baseElement没有ID的时候,给他设置一个id = "__sizzle__”,然后再使用的时候加在selectors的前面,做到范围限制;context.querySelectorAll( "[id='" + nid + "'] " + query ;最后,因为这个ID本身不是baseElement应该有的,所以,还需要移除:oldContext.removeAttribute( "id" );

,Mootools的实现:

复制代码 代码如下:

var currentId = _context.getAttribute('id'), slickid = 'slickid__';

_context.setAttribute('id', slickid);

_expression = '#' + slickid + ' ' + _expression;

context = _context.parentNode;

Mootools和Jquery类似:只不过slickid = 'slickid__';其实意义是一样的;

方法兼容性:FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;

IE 8 :不支持baseElement为object;

非常感谢大牛JK的回复,提供了另外一种方法。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类