Instructions for using querySelector and querySelectorAll in javascript_javascript skills

At first, many people would compare jquery's selector with these two APIs (me too). Comparing the similarities and differences is fine, but it caused some students to misunderstand the implementation of these two APIs in browsers, especially When calling this api on the dom element.

The following is my jsFiddle example, I will use this to explain:

Copy the 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();
})();

The misunderstanding lies in the understanding of the implementation of $('inner').querySelectorAll('#main h4.inside'). Many people initially thought that they were searching directly from the children of div[id='inner'] ( Me too), this #main is a bit of an eyesore. In fact, it still searches the entire document based on the selector string, and then returns the child nodes belonging to div[id='inner']. Many people will wonder, then why not implement it by directly searching for child nodes according to the parent node? Just like elem.getElementsByTagName, my idea is to have a flexible selector string.

querySelector only returns the first matched element, or null if there is no match.

querySelectorAll returns a collection of matching elements. If there is no match, returns an empty nodelist (node ​​array).

And the returned results are static, and subsequent changes to the document structure will not affect the previously obtained results.

Currently IE8, ff, and chrome all support this API (the selector string in IE8 only supports css2.1).