脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript Dom

JavaScript变量Dom对象的所有属性

 更新时间：2020年04月30日 16:05:54   作者：枳狸  
这篇文章主要介绍了JavaScript变量Dom对象的所有属性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

DOM对象的HTML:

　　<button>Disable State</buttom>

1,遍历DOM对象所具有的属性（全部，不管是否在HTML tag中是否设置）

<!DOCTYPE html>
<html>

<body>
  <button id="btnToggleState" onclick="toggleStateManagement()">
      Disable State
  </button>
</body>
<script>
  var obj = document.getElementById("btnToggleState");
  var s = "";
  for (var elem in obj) {
    s += elem + "\n";
  }
  alert(s);
</script>
</html>

结果：

2.遍历DOM对象在HTML中设置过的属性：

　　每一个attribute属性有一个附加属性specified，当属性是HTML Element的属性(指写在代码中可见的)，或者是通过setAttribute方法进行的添加的时候，它的值为 true。

<!DOCTYPE html>
<html>

<body>
  <button id="btnToggleState" onclick="toggleStateManagement()">
      Disable State
    </button>
</body>
<script>
  // var obj = document.getElementById("btnToggleState");
  // var s = "";
  // for (var elem in obj) {
  //   s += elem + "\n";
  // }
  // alert(s);


  var obj = document.getElementById("btnToggleState");
  var pairs = new Array();
  for (var i = 0, len = obj.attributes.length; i < len; i++) {
    var name = obj.attributes[i].nodeName;
    var value = obj.attributes[i].nodeValue;
    if (obj.attributes[i].specified) {
      pairs.push(name + "=\' " + value + "\' ")
    }
  }
  alert(pairs);
</script>

</html>

结果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • uni-app自定义组件和通信的方式

    uni-app自定义组件和通信的方式

    组件是 vue 技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升,组件可以使用全局注册和页面引入两种方式进行使用,对uni-app自定义组件和通信相关知识感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • 浅谈javascript中基本包装类型

    浅谈javascript中基本包装类型

    在JavaScript中，和JAVA类似，也提供了对于基本数据类型的包装类型。例如Number、Boolean、String类型。下面我们就来详细探讨下吧。
    2015-06-06
  • js实现字符串和数组之间相互转换操作

    js实现字符串和数组之间相互转换操作

    这篇文章主要介绍了js实现字符串和数组之间相互转换操作的相关资料，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 一个javascript参数的小问题

    一个javascript参数的小问题

    2008-03-03
  • 基于js粘贴事件paste简单解析以及遇到的坑

    基于js粘贴事件paste简单解析以及遇到的坑

    下面小编就为大家带来一篇基于js粘贴事件paste简单解析以及遇到的坑。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Javascript模仿淘宝信用评价实例(附源码)

    Javascript模仿淘宝信用评价实例(附源码)

    这篇文章主要介绍了Javascript模仿淘宝信用评价功能实现方法,以完整实例形式分析了JavaScript响应鼠标事件动态改变页面元素的相关技巧,并附带了完整的实例代码供读者下载参考,需要的朋友可以参考下
    2015-11-11
  • echarts柱状图背景重叠组合而非并列的实现代码

    echarts柱状图背景重叠组合而非并列的实现代码

    这篇文章主要给大家介绍了关于echarts柱状图背景重叠组合而非并列的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 一种基于浏览器的自动小票机打印实现方案(js版)

    一种基于浏览器的自动小票机打印实现方案(js版)

    这篇文章主要介绍了一种基于浏览器的自动小票机打印实现方案(js版)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • 浅谈JavaScript的push(),pop(),concat()方法

    浅谈JavaScript的push(),pop(),concat()方法

    下面小编就为大家带来一篇浅谈JavaScript的push(),pop(),concat()方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • TypeScript开发中规范编码来提高代码的可读性

    TypeScript开发中规范编码来提高代码的可读性

    在TypeScript中,我们通过使用类型别名reference指令、类型守卫、泛型、接口、类型别名等来提高代码的可维护性以及可读性,这篇文章主要介绍了TypeScript开发中规范编码来提高代码的可读性,需要的朋友可以参考下
    2023-12-12

最新评论