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 金额文本框实现代码
Feb 14 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
javascript RegExp 使用说明
May 21 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 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
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
php strftime函数的详细用法
2018/06/21 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
js下弹出窗口的变通
2007/04/18 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
将python代码和注释分离的方法
2018/04/21 Python
python人民币小写转大写辅助工具
2018/06/20 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
毕业生自荐信
2013/12/14 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
函授生自我鉴定
2014/03/25 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
社保转移委托书范本
2014/10/08 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers