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 window.opener返回父页面的应用
Oct 24 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
JS如何生成动态列表
Sep 22 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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 多维数组排序实现代码
2009/08/05 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
Python实现单词翻译功能
2017/06/06 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
养殖项目策划书范文
2014/01/13 职场文书
青年文明号复核材料
2014/02/11 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
小学大队长竞选稿
2015/11/20 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python