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 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
vue实现把接口单独存放在一个文件方式
Aug 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
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
深入浅析php json 格式控制
2015/12/24 PHP
js注意img图片的onerror事件的分析
2011/01/01 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python实现用户答题功能
2018/01/17 Python
详解python单元测试框架unittest
2018/07/02 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
简单的Python调度器Schedule详解
2019/08/30 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
国企干部对照检查材料
2014/08/22 职场文书
倡议书格式
2014/08/30 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
怒海潜将观后感
2015/06/11 职场文书
python APScheduler执行定时任务介绍
2022/04/19 Python
nginx 配置缓存
2022/05/11 Servers