如何使用JavaScript获取HTML标签的可用属性？

要获取Canvas、Input、Audio这类元素的特殊属性（比如Canvas的width/height、Input的value/type等），可以通过以下几种方式实现，直接在控制台展示：

1. 获取元素上显式设置的属性（HTML定义或JS动态设置） #

HTML元素的attributes属性会返回一个NamedNodeMap集合，包含所有在元素上显式声明的属性（包括原生属性和自定义属性）。可以将其转为数组后格式化输出：

// 以Canvas为例
const canvas = document.querySelector('canvas');
// 转换为结构化数组
const explicitAttributes = Array.from(canvas.attributes).map(attr => ({
  属性名: attr.name,
 属性值: attr.value
}));
console.log('显式设置的属性:', explicitAttributes);

2. 获取元素的原生属性（含默认值） #

如果需要获取元素的原生属性（即使没在HTML中设置，也能拿到默认值，比如Canvas默认的width=300、height=150），可以直接访问元素的实例属性，或者通过遍历自身属性过滤出非方法的属性：

针对特定元素的直接访问 #

const canvas = document.querySelector('canvas');
const canvasCoreProps = {
  画布宽度: canvas.width,
  画布高度: canvas.height,
  元素ID: canvas.id,
  类名: canvas.className
};
console.log('Canvas核心属性（含默认值）:', canvasCoreProps);

// Input元素示例
const input = document.querySelector('input');
const inputCoreProps = {
  输入值: input.value,
  输入类型: input.type,
  是否禁用: input.disabled,
  占位文本: input.placeholder
};
console.log('Input核心属性:', inputCoreProps);

通用方法（获取所有非方法类原生属性） #

function getElementNativeProperties(element) {
  const props = {};
  // 遍历元素自身的所有属性名
  Object.getOwnPropertyNames(element).forEach(prop => {
    const value = element[prop];
    // 排除方法和内部私有属性（以_开头）
    if (typeof value !== 'function' && !prop.startsWith('_')) {
      props[prop] = value;
    }
  });
  return props;
}

// 测试Audio元素
const audio = document.querySelector('audio');
console.log('Audio原生属性:', getElementNativeProperties(audio));

注意：元素的原生属性（比如Canvas的width）和CSS样式属性（通过getComputedStyle获取的width）是不同的概念。例如Canvas的width是画布的像素尺寸，而CSS的width是元素在页面上的显示尺寸，两者可能不一致。

内容的提问来源于stack exchange，提问作者isaid