A detailed explanation of Javascript class selector methods-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

A detailed explanation of Javascript class selector methods

藏色散人

Aug 06, 2022 pm 02:36 PM

javascript

This article will introduce you to the Javascript class selector method. I hope it will be helpful to friends in need!

Javascript class selector method

As an ecosystem and platform, the browser will provide a series of function methods that can be called and controlled by programming languages. For browsing For the browser, it is natural to call the browser's built-in method through Javascript language. For the operating system, most languages can call its API.

CSS can add styles to HTML elements through id selectors or class selectors. The browser platform, like CSS, also provides id selectors and class selector methods that can be called by the Javascript language. Used before The id selector method is getElementById(), and the class selector method to be explained in this article is getElementsByClassName(). You can see what they want to express by their names. Standards Committee The formulation of these standards is not just a random naming on a whim. We try our best to keep the name as the name implies. Of course, this is for the English language as the name implies.

The characteristic of ID is to select one, and select the characteristics of class in batches. For example, to dynamically add style attributes to some elements in batches through Javascript, the getElementsByClassName() method is mainly used. [Related recommendations: JavaScript Video Tutorial]

Case

Add Javascript code based on an already written HTML and css file. Enables users to batch customize the styles of elements on web pages.

48   <body style="background-color: #777777">
49   <!--自定义颜色功能按钮-->
50   <button style="background-color: #00aaff" id="button1" onclick="fun1()"></button>
51   <button style="background-color: #1abc9c" id="button2" onclick="fun2()"></button>
52   <!--Web应用界面命令-->
53   <div class="command">
54       <!--注释空格-->
55       <div class="bottom padding radius left-radius div">圆弧</div><!--
56       --><div class="bottom padding div">直线</div><!--
57       --><div class="bottom padding div">矩形</div><!--
58       --><div class="bottom padding div">曲线</div><!--
59       --><div class="padding right-radius div">倒角</div>
60   </div>
61   <script>
62   //    批量选中类属性名为div的所有元素，返回所有元素对象组成的数组
63       let arr = document.getElementsByClassName("div");
64   //    定义两个更改颜色的函数fun1和fun2
65       function fun1() {
66   //        遍历所有元素对象
67           for(let i = 0; i<arr.length;i++){
68   //            更改背景颜色
69               arr[i].style.backgroundColor="#00aaff";
70           }
71       }
72       function fun2() {
73           for(let i = 0; i<arr.length;i++){
74               arr[i].style.backgroundColor="#1abc9c";
75           }
76       }
77   </script>
78   </body>

Code analysis

Lines 53 to 60 of the code define a series of command buttons for the application interface. Lines 50 and 51 of the code define two custom buttons. Element-style function button button. When you click one of the function button buttons, the function fun1() or fun2() in the script tag will be called. For example, after executing the fun1 function, the elements defined in lines 53 to 60 of the code The color of the background elements will be modified in batches from gray to #00aaff color.

The 63rd line of code selects all elements whose class attribute name is "div" through the class selector method getElementsByClassName()The object returned by the getElementById() method is the element itself, getElementsByClassName()The method returns an array composed of all element objects. This means that if you want to change the attribute value of an element, access the element through array subscripts. For example, arr[0] represents the div element defined in line 55 of the code. If you directly write arr.style.backgroundColor="#00aaff"; it is illegal to change the background color of all elements in arr. arr is an array and it does not have a .style style attribute. You need to pass arr [i].style.backgroundColor="#00aaffThis form resets the background color of the element.

There are many elements to be changed, and the colors of the elements to be changed are also the same, so you can use for To complete the loop structure program, the function of lines 67 to 70 of the code is to traverse all div elements in the array arr, and then change their background color.

Lines 65 and 72 define functions respectively fun1 and fun2 can be called through mouse click events. The function of fun1 is to change the background color of elements to #00aaff in batches. The function of fun1 is to change the background color of elements to #1abc9c in batches.

<strong>getElementsByTagName()</strong>

getElementsByTagName() method can be used to select elements in batches like the getElementsByClassName() method. The returned The results are all array objects from the perspective of data type. The difference is that the getElementsByTagName() method selects elements through their tag names. The knowledge point corresponding to CSS is the element selector. The English Tag in the getElementsByTagName() method name is The meaning of the label.

Application

I have learned some methods of selecting elements and know their respective characteristics, just for application, how to choose getElementById() in actual application , getElementsByClassName() and getElementsByTagName(). You can refer to CSS for this. In CSS, class selectors are generally used. Element and id selectors are occasionally used, and the tag name of the element is used to select elements. If there are many places in a complete page They all require a certain element, and these elements require different background colors, for example. If you use the getElementsByTagName() method, it will be accidentally damaged. The advantage of getElementsByClassName() is that you can directly paste a class attribute name on the one you want to select. One element can There are multiple class names. In actual projects, code reuse is often emphasized. Code reuse is actually classification. For example, a website often has a theme background color, and tens of thousands of pages on the website are all a certain color. You only need Define a color class style and then introduce this class name on each page.

Summarize

This article not only explains the getElementsByClassName() method, but also explains the three methods of selecting elements in Javascript through comparison, which correspond to the element selector, id selector, and class selector in CSS. By comparing CSS selection and Javascript selector (DOM method) to reduce the memory burden of learning, learn technology from a system perspective, and understand a technical standard from the perspective of a standard committee developer.

The above is the detailed content of A detailed explanation of Javascript class selector methods. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:yanhuangxueyuan. If there is any infringement, please contact admin@php.cn delete

JavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

See all articles