Implementation differences between querySelector and querySelectorAll in different browsers

QuerySelector and querySelectorAll are new Query Interfaces provided by W3C.
Copy codeThe 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;
};
[Html]
From the interface definition, we can see that Document, DocumentFragment, and Element all implement the NodeSelector interface. That is, all three types of elements have two methods. The parameters of querySelector and querySelectorAll must be a string that conforms to css selector. The difference is that querySelector returns an object, and querySelectorAll returns a set (NodeList ).

Currently, the latest versions of IE8/9 and Firefox/Chrome/Safari/Opera support them.

To obtain the elements whose class attribute is "red. getElementsByClassName ('red') can also use document. querySelector ('. red') and document. querySelectorAll ('. red ').

However, the implementation of Element. querySelector and Element. querySelectorAll is incorrect, as shown below:

[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 ');
Var obj2 = d1.querySelectorAll ('div ');
Alert (obj1); //-> http://www.sina.com.cn/
Alert (obj2.length); //-> 1
</Script>

In the browser that supports these two methods, "http://www.sina.com.cn/#,and" 1 "are displayed ". Indicates that the desired element or element set is queried. This is not consistent with W3C definition. The definition should look for "div a" in the element d1 range, but there is no div in d1. Therefore, null and empty sets should be returned respectively.

In jQuery1.4.2 and earlier versions, only document. querySelectorAll is used, and Element. querySelectorAll is not used. After jQuery1.4.3, Element. querySelectorAll is used, but fixed. Add "#__ sizzle _" before the selector to force it to search for the specified Element (3903-3918 rows ). Simplified
Copy codeThe Code is as follows:
Function $ (id) {return document. getElementById (id );}
Var d1 = $('d1 ');
Var obj1 = d1.querySelector ('div ');
Var obj2 = d1.querySelectorAll ('div ');
Var old = d1.id, id = d1.id = "_ sizzle __";
Try {
Var query = '#' + id + 'div ';
Alert (d1.querySelector (query ));
Alert (d1.querySelectorAll (query). length );
} Catch (e ){
} Finally {
Old? D1.id = old: d1.removeAttribute ("id ");
}

The implementation is clever. If an element of the specified range has an id, it is retained in the old, "_ sizzle _" to assign a value to it as a temporary id, specify the search range as "#__ sizzle _" before the selector "div a", that is, d1. Finally statement. If the element in the specified range has an id, It is restored to old. If no value exists, the temporary id attribute "_ sizzle _" is removed __".

Related:
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