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 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
jquery实现心算练习代码
Dec 06 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
如何离线执行php任务
2017/02/21 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JS 判断代码全收集
2009/04/28 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
node.js require() 源码解读
2015/12/13 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
浅谈django的render函数的参数问题
2018/10/16 Python
python3实现弹弹球小游戏
2019/11/25 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
python 递归相关知识总结
2021/03/03 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
公积金贷款承诺书
2015/04/30 职场文书
教师节获奖感言
2015/07/31 职场文书