答案：将HTML片段转为JS对象可通过DOMParser或innerHTML创建DOM节点，再提取为可操作的Element对象；若需结构化数据，可进一步遍历DOM并映射到自定义JS对象。示例包括解析用户信息HTML并转换为包含姓名、邮箱等属性的数据对象，适用于动态内容处理与数据提取场景。
把已有的HTML片段转化为JS对象，通常是指将HTML结构解析为JavaScript中可操作的对象形式，比如DOM节点对象或自定义的数据对象。这个过程不涉及直接“反序列化”HTML为JSON那样的纯对象，而是通过
浏览器
的API将字符串形式的HTML转换为可在脚本中操作的DOM元素或文档片段。
使用 DOMParser 解析HTML字符串
DOMParser 是浏览器提供的原生API，能将HTML字符串解析为DOM文档或片段，返回标准的JS对象（如Element、DocumentFragment）。
适用于需要动态插入、遍历或修改HTML内容的场景。
示例：
使用 innerHTML 配合临时容器
这是最常见的方法：创建一个临时的DOM容器（如div），设置其 innerHTML 为HTML字符串，然后提取子元素作为JS对象。
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
适合在不需要完整文档结构时快速解析片段。
示例：
提取为自定义JS数据对象（结构化）
如果目标不是操作DOM，而是将HTML内容提取为结构化的JS对象（例如用于存储或传输），则需手动解析DOM并构建数据模型。
示例：将用户信息HTML转为JS对象
基本上就这些。根据你的需求选择方法：想操作DOM用 DOMParser 或 innerHTML；想提取数据就再加一步遍历和映射。整个过程不复杂但容易忽略细节，比如标签闭合、
编码
格式等。
const htmlString = `张三`;
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
const element = doc.body.firstChild; // 获取解析后的DOM元素
// 现在可以像操作普通DOM一样使用element
console.log(element.tagName); // DIV
console.log(element.querySelector('span').textContent); // 张三const htmlString = `- 选项1
- 选项2
`;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;
const listElement = tempDiv.firstElementChild;
// listElement 现在是一个可操作的UL DOM对象
console.log(listElement.nodeName); // UL
console.log(listElement.children.length); // 2const htmlString = `
李四
li4@example.com
`;
const temp = document.createElement('div');
temp.innerHTML = htmlString;
const container = temp.firstElementChild;
const userData = {};
container.querySelectorAll('[data-field]').forEach(el => {
userData[el.dataset.field] = el.textContent;
});
console.log(userData); // { name: "李四", email: "li4@example.com" }