JavaScript 中对象解构怎么提取 DOM 节点属性-js教程-PHP中文网

javascript中对象解构不能直接提取dom节点属性，需先通过dataset、getattribute()、属性访问器等将dom属性转为普通对象再解构，如const { userid } = el.dataset或const { id, classname } = { id: el.id, classname: el.classname }。

javascript 中对象解构怎么提取 dom 节点属性

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 等。需先转成对象字面量：

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，也不是普通对象。需转换：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

提取内联样式（仅 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 —— 这才是关键一步。