把 HTML 元素变成 JS 可操作的“对象”，靠的是 DOM（文档对象模型）——浏览器把标签解析成节点树，每个节点都是一个对象，有属性、方法与事件。这跟“把 HTML 字符串转成 JSON 对象”是两件完全不同的事，很多新手会混。本文把两套做法都写清楚。

一、DOM 方向：把页面元素当对象用

元素对象自带的信息非常丰富：

const el = document.querySelector('#card');
const info = {

tag: el.tagName,                       // ‘DIV’

id: el.id,

classes: […el.classList],            // [‘card’,‘active’]

attrs: Object.fromEntries(

[…el.attributes].map(a => [a.name, a.value])

),

dataset: { …el.dataset },            // data-* 属性集合

rect: {                                // 尺寸与位置

w: el.offsetWidth, h: el.offsetHeight,

x: el.offsetLeft, y: el.offsetTop

},

styles: getComputedStyle(el),          // 计算后样式（只读为主）

text: el.textContent.trim(),

html: el.innerHTML,

childrenCount: el.children.length

};

console.log(info);

几个要点：dataset 是 data-xxx 属性的驼峰映射（data-user-id → dataset.userId），做组件配置最常用；getComputedStyle 拿到的是渲染后的值，比 el.style 更真实；offsetLeft 相对定位父级，要页面绝对坐标用 getBoundingClientRect()。

二、把整棵树转成普通对象（自定义遍历）

浏览器不会把整页给你一个纯数据对象，需要自己走：

function toNode(el) {
  return {
    tag: el.tagName.toLowerCase(),
    attrs: Object.fromEntries([...el.attributes].map(a => [a.name, a.value])),
    text: el.childElementCount ? '' : el.textContent.trim(),
    children: [...el.children].map(toNode)
  };
}
const tree = toNode(document.getElementById('app'));
JSON.stringify(tree, null, 2);

这适合做页面结构快照、模板调试、简易渲染器。注意它只走 element 节点，忽略文本与注释节点；要完整表达需改用 NodeFilter 遍历 childNodes。

三、字符串方向：HTML 文本 → 对象/JSON

如果拿到的是后端返回的 HTML 字符串，先解析成节点再取数据：

const html = `
  <ul id="menu">
    <li data-id="1" class="on">首页</li>
    <li data-id="2">文档</li>
  </ul>`;
// 方式1：DOMParser（推荐，不会执行脚本）

const doc = new DOMParser().parseFromString(html, ‘text/html’);

const items = […doc.querySelectorAll(‘#menu li’)]

.map(li => ({ id: +li.dataset.id, label: li.textContent, on: li.classList.contains(‘on’) }));
// 方式2：template 元素（同样安全）

const tpl = document.createElement(‘template’);

tpl.innerHTML = html;

const first = tpl.content.querySelector(‘li’);

// 1. URL 查询串 → 对象
const query = Object.fromEntries(new URLSearchParams(location.search));
// 2. 表单 → 对象

const form = Object.fromEntries(new FormData(formEl).entries());
// 3. data-* → 对象（含 JSON 值）

// <div data-config=‘{“limit”:10}’>

const cfg = JSON.parse(el.dataset.config);

function render(data) {
  const li = document.createElement('li');
  li.dataset.id = data.id;
  li.textContent = data.label;            // 用 textContent，天然防 XSS
  li.className = data.on ? 'on' : '';
  return li;
}
const ul = document.getElementById('menu');
ul.replaceChildren(...list.map(render));   // 一次性替换，性能优于循环 append