JavaScript变量Dom对象的所有属性


Posted in Javascript onApril 30, 2020

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>

结果:

JavaScript变量Dom对象的所有属性

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>

结果如下:

JavaScript变量Dom对象的所有属性

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
深入了解javascript 数组的sort方法
Jun 01 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 #Javascript
VSCode搭建Vue项目的方法
Apr 30 #Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
vue使用map代替Aarry数组循环遍历的方法
Apr 30 #Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 #jQuery
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 #Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 #Javascript
You might like
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
prototype class详解
2006/09/07 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
Vue瀑布流插件的使用示例
2018/09/19 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
Python入门篇之数字
2014/10/20 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
python随机取list中的元素方法
2018/04/08 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
利用python开发app实战的方法
2019/07/09 Python
python中update的基本使用方法详解
2019/07/17 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
python中xlutils库用法浅析
2020/12/29 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
法院信息化建设方案
2014/05/21 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python