JavaScript设置获取和设置属性的方法

 更新时间:2015年03月04日 11:09:53   投稿:hebedich  
这篇文章主要介绍了JavaScript设置获取和设置属性的方法,学会使用getAttribute、setAttribute的用法,需要的朋友可以参考下

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。

以上就是本文的全部内容了,有需要的小伙伴来学习下,希望大家能够喜欢。

相关文章

  • JS使用new操作符创建对象的方法分析

    JS使用new操作符创建对象的方法分析

    这篇文章主要介绍了JS使用new操作符创建对象的方法,结合实例形式分析了javascript面向对象程序设计类的定义、new操作符对象的创建及相关操作注意事项,需要的朋友可以参考下
    2019-05-05
  • js导出table数据到excel即导出为EXCEL文档的方法

    js导出table数据到excel即导出为EXCEL文档的方法

    导出table为EXCEL文档的方法有很多,在本文为大家介绍下js中时如何做到的,感兴趣的朋友可以参考下
    2013-10-10
  • BootStrap table删除指定行的注意事项(笔记整理)

    BootStrap table删除指定行的注意事项(笔记整理)

    在前端开发中遇到这样的问题,对于table指定行的数据进行删除,花了好长时间才解决,今天小编抽时间给大家介绍BootStrap table删除指定行的注意事项,需要的朋友参考下吧
    2017-02-02
  • 浅析script标签中的defer与async属性

    浅析script标签中的defer与async属性

    最近在网上看到一个前辈在写script标签的时候,居然同时写了async和defer属性,想着这是什么意思呢?所以决定深入的了解下这其中的学问,以下这篇文章就是个人在学习了之后的一些总结分析,有需要的朋友们可以参考借鉴,下面来一起学习学习吧。
    2016-11-11
  • JavaScript实现微信红包算法及问题解决方法

    JavaScript实现微信红包算法及问题解决方法

    这篇文章主要介绍了JavaScript实现微信红包算法及遇到的问题解决方法,需要的朋友可以参考下
    2018-04-04
  • WebPack工具运行原理及入门教程

    WebPack工具运行原理及入门教程

    这篇文章主要介绍了WebPack工具运行原理及入门教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • 微信小程序自定义模态弹窗组件详解

    微信小程序自定义模态弹窗组件详解

    这篇文章主要为大家详细介绍了微信小程序自定义模态弹窗组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 微信小程序动态增加按钮组件

    微信小程序动态增加按钮组件

    这篇文章主要为大家详细介绍了微信小程序动态增加按钮组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • Bootstrap框架实现广告轮播效果

    Bootstrap框架实现广告轮播效果

    这篇文章主要为大家详细介绍了Bootstrap框架结合JavaScript实现广告轮播特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript函数的使用详解

    JavaScript函数的使用详解

    这篇文章主要为大家介绍了JavaScript函数的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12

最新评论