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 错误处理与调试经验总结
Aug 10 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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实现的九九乘法口诀表简洁版
2014/07/28 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
详解django自定义中间件处理
2018/11/21 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
python源文件的字符编码知识点详解
2021/03/04 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
结婚保证书范文
2014/04/29 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
公司新员工欢迎词
2015/09/30 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python