JavaScript遍历DOM对象属性与指定属性详解
作者:页面旅途时间:2026-10-24 04:32:30浏览:630
本文介绍如何在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>
运行结果:

筛选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>
具体结果如下:

以上内容为本文全部,旨在为读者学习提供助力,同时恳请多多支持本站。
作者最新文章
JS监听滚动事件:回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比:轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么?前端开发中的作用与应用场景解析
2026-11-04 23:17:54
