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中获取frames中的元素示例代码
Jul 30 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
js实现加载更多功能实例
Oct 27 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 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函数
2010/02/16 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
一个精品风格的世界:Atterley
2019/05/01 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2014年维修工作总结
2014/11/22 职场文书
党员个人承诺书
2015/04/27 职场文书
护士旷工检讨书
2015/08/15 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Python绘画好看的星空图
2022/03/17 Python