本文介绍如何使用原生 javascript 获取指定 html 元素当前实际存在的属性名与值，并以可读格式输出到控制台；重点区分“已设置的属性”与“浏览器支持的全部合法属性”，避免常见误解。
本文介绍如何使用原生 javascript 获取指定 html 元素当前实际存在的属性名与值，并以可读格式输出到控制台；重点区分“已设置的属性”与“浏览器支持的全部合法属性”，避免常见误解。
在前端开发中，我们常通过 getComputedStyle() 获取元素的最终计算样式，但 JavaScript 并不存在类似 getComputedAttributes() 的原生方法来获取“所有可能的合法属性”。需要明确一个关键前提：HTML 元素的“可用属性”（如 的 width、height，或 的 type、placeholder）是语义层面的规范定义，而非运行时可枚举的元数据；浏览器不会暴露一份动态的、标签维度的“合法属性清单”。
因此，实际可行且标准的做法，是获取元素当前已显式声明的属性（即 HTML 中写入或通过 element.setAttribute() 动态添加的属性），这可通过 element.attributes 集合实现——它返回一个实时的 NamedNodeMap，包含所有已存在的属性节点。
以下是一个简洁可靠的工具函数：
function getAttributes(element) {
const attributes = element.attributes;
const attributeList = [];
for (let i = 0; i <p>✅ <strong>优点</strong>： </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="overflowclass">DeepBI DHTML 页面生成器</a>
<p class="overflowclass">生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 纯原生、无依赖、兼容所有现代浏览器及 IE9+；
- 精确反映 DOM 当前状态（包括 JS 动态设置的属性）；
- 保留原始大小写（HTML 属性名不区分大小写，但
attributes返回的是实际书写形式）。
⚠️ 重要注意事项：
- 此方法仅返回已设置的属性，不会列出未声明但合法的属性（例如
未写width，就不会出现在结果中）； - 它不等同于“获取该标签支持的所有属性”——后者需查阅 HTML 规范或维护静态映射表（如
{ canvas: ['width', 'height', 'id', 'class', 'style', ...'] }），且存在浏览器差异与版本演进问题； -
attributes不包含由 JS 直接赋值的 DOM 属性（如element.className或element.hidden = true），除非它们也同步反映为 HTML 属性（如class对应class属性，hidden对应hidden属性）； - 布尔属性（如
disabled,required）若存在即值为空字符串""，符合 HTML 序列化规范。
? 进阶提示：若需结构化数据而非字符串，可改写为返回对象：
function getAttributeObject(element) {
return Array.from(element.attributes).reduce((obj, attr) => {
obj[attr.name] = attr.value;
return obj;
}, {});
}
// 返回：{ width: "500", height: "300", id: "myCanvas" }
总结：没有万能的 getComputedAttributes()，但 element.attributes 是获取真实已设置属性的权威、轻量、标准化方案。理解其边界（不预测、不补全、只反映现状），是正确使用它的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
