Introduction to the use of 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:
js code:

Copy code Code 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:

Copy code The code is as follows:

h4 inside 1

h4 inside 2

< ul class="nodelist">

list item one

list item two

list item three

h4 outside 1

h4 outside 2

css code:

Copy code The code is as follows:

#log {
font-size: 10px;
}

The misunderstanding lies in the understanding of the implementation of $('inner').querySelectorAll('#main h4.inside'). Many people initially Almost everyone thinks that it is searched directly from the children of div[id='inner'] (me too), this #main is a bit annoying. 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).

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn