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 相关文章推荐
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
实例讲解vue源码架构
Jan 24 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
react 组件传值的三种方法
Jun 03 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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
什么是MVC,好东西啊
2007/05/03 PHP
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
Angular2库初探
2017/03/01 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
简单实现Python爬取网络图片
2018/04/01 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
上班打牌检讨书
2014/02/07 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
个人银行贷款担保书
2014/04/01 职场文书
奥运会口号
2014/06/13 职场文书
婚庆答谢词
2015/01/04 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书