当前位置：首页 > 行业动态 > 正文

html转js文件

admin
行业动态
2025-04-24
4849

将HTML标签转换为JS代码需用document.createElement创建节点，配合appendChild/innerHTML插入DOM树

HTML转JS文件实现步骤

分析HTML结构

将HTML文档拆解为标签层级结构,识别元素类型、属性和内容。

<div id="container">
  <h1 class="title">Hello</h1>
  <button onclick="alert('Clicked')">Submit</button>
</div>

创建JS对象表示DOM

用JavaScript对象模拟HTML标签结构,包含标签名、属性和子节点：

html转js文件第1张

const dom = {
  tag: 'div',
  attrs: { id: 'container' },
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['Hello']
    },
    {
      tag: 'button',
      attrs: {
        onclick: "alert('Clicked')"
      },
      children: ['Submit']
    }
  ]
};

编写递归函数生成DOM元素

通过递归遍历JS对象,动态创建DOM节点：

function createElement(obj) {
  const element = document.createElement(obj.tag);
  // 设置属性
  for (const [key, value] of Object.entries(obj.attrs)) {
    if (key === 'className') {
      element.className = value;
    } else if (key.startsWith('on')) { // 处理事件属性
      element[key] = new Function(value);
    } else {
      element.setAttribute(key, value);
    }
  }
  // 添加子节点
  if (obj.children) {
    obj.children.forEach(child => {
      if (typeof child === 'string') {
        element.appendChild(document.createTextNode(child));
      } else {
        element.appendChild(createElement(child));
      }
    });
  }
  return element;
}

整合到JS文件

将生成的元素挂载到页面：

document.body.appendChild(createElement(dom));

属性转换对照表

HTML属性	JS对象属性	特殊处理说明
id	id	直接赋值
class	className	需改为className属性
onclick	onclick	转为函数赋值
src/href	src/href	直接赋值
style	style	需转为对象格式
data-	data-	保持原命名

完整示例代码

const domStructure = {
  tag: 'div',
  attrs: { id: 'app' },
  children: [
    {
      tag: 'h2',
      attrs: { style: 'color: blue' },
      children: ['Dynamic HTML']
    },
    {
      tag: 'button',
      attrs: {
        onclick: `alert('Button clicked')`
      },
      children: ['Click Me']
    }
  ]
};
function createDom(structure) {
  const element = document.createElement(structure.tag);
  // 处理属性
  for (const [attr, value] of Object.entries(structure.attrs)) {
    if (attr === 'style') {
      element.style.cssText = value;
    } else if (attr.startsWith('on')) {
      element[attr] = new Function(value);
    } else {
      element.setAttribute(attr, value);
    }
  }
  // 处理子节点
  if (structure.children) {
    structure.children.forEach(child => {
      if (typeof child === 'string') {
        element.appendChild(document.createTextNode(child));
      } else {
        element.appendChild(createDom(child));
      }
    });
  }
  return element;
}
// 挂载到页面
document.body.appendChild(createDom(domStructure));