QuerySelector and querySelectorAll in javascript-javascript tutorial

In fact, there are many descriptions about querySelector and querySelectorAll. This is mainly to make a record. At the beginning, many people will use the jquery selector to compare with the two APIs (I am also). It is okay to compare the similarities and differences, 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:
Js Code:

The 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 ('

'+ Comment +'

');
},
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 ();
})();
(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 ('

'+ Comment +'

');
},
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 ();
})();

Html code:

The Code is as follows:

H4 inside 1
H4 inside 2

• List item one


• List item two


• List itme three

H4 outside 1
H4 outside 2

Css code:

The Code is as follows:

# Log {
Font-size: 10px;
}

The misunderstanding lies in $ ('inner '). querySelectorAll ('# main h4.inside') Implementation understanding, many people initially think that it is directly from the children of p [id = 'inner '] (I am also ), this # main is a bit confusing. In fact, it still searches for the entire document based on the selector string, and then returns the subnode that belongs to p [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 ).