Shulou(Shulou.com)06/02 Report--

This article mainly introduces JavaScript selector function querySelector and querySelectorAll how to use, the article is very detailed, has a certain reference value, interested friends must read!

Selector is a very powerful feature of Css. Previously, it was generally obtained by getElementById and getElementsByTagName, which was very inconvenient in some scenarios.

DOM was later extended to the Selector API standard, where Selector API Level 1 includes querySelector and querySelectorAll methods, which can match page elements through Css selectors.

QuerySelector queries a single element

querySelector is used to query the first element in the page that meets the rule. It can be called on Document instances and Element instances to receive a selector string parameter. If it is found, it returns HTMLElement object, otherwise it returns null.

The syntax format is as follows:

Document instance.querySelector(selector string);Element instance.querySelector(selector string);1. Document instance call

Document instance calls are elements that get an entire page match.

A simple example is as follows:

//Get body element let body = document.querySelector("body");console.log(body)//Get element id container, only get first let container = document.querySelector ("#container");console.log (container)//Get elements containing btn in class, only get the first let btn = document.querySelector (".btn");console.log(btn);//Get the elements containing btn in the container direct subclass class, only get the first let containerBtn = document.querySelector("#container>.btn");console.log(containerBtn);2. Element instance call

The Element instance call is to get matching elements within the element's subtree.

Simple example:

//Get the element with ID container let container = document.querySelector("#container");//querySelector method if (container) { //Find only elements in the container whose class contains btn. let containerBtn = container.querySelector(".btn"); console.log(containerBtn);}

Theoretically, because Css can get any element of the page through the selector, the Element instance call can be written directly as the call method of the Document instance, just by modifying the selector string parameter.

For example, the above example can be written directly as follows:

let containerBtn = document.querySelector("#container .btn");

And because there is one less if, the code is simpler. Of course, in some business scenarios, the ELement instance has already been determined, so it is more convenient to call it directly with the ELement instance.

Second, querySelectorAll query all elements

The querySelectorAll method is similar to the querySelector method except that it returns all matching elements of type NodeList.

Simple example:

//Suppose the page has two div class names containing article//Get all elements of the class containing article let articleList = document.querySelectorAll(".article");console.log(articleList);console.log(articleList.length);//Console output:// NodeList(2) [div.article, div.article]// 2

The querySelectorAll method returns all elements, which are often traversed in practice, using the regular for traversal, for of traversal, and forEach traversal.

// for of traversal for (let item of articleList) { console.log(item);}// for calendar for (let i = 0; i

{ console.log(item, index);});1, for in traversal problem

If you use for-in traversal, you will also traverse some methods on the prototype chain, such as entries, forEach, etc.

2. Snapshot rather than real-time problems

The NodeList obtained using the querySelectorAll method is a snapshot, not real-time data.

Consider the following example:

//Get by querySelectorAll, articleList is static, non-real time let articleList = document.querySelectorAll(".article");console.log(articleList);console.log(articleList.length); // 2setTimeout(() => { //add an element let div = document.createElement("div"); div.className = "article"; document.body.appendChild(div); console.log(articleList); //is still 2 console.log(articleList.length);}, 0);

Finally, a timer is set, and a div element with class article is inserted into the page, but the length of articleList is still 2.

If getElementsByClassName is used, articleList is the real-time data.

Consider the following example:

//getElementsByClassName is used to get, articleList is real-time let articleList = document.getElementsByClassName("article");console.log(articleList);console.log(articleList.length);setTimeout(() => { //add an element let div = document.createElement("div"); div.className = "article"; document.body.appendChild(div); console.log(articleList); //here is 3 console.log(articleList.length);}, 0);

View the print results in the console:

HTMLCollection Dynamic Effects:

Objects retrieved using getElementsByClassName are HTMLCollection types and change with document flow.

The above is "JavaScript selector function querySelector and querySelectorAll how to use" all the content of this article, thank you for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.