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中Object和Function的关系的三段简单代码
Jun 27 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
JS实现的类似微信聊天效果示例
Jan 29 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的memory_limit限制的方法分享
2012/02/21 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
javascript 写类方式之十
2009/07/05 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
python3安装crypto出错及解决方法
2019/07/30 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
为什么是 Python -m
2020/06/19 Python
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
七一讲话心得体会
2014/09/05 职场文书
个人年底工作总结
2015/03/10 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
mysql数据库隔离级别详解
2022/06/16 MySQL