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 相关文章推荐
javascript操作select元素实例分析
Mar 27 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
微信小程序身份证验证方法实现详解
Jun 28 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中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
python 控制语句
2011/11/03 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
2014年父亲节活动方案
2014/03/06 职场文书
施工员岗位职责
2014/03/16 职场文书
2014年教务工作总结
2014/12/03 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
运动会广播稿100字
2015/08/19 职场文书
高二语文教学反思
2016/02/16 职场文书
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android