jQuery selector querySelector usage guide_jquery

Introduction

HTML5 introduces two new methods, document.querySelector and document.querySelectorAll, to Web API to more conveniently select elements from the DOM. Their functions are similar to jQuery's selectors. This makes writing native JavaScript code a lot easier.
Usage

The two methods use similar syntax, and both receive a string parameter. This parameter needs to be a legal CSS selection syntax.

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

Using these two methods cannot find elements with pseudo-class status. For example, querySelector(':hover') will not get the expected results.

querySelector

querySelectorAll

This method returns all elements that meet the conditions, and the result is a nodeList collection. The search rules are the same as described before.

elements = document.querySelectorAll('div.foo');//Return all divs with foo class style
It should be noted that the elements in the returned nodeList collection are not real-time.