JavaScript设置获取和设置属性的方法


Posted in Javascript onMarch 04, 2015

getAttribute

该方法用来获取元素的属性,调用方式如下所示:

object.getAttribute(attribute)

以此前介绍的一些方法不同,getAttribute方法不属于document对象,所以不能通过document对象调用。它只能通过元素节点对象来调用。

该方法只接受一个参数,你指定要查询的属性的名字。如果指定的属性没有设置,结果将返回null对象。

setAttribute

以上面作用相反的是setAttribute,该方法被用来设置元素节点的属性。调用方式如下所示:

object.setAttribute(attribute)

该方法只接受一个参数,即你要设置的属性。

拓展阅读

通过setAttribute对文档做了修改之后,在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是改变前的值,也就是说,setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,在动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面。

上面的两个方法属于DOM Level 1中新增的API,在他们出现之前,可以通过另外一种方法来实现,举例如下

获取属性:

var val = element.attribute //获取属性

上面的等价于

var val = element.getAttribute('attribute');  

设置属性:

element.attribute = "the new value";

其等价于

element.setAttribute("attribute", "the new value");   

如果你想偷懒少敲键盘的话,那么推荐上面的方式,不过最佳实践还是要推崇DOM标准,即使用setAttribute和getAttribute。

以上就是本文的全部内容了,有需要的小伙伴来学习下,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
了解重排与重绘
May 29 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 #Javascript
深入探讨javascript中的数据类型
Mar 04 #Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 #Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 #Javascript
jQuery中大家不太了解的几个方法
Mar 04 #Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 #Javascript
js计算德州扑克牌面值的方法
Mar 04 #Javascript
You might like
新闻分类录入、显示系统
2006/10/09 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
React 组件间的通信示例
2018/06/14 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
python实现数据图表
2017/07/29 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python判断输入日期为第几天的实例
2018/11/13 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Python 使用office365邮箱的示例
2020/10/29 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
社区活动策划方案
2014/08/21 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android
Python正则表达式中flags参数的实例详解
2022/04/01 Python