Queryselector and Queryselectorall

jquery is so favored by developers and its powerful selectors have a great relationship, compared to the cumbersome document.getElementById, document.getelementbyname ..., find the element is very convenient, In fact, the Queryselector and Queryselectorall query interface has been implemented similar functions.

Defined

In fact, these two methods to see the name can understand what the meaning, but still cite the explanation of the

queryselector: Return the first matching Element node within the node ' s subtrees. If there is no such node, the method must return NULL. (returns the first element in the collection of matching selectors in the subtree of the specified element node, if no match returns null)

Queryselectorall: Return a NodeList containing all of the matching Element nodes within the node ' s subtrees Cument order. If There is no such nodes, the method must return an empty NodeList. (Returns a collection of elements of the matching selector in the subtree of the specified element node in document order, if no match is returned to the empty collection)

You can see from the definition that both document and element implement the Nodeselector interface. That is, the three types of elements are owned by two methods. The parameters of Queryselector and Queryselectorall are CSS selector strings. The difference is that Queryselector returns a first matching element, Queryselectorall returns a collection of all matching elements (NodeList).

Usage

If you've used jquery or learned about CSS, these two methods are simple to use, passing in selectors

<div id= "Test" >        <div class= "dialog" >            <p>                123</p>            <span>456</ span>            <div>                789</div>            <div class= "text" >                452</div>        </div>    </div>

var test=document.queryselector (' #test ');        var subdivs = test.queryselectorall (' div ');        var text = Document.queryselectorall (' div[class=text] ');

Defects and Solutions

Really good, but the browser to Element.queryselector and Element.queryselectorall implementation of the error, see an example

<div id= "Test" >        <p>            <span>123</span>        </p>    </div>

var test=document.queryselector (' #test ');        var span = Test.queryselectorall (' div span ');

According to our understanding, span is a SPAN element that searches for the internal ancestor element of Test as a div, but whose ancestors must be inside test, and not include test itself or even the parent element of test, so it should return an empty Hector, but the browser will return

The great God Andrew DuPont proposed a method to fix the bug, which was widely applied to various frameworks, specifying the ID of the calling element in front of selector and limiting the range of matches. That's probably what it means in jquery.

var span, selector = ' div span ', context=document.queryselector (' #test ');        var Oldcontext = context,        oldid = context.getattribute (' id '),        newId = oldid | | ' __sizzle__ ';        try {            span= context.queryselectorall (' # ' +newid+ ' +selector);        } catch (e) {                    } finally {            if (!oldid) { C10/>oldcontext.removeattribute (' id ');            }        }

To do this is to add a layer of ID to the search limit, clever use of the bug, to get the correct results

Browser compatibility

Although some problems, but his flaws, so easy to use two ways to not fire it? Browser compatibility ... In fact, compared to some of the characteristics of HTML5 and CSS3 these two methods are not so desperate, because IE8 have been supported, the other main mainstream browser is naturally realized.

ie8+

Firefox

Chrome

Safari

Opera

Android

Queryselector and Queryselectorall