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精华代码集
Jan 24 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
深入理解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/06/20 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
python基础教程之Hello World!
2014/08/29 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
Python如何实现定时器功能
2020/05/28 Python
python温度转换华氏温度实现代码
2020/12/06 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
诚信承诺书范文
2014/03/27 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
驾驶员培训方案
2014/05/01 职场文书
介绍长城的导游词
2015/01/30 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs