本文介绍如何使用原生 javascript 获取指定 html 元素当前实际存在的属性名与值，并以可读格式输出到控制台；重点区分“已设置的属性”与“浏览器支持的全部合法属性”，避免常见误解。
本文介绍如何使用原生 javascript 获取指定 html 元素当前实际存在的属性名与值，并以可读格式输出到控制台；重点区分“已设置的属性”与“浏览器支持的全部合法属性”，避免常见误解。
在前端开发中，我们常通过 getComputedStyle() 获取元素的最终计算样式，但 JavaScript 并不存在类似 getComputedAttributes() 的原生方法来获取“所有可能的合法属性”。需要明确一个关键前提：HTML 元素的“可用属性”（如 <canvas></canvas> 的 width、height，或 <input> 的 type、placeholder）是语义层面的规范定义，而非运行时可枚举的元数据；浏览器不会暴露一份动态的、标签维度的“合法属性清单”。
因此，实际可行且标准的做法，是获取元素当前已显式声明的属性（即 HTML 中写入或通过 element.setAttribute() 动态添加的属性），这可通过 element.attributes 集合实现——它返回一个实时的 NamedNodeMap，包含所有已存在的属性节点。
以下是一个简洁可靠的工具函数：
function getAttributes(element) {
const attributes = element.attributes;
const attributeList = [];
for (let i = 0; i < attributes.length; i++) {
const attr = attributes[i];
attributeList.push(`${attr.name}="${attr.value}"`);
}
return attributeList.join(' ');
}
// 使用示例
const canvas = document.querySelector('canvas');
console.log(getAttributes(canvas)); // 输出类似：width="500" height="300" id="myCanvas"
const input = document.getElementById('search-input');
console.log(getAttributes(input)); // 输出类似：type="text" placeholder="Search..." required=""✅ 优点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 纯原生、无依赖、兼容所有现代浏览器及 IE9+；
- 精确反映 DOM 当前状态（包括 JS 动态设置的属性）；
- 保留原始大小写（HTML 属性名不区分大小写，但
attributes返回的是实际书写形式）。
⚠️ 重要注意事项：
- 此方法仅返回已设置的属性，不会列出未声明但合法的属性（例如
<canvas></canvas>未写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 是获取真实已设置属性的权威、轻量、标准化方案。理解其边界（不预测、不补全、只反映现状），是正确使用它的前提。
