Maison > Article > interface Web > Une explication détaillée des méthodes de sélection de classe Javascript
Une explication détaillée des méthodes de sélection de classe Javascript
- 藏色散人avant
- 2022-08-06 14:36:184556parcourir
本篇文章给大家介绍有关Javascript类选择器方法，希望对需要的朋友有所帮助！
Javascript类选择器方法
浏览器作为一个生态和平台，它会提供一系列编程语言可以调用控制的函数方法，对于浏览器而言，自然是通过Javascript语言调用浏览器内置方法， 对于操作系统而言，多数语言调可以调用它的API。
CSS通过id选择器或者class类选择器可以给HTML元素添加样式，浏览器平台和CSS一样也提供了可供Javascript语言调用的id选择器和class类选择器方法，之前使用的id选择器方法是getElementById()， 本文要讲解的类选择器方法是getElementsByClassName()，通过名字你都可以看出他们要表达的意思，标准委员会制定这些标准也不是心血来潮随意命名，都尽量做到顾其名思其义，当然这是针对英语语言的顾名思义。
ID的特点是选择一个，class的点特点批量选择，比如通过Javascript动态地给一些元素批量添加样式属性，就主要用到getElementsByClassName()方法。【相关推荐：JavaScript视频教程】
案例
在一个已经写好的HTML和css的文件基础上添加Javascript代码，实现用户可以在网页上批量自定义元素的样式。
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>代码解析
第53行到第60行代码定义的是一系列应用界面的命令按钮，第50和第51行代码定义的是两个具有自定义其它元素样式的功能按钮button，当你单击其中一个功能按钮button时候，会调用 script标签中的函数fun1()或fun2(),比如执行fun1函数后，第53行到第60行代码定义的元素背景元素颜色会批量修改，由灰色变为#00aaff色。
第63行代码通过类选择器方法getElementsByClassName()选中类属性名是“div”的所有元素，getElementById()方法返回的一个对象，也就是元素本身，getElementsByClassName()方法返回 的是所有元素对象组成的数组。这也就是说，如果你想更改一个元素的属性值，通过数组下标的方式访问元素，比如arr[0]表示第55行代码定义的div元素。 如果直接写arr.style.backgroundColor="#00aaff";更改arr全部元素的背景颜色是不合法的，arr是一个数组，它没有.style样式属性，要通过arr[i].style.backgroundColor="#00aaff这样的形式来重置 元素背景颜色。
要更改的元素比较多，而元素要更改的颜色也一致，所以可以通过for循环结构程序来完成，代码第67行到第70行的作用就是遍历数组arr中的所有div元素，然后更改他们的背景颜色。
第65行和第72行分别定义了函数fun1和fun2，可以通过鼠标单击事件调用，fun1的功能是批量把元素的背景颜色更改为#00aaff，fun1的功能是批量把元素的背景颜色更改为#1abc9c。
<strong>getElementsByTagName()</strong>
getElementsByTagName()方法和getElementsByClassName()方法一样可以用于批量选择元素，返回的结果从数据类型的角度看都是数组对象，区别之处在于getElementsByTagName()方法是通过元素的标签名字来选择元素， 对应CSS的知识点就是元素选择器，getElementsByTagName()方法名字中的英文Tag就是标签的意思。
应用
学习了一些选择元素的方法，知道他们各自的特点，就是为了应用，实际应用的时候如何选择getElementById()、getElementsByClassName()和getElementsByTagName()。这一点可以参考CSS，在CSS中一般都是使用类选择器， 偶尔使用元素和id选择器，使用元素的标签名字来选择元素，如果一个完整的页面很多地方都用要某个元素，而这些元素比如要求背景颜色不一样，你使用getElementsByTagName()方法就会误伤，getElementsByClassName()的好处就是 你想选择谁，直接贴一个class属性名就可以，一个元素可以有多个类名。实际工程中往往讲究代码复用，代码复用其实就是归类，比如一个网站往往有一个主题背景颜色，网站的数千数万个页面都是某个颜色，你只需要定义一个颜色类样式， 然后通过在每个页面引入这个类名就可以。
总结
Cet article explique non seulement la méthode getElementsByClassName(), mais explique également les trois méthodes de sélection d'éléments en Javascript par comparaison, qui correspondent au sélecteur d'élément, au sélecteur d'identifiant et au sélecteur de classe en CSS En comparant le sélecteur CSS et le sélecteur Javascript. (méthode DOM), pour réduire la charge de mémoire liée à l'apprentissage, apprendre la technologie du point de vue du système et comprendre une norme technique du point de vue d'un développeur de comité de norme.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!