本文介绍如何使用原生 javascript 获取指定 html 元素当前实际存在的所有属性（name="value" 形式），并以可读字符串形式输出到控制台；需注意该方法仅返回显式声明的属性，不包含浏览器默认属性或未设置的合法属性。
本文介绍如何使用原生 javascript 获取指定 html 元素当前实际存在的所有属性（name="value" 形式），并以可读字符串形式输出到控制台；需注意该方法仅返回显式声明的属性，不包含浏览器默认属性或未设置的合法属性。
在 Web 开发中，我们常通过 getComputedStyle() 获取元素的计算样式，但 HTML 元素的属性（attributes）——如 <canvas width="500" height="300"> 中的 width 和 height——并不等同于 DOM 属性（properties），也不可通过样式 API 获取。JavaScript 并没有内置的 getComputedAttributes() 方法，但可通过 element.attributes 集合高效提取所有已声明的 HTML 属性。
element.attributes 是一个只读的 NamedNodeMap，包含所有显式写在 HTML 标签中的属性节点（包括布尔属性如 disabled、空值属性如 hidden 等）。以下是一个简洁、兼容性良好的工具函数：
function getAttributes(element) {
const attributes = element.attributes;
const attributeList = [];
for (let i = 0; i < attributes.length; i++) {
const attr = attributes[i];
// 处理布尔属性（如 disabled、checked）：无值时 value 为空字符串，但语义存在
const value = attr.value === '' ? '' : `="${attr.value}"`;
attributeList.push(`${attr.name}${value}`);
}
return attributeList.join(' ');
}
// 使用示例
const canvas = document.querySelector('canvas');
console.log(getAttributes(canvas)); // 输出类似：width="500" height="300" id="myCanvas"
const input = document.querySelector('input[type="text"]');
console.log(getAttributes(input)); // 如：type="text" placeholder="Enter name" required=""⚠️ 重要说明：
- ✅ 此方法返回的是当前 DOM 元素上实际存在的 HTML 属性（即 HTML 源码或通过 setAttribute() 动态添加的），而非浏览器支持的所有可能属性；
- ❌ 它不会列出未设置的合法属性（例如 <input> 支持 autocomplete，但若未声明则不会出现在结果中）；
- ❌ 也无法反映通过 JS 直接赋值的 DOM 属性（如 elem.className = 'active' 不会自动同步为 class attribute，除非调用 elem.setAttribute('class', 'active')）；
- ? 若需获取某标签的全部标准属性规范列表（如 <audio> 所有合法属性），需查阅 HTML 标准文档 或借助预定义映射表（如 { canvas: ['width', 'height', 'id', 'class', ...] }），这属于元数据层面，无法通过运行时 API 自动推导。
总结：element.attributes 是获取“已设置属性”的唯一标准、轻量、跨浏览器方案。将其封装为可复用函数，配合现代 ES6+ 语法（如扩展运算符 + Array.from()）亦可进一步简化：
立即学习“前端免费学习笔记（深入）”；
const getAttrs = el =>
Array.from(el.attributes)
.map(attr => `${attr.name}${attr.value ? `="${attr.value}"` : ''}`)
.join(' ');掌握这一技巧，有助于调试模板渲染、构建属性检查工具或实现自定义组件的属性透传逻辑。
