JavaScript遍历DOM对象属性与指定属性详解

作者：页面旅途

时间：2026-10-24

本文介绍如何在JavaScript中遍历DOM对象的所有属性，以及筛选仅在HTML标签中显式设置的属性。通过演示代码，解析attribute对象的specified属性用法，区分代码可见属性与默认属性，帮助开发者准确获取元素属性状态。

文章目录

遍历DOM对象的所有属性

HTML层面的DOM对象属性展示：

<button>Disable State</buttom>

1，遍历DOM对象的所有属性（涵盖全部属性，无论是否在HTML标签中显式设置）


<!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>

运行结果：

遍历DOM对象的所有属性

筛选HTML中显式设置的属性

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>

具体结果如下：

遍历DOM对象的所有属性