Use of querySelector and querySelectorAll in javascript

Source: Internet
Author: User

At the beginning, many people will use the jquery selector to compare with the two APIs (I am also). The similarities and differences are actually okay, however, some people misunderstand the implementation of these two APIs in the browser, especially when calling this api on dom element.

The following is my jsFiddle example. I will describe it here:Copy codeThe Code is as follows: (function (global ){
Global.doc = document;
Global. body = doc. getElementsByTagName ('body') [0];
Global. $ = function (id ){
Return doc. getElementById (id );
}

Global. Logger = function (id ){
This. logElem = $ (id );
This. logArr = [];
};
Global. Logger. prototype = {
Constructor: global. logger,

Append: function (comment ){
This. logArr. push ('<p>' + comment + '</p> ');
},

Flush: function (){
This. logElem. innerHTML = this. logArr. join ('');
},

Clear: function (){
This. logElem. innerHTML = '';
This. logArr = [];
}
};
}) (This );

(Function (){
Var logger = new Logger ('log ');

Var items = $ ('inner '). querySelectorAll (' # main h4.inside ');
Logger. append (items. length );

For (var I = 0, len = items. length; I <len; I ++ ){
Logger. append (items [I]. innerHTML );
}

Logger. flush ();
})();

The misunderstanding lies in $ ('inner '). querySelectorAll ('# main h4.inside') Implementation understanding, many people initially think that it is directly from the div [id = 'inner '] Child Search (I am also ), this # main is a bit confusing. In fact, it searches for the entire document based on the selector string and returns the child node that belongs to the div [id = 'inner. Many people may wonder why it is not implemented simply by finding Child Nodes Based on the parent node? Like elem. getElementsByTagName, my idea is flexible selector string.

QuerySelector returns only the first Matching Element. If no matching item exists, null is returned.

QuerySelectorAll returns a set of matched elements. If no matching item exists, an empty nodelist (node array) is returned ).

The returned results are static, and subsequent changes to the document structure will not affect the previous results.

Currently, IE8 +, ff, and chrome support this api (selector string in IE8 only supports css2.1 ).

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.