JQuery selector User Guide, jqueryselector

JQuery selector User Guide, jqueryselector

Introduction

HTML5 introduces the document. querySelector and document. querySelectorAll methods to the Web API to conveniently select elements from the DOM. The function is similar to the jQuery selector. This makes it much easier to write native JavaScript code.
Usage

The two methods use similar syntaxes and both receive a string parameter. This parameter must be a valid CSS selection syntax.

Copy codeThe Code is as follows:
Element = document. querySelector ('selectors ');
ElementList = document. querySelectorAll ('selectors ');

The selectors parameter can contain multiple CSS selectors separated by commas.

Copy codeThe Code is as follows:
Element = document. querySelector ('selector1, selector2 ,...');
ElementList = document. querySelectorAll ('selector1, selector2 ,...');

The two methods cannot be used to find elements with pseudo-class States. For example, querySelector (': hover') does not get the expected results.

QuerySelector

Copy codeThe Code is as follows:
Element = document. querySelector ('div # iner '); // return the first div whose id is container.
Element = document. querySelector ('. foo,. bar'); // return the first element with the foo or bar style class.

QuerySelectorAll

This method returns all elements that meet the conditions. The result is a nodeList set. The Search rules are the same as described above.

Elements = document. querySelectorAll ('div. foo'); // return all div with foo class style
Note that the elements in the returned nodeList set are non-real-time.