Home >Web Front-end >JS Tutorial >A detailed explanation of Javascript class selector methods
A detailed explanation of Javascript class selector methods
- 藏色散人forward
- 2022-08-06 14:36:184657browse
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!