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 常用操作代码
Mar 14 Javascript
javascript初学者常用技巧
Sep 02 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 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
php Mysql日期和时间函数集合
2007/11/16 PHP
php HandlerSocket的使用
2011/05/02 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
jQuery each()小议
2010/03/18 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现分割文件及合并文件的方法
2015/07/10 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python实现多层感知器
2019/01/18 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
django 模型字段设置默认值代码
2020/07/15 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
以下的初始化有什么区别
2013/12/16 面试题
学校门卫工作职责
2013/12/07 职场文书
社区志愿者心得体会
2014/01/03 职场文书
小学毕业感言150字
2014/02/05 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
python获取字符串中的email
2022/03/31 Python