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 相关文章推荐
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 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
19个超实用的PHP代码片段
2014/03/14 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
javascript折半查找详解
2015/01/26 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
JNI的定义
2012/11/25 面试题
房地产还款计划书
2014/01/10 职场文书
最新创业融资计划书
2014/01/19 职场文书
学校评语大全
2014/05/06 职场文书
班训口号大全
2014/06/18 职场文书
房产授权委托书范本
2014/09/22 职场文书
银行授权委托书样本
2014/10/13 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
MySQL约束超详解
2021/09/04 MySQL
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL