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 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
vue购物车插件编写代码
Nov 27 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
Vue.js图片预览插件使用详解
Aug 27 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 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 身份验证方面的函数
2009/10/11 PHP
php模板原理讲解
2013/11/13 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JavaScript 数组详解
2013/10/10 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
python编写微信公众号首图思路详解
2019/12/13 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
2014年个人债务授权委托书范本
2014/09/22 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
奠基仪式致辞
2015/07/30 职场文书
《月光曲》教学反思
2016/02/16 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
Linux中各个目录的作用与内容
2022/06/28 Servers