温江做网站

咨询热线：

028-86922220

×

01

关于我们

02

服务项目

高端网站建设

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03

小程序开发

小程序开发

04

案例展示

网站建设案例

小程序案例

电商平台案例

系统平台案例

05

建站动态

小程序开发

外贸网站建设

APP软件开发

06

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

新网创想网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

Javascript类选择器方法怎么使用

本文小编为大家详细介绍“Javascript类选择器方法怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Javascript类选择器方法怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联2013年开创至今，是专业互联网技术服务公司，拥有项目做网站、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元应县做网站,已为上家服务,为应县各地企业和个人服务,联系电话:028-86922220

Javascript类选择器方法

浏览器作为一个生态和平台，它会提供一系列编程语言可以调用控制的函数方法，对于浏览器而言，自然是通过Javascript语言调用浏览器内置方法，对于操作系统而言，多数语言调可以调用它的API。

CSS通过id选择器或者class类选择器可以给HTML元素添加样式，浏览器平台和CSS一样也提供了可供Javascript语言调用的id选择器和class类选择器方法，之前使用的id选择器方法是getElementById()，本文要讲解的类选择器方法是getElementsByClassName()，通过名字你都可以看出他们要表达的意思，标准委员会制定这些标准也不是心血来潮随意命名，都尽量做到顾其名思其义，当然这是针对英语语言的顾名思义。

ID的特点是选择一个，class的点特点批量选择，比如通过Javascript动态地给一些元素批量添加样式属性，就主要用到getElementsByClassName()方法。

案例

在一个已经写好的HTML和css的文件基础上添加Javascript代码，实现用户可以在网页上批量自定义元素的样式。

48   
49   
50   
51   
52   
53   
54       
55       圆弧

直线

矩形

曲线

倒角 60 61 78

代码解析

第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。

getElementsByTagName()

getElementsByTagName()方法和getElementsByClassName()方法一样可以用于批量选择元素，返回的结果从数据类型的角度看都是数组对象，区别之处在于getElementsByTagName()方法是通过元素的标签名字来选择元素，对应CSS的知识点就是元素选择器，getElementsByTagName()方法名字中的英文Tag就是标签的意思。

应用

学习了一些选择元素的方法，知道他们各自的特点，就是为了应用，实际应用的时候如何选择getElementById()、getElementsByClassName()和getElementsByTagName()。这一点可以参考CSS，在CSS中一般都是使用类选择器，偶尔使用元素和id选择器，使用元素的标签名字来选择元素，如果一个完整的页面很多地方都用要某个元素，而这些元素比如要求背景颜色不一样，你使用getElementsByTagName()方法就会误伤，getElementsByClassName()的好处就是你想选择谁，直接贴一个class属性名就可以，一个元素可以有多个类名。实际工程中往往讲究代码复用，代码复用其实就是归类，比如一个网站往往有一个主题背景颜色，网站的数千数万个页面都是某个颜色，你只需要定义一个颜色类样式，然后通过在每个页面引入这个类名就可以。

读到这里，这篇“Javascript类选择器方法怎么使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

分享题目：Javascript类选择器方法怎么使用
分享路径：http://wjwzjz.com/article/jjhgpg.html

其他资讯

分享至：

公司简介发展历程

高端网站建设小程序开发 APP开发网络营销

行业新闻建站学堂常见问题

公司地址人才招聘

成都



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号

版权所有：成都新网创想广告设计中心（普通合伙）蜀ICP备11025516号-13

服务热线：028-86922220