再谈querySelector和querySelectorAll的区别与联系
时间：2022-05-02 10:39:43|栏目：JavaScript代码|点击： 次
先按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 class="test" 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的回复，提供了另外一种方法。
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 class="test" 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代码
下一篇：js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
本文标题：再谈querySelector和querySelectorAll的区别与联系
本文地址：http://www.codeinn.net/misctech/200734.html
