Analysis of implementation differences between querySelector and querySelectorAll in various browsers_jquery

querySelector and querySelectorAll are new query interfaces provided by W3C

Copy code The code is as follows:

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; . That is, these three types of elements all have two methods. The parameters of querySelector and querySelectorAll must be strings conforming to
css selector
. The difference is that querySelector returns an object, and querySelectorAll returns a collection (NodeList).
Currently, IE8/9 and the latest versions of Firefox/Chrome/Safari/Opera already support them.
If you want to get the elements whose class attribute is "red" on the page, in addition to using document.getElementsByClassName('red'), you can also use document.querySelector('.red') and document.querySelectorAll('.red' ).

But there are errors in the implementation of Element.querySelector and Element.querySelectorAll, as follows

[code]

< ;a href="http://www.sina.com.cn">SINA

In browsers that support these two methods, you can see that "http://www.sina.com.cn" pops up respectively. /", and "1". It means that the desired element or element collection has been queried. This is inconsistent with the W3C definition. According to the definition, "div a" should be searched within the range of element d1, and there is no div in d1 at all. Therefore null, empty collections should be returned respectively.

In jQuery 1.4.2 and previous versions, only document.querySelectorAll is used, and Element.querySelectorAll is not used. Element.querySelectorAll was used after jQuery 1.4.3, but it was fixed. Add "#__sizzle__" before the selector to force it to search within the specified element (lines 3903-3918). Simplified

Copy code The code is as follows: 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 " );
}


The implementation is very clever. If the element in the specified range has an id, keep it in old, "__sizzle__" assigns it as a temporary id, and selects it in the selector "div a" The previously specified search range is "#__sizzle__", which is d1. The finally statement is used for final cleaning. If the element in the specified range has an id, it will be restored to old. If not, the temporary id attribute "__sizzle__" will be removed.

Related:

http://msdn.microsoft.com/en-us/library/cc288169(v=VS.85).aspx

http ://msdn.microsoft.com/en-us/library/cc304115(VS.85).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