JavaScript queryselector and Queryselectorall use instructions _javascript tips

Source: Internet
Author: User
At first, a lot of people would take the jquery selector to compare these two APIs (me too), and the similarities and differences would have been fine, but some students had misunderstood the implementation of the two APIs in the browser, especially when DOM element raised the API.

Here's a sample of my jsfiddle, and I'll start by saying:
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 (' <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 misconception is that the realization of the $ (' inner '). Queryselectorall (' #main h4.inside ') is understood, and many people begin to think of it directly from the children of Div[id= ' inner ' (Me too), this # Main is a bit of an eyesore. It actually looks up from the entire document according to the selector string, and then returns the child nodes belonging to div[id= ' inner '. Many people will wonder, then why not follow the parent node to find the child node directly to achieve it? Like Elem.getelementsbytagname, my idea is to be flexible selector string.

Queryselector returns only the first element of the match, or null if there is no match.

Queryselectorall returns a matching set of elements that, if there is no match, returns an empty nodelist (an array of nodes).

And the return result is static, and subsequent changes to the document structure do not affect the results obtained before.

Currently Ie8+,ff,chrome supports 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.