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入门教程(9) Document文档对象
Jan 31 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
Javascript Objects详解
Sep 04 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 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
聊天室php&mysql(二)
2006/10/09 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
python执行精确的小数计算方法
2019/01/21 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
打架检讨书400字
2014/01/17 职场文书
小学生考试获奖感言
2014/01/30 职场文书
2014年国培研修感言
2014/03/09 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
同意迁入证明模板
2014/10/26 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
PL350与SW11的比较
2021/04/22 无线电
golang 实现菜单树的生成方式
2021/04/28 Golang
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS