html如何转化成对象_将HTML元素转化为JavaScript对象模型【模型】

需将HTML解析为JS对象树，可用五种方法：一、DOMParser安全解析字符串；二、递归遍历现有DOM元素；三、innerHTML+临时p兼容旧环境；四、XMLSerializer反向序列化（限XML兼容HTML）；五、htmlparser2流式解析大型HTML。

如果您拥有HTML字符串或DOM元素，需要将其结构化为JavaScript对象以便程序化操作，则需将HTML解析为树状对象模型。以下是实现此转换的多种方法：

一、使用DOMParser解析HTML字符串

DOMParser可在不依赖页面上下文的情况下，将HTML字符串安全地解析为Document对象，进而遍历构建自定义JS对象树。

1、创建DOMParser实例：const parser = new DOMParser();

2、调用parseFromString方法，传入HTML字符串与MIME类型：const doc = parser.parseFromString(htmlString, 'text/html');

立即学习“Java免费学习笔记（深入）”；

3、获取body子节点并递归遍历其childNodes，提取tagName、attributes、textContent及children属性，组装为嵌套对象。

二、递归遍历现有DOM元素生成对象

针对已挂载或临时创建的Element节点，可通过原生DOM API逐层读取属性与子节点，构造符合需求的对象结构。

1、定义递归函数，接收一个Element参数：function elementToObject(el) { ... }

2、初始化对象，包含tagName、id、className等基础属性：const obj = { tagName: el.tagName.toLowerCase(), attributes: {} };

3、遍历el.attributes，将name和value存入obj.attributes对象中。

4、若el.hasChildNodes()为true，则对el.childNodes过滤出Element节点，映射调用elementToObject，结果存入obj.children数组。

三、使用innerHTML配合临时p容器

适用于无法使用DOMParser的旧环境（如部分IE版本），通过临时插入HTML并读取其子节点来构建对象模型。

标签： javascript java html js node app 栈 递归函数 html元素