JavaScript中对象解构不能直接提取DOM节点属性，需先通过dataset、getAttribute()、属性访问器等将DOM属性转为普通对象再解构，如const { userId } = el.dataset或const { id, className } = { id: el.id, className: el.className }。
JavaScript 中对象解构本身不能直接“提取 DOM 节点属性”，但可以结合 getAttribute()、dataset、style 或属性访问器（如 node.id、node.className）等，把 DOM 元素的属性值先组织成普通对象，再用解构语法提取。
用 dataset 解构自定义 data 属性
HTML 中以 data- 开头的属性会自动映射到元素的 dataset 对象，该对象是类数组结构，键名自动转为驼峰式（如 data-user-id → userId），适合解构：
<div id="user" data-user-id="123" data-user-role="admin" data-is-active="true"></div>
JS 中可这样解构：
const el = document.getElementById('user');
const { userId, userRole, isActive } = el.dataset;
console.log(userId); // "123"
console.log(userRole); // "admin"
console.log(isActive); // "true"（注意：始终是字符串）
手动构造对象后解构常用属性
DOM 元素本身不是纯对象，不能直接解构 id、className、textContent 等。需先转成对象字面量：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const el = document.querySelector('button');
// 提取并命名你关心的属性
const { id, className, textContent, tagName } = {
id: el.id,
className: el.className,
textContent: el.textContent,
tagName: el.tagName.toLowerCase()
};
console.log(id, className, textContent); // 如：'submit-btn' 'btn primary' '提交'
解构 style 或 attributes（需额外处理）
el.style 是 CSSStyleDeclaration，不支持直接解构；el.attributes 是 NamedNodeMap，也不是普通对象。需转换：
- 提取内联样式（仅 style 属性中声明的）：
const { color, fontSize, backgroundColor } = Object.fromEntries(
Array.from(el.style).map(prop => [prop, el.style[prop]])
);
- 提取所有 HTML 属性（含
id、class、disabled等）：
const attrs = Object.fromEntries(
Array.from(el.attributes).map(attr => [attr.name, attr.value])
);
const { id, class: className, disabled } = attrs;
⚠️ 注意：class 是保留字，解构时要用别名（如 class: className）。
实用技巧：封装成可复用函数
避免每次手动构造对象，可写一个工具函数：
const getProps = (el, keys) =>
Object.fromEntries(keys.map(key => [key, el[key] ?? el.getAttribute(key)]));
// 使用
const { id, href, src, dataset: { theme } } = getProps(document.querySelector('a'), ['id', 'href', 'src']);
或更进一步支持 dataset 和常见属性混合提取：
const extract = (el, config) => {
const obj = {};
for (const key of config) {
if (key.startsWith('data-')) {
const camelKey = key.replace(/-([a-z])/g, (_, g) => g.toUpperCase());
obj[camelKey] = el.dataset[camelKey];
} else {
obj[key] = el[key] ?? el.getAttribute(key);
}
}
return obj;
};
const { id, href, userId } = extract(document.querySelector('a'), ['id', 'href', 'data-user-id']);
不复杂但容易忽略：DOM 节点不是普通对象，解构前必须显式提取属性值并组织成 plain object —— 这才是关键一步。
