登录  /  注册
首页 > web前端 > js教程 > 正文

一文详解Javascript类选择器方法

藏色散人
发布: 2022-08-06 14:36:18
转载
4299人浏览过

本篇文章给大家介绍有关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属性名就可以,一个元素可以有多个类名。实际工程中往往讲究代码复用,代码复用其实就是归类,比如一个网站往往有一个主题背景颜色,网站的数千数万个页面都是某个颜色,你只需要定义一个颜色类样式, 然后通过在每个页面引入这个类名就可以。

总结

本文不仅仅讲解了getElementsByClassName()方法,通过对比的方式讲解了Javascript选择元素的三种方法,对应的是CSS中的元素选择器、id选择器、class类选择器,通过对比CSS选择器和Javascript选择器(DOM方法), 来降低学习的记忆负担,从系统的角度去学习技术,站在标准委员会制定者的角度去理解一个技术标准。

以上就是一文详解Javascript类选择器方法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:yanhuangxueyuan网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号