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 相关文章推荐
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 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
德生PL330测评
2021/03/02 无线电
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
Angular2库初探
2017/03/01 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
网络事业创业计划书范文
2014/01/09 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
Python实现科学占卜 让视频自动打码
2022/04/09 Python