let oDiv = {
  tag:'div', 
  props:{
    id:'box'
  }
};
 
let oP = createElement('p',{'class':'list'},['周一']);

//创建一个div标签

let oDiv1 = createElement('div',{
    id:'box',
    class:'wrap',
    style:{
      width:'100px',
      height:'100px',
      background:'red'
    },
  },['2000',oP])

//创建标签方法

function createElement(tag,props,children){
    return {
      tag,
      props:{...props},
      children:[...children]
    }
}
// 把虚拟的dom转成真实的dom,并且把它渲染到页面里面
render(oDiv1,document.getElementById('root'));
function render(vTree,root){
  let target = createDom(vTree);
  root.appendChild(target);
  //把虚拟的dom转成真实的dom
  function createDom(vTree){
    let {tag,props,children} = vTree;
    
    //创建节点
    let targetDom = document.createElement(tag);
    //添加属性
    Object.entries(props).forEach(item => {
      let [key,value] = item;
      if(typeof value == 'object'){//[[id,box], [class,list]]
        value = Object.entries(value).map(item1 => item1[0]+':'+item1[1]).join(';')
      }
      targetDom.setAttribute(key,value)
    })
    //添加子节点
    if(children){
      children.forEach(item => {
      let targetText = typeof item == 'string' ? document.createTextNode(item) : createDom(item);
      targetDom.appendChild(targetText)
      })
    }
    return targetDom;
  }
}

创建createElement的更多相关文章

  1. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  2. 【学习笔记】《JavaScript DOM 编程艺术》 ——总结

    一.要点阐述 1,程序设计语言分为解释型和编译型两大类,JS属于解释型,在Web浏览器中一边解释一边执行. 2,"//"注释单行,"/*...*/"注释多行.反 ...

  3. JS的组成部分、引入页面的方法以及命名规范

    JS的组成部分.引入页面的方法以及命名规范   一.页面是由三部分组成 1)html标签(超文本标记语言) 2)css样式(层叠样式表) 3)javascript脚本编程语言(动态脚本语言) 二.将c ...

  4. js中对节点属性的操作和对节点的操作

    常用的节点属性操作方法 1.setAttribute(name,value):给某个节点添加一个属性 2.getAttribute(name):获取某个节点属性的值. 3.removeAttribut ...

  5. Day046--JavaScript-- DOM操作, js中的面向对象, 定时

    一. DOM的操作(创建,追加,删除) parentNode 获取父级标签 nextElementSibling 获取下一个兄弟节点 children 获取所有的子标签 <!DOCTYPEhtm ...

  6. python dom操作

    1.DOM介绍 (1)什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节 ...

  7. Asp.Net 初级 高级 学习笔记

    01.Main函数是什么?在程序中使用Main函数有什么需要注意的地方?02.CLR是什么?程序集是什么?当运行一个程序集的时候,CLR做了什么事情?03.值类型的默认值是什么?(情况一:字段或全局静 ...

  8. 整理一下原生js的dom操作

    获取元素 getElementById() getElementsByClass() getElementsByTagName getElementsByName node属性 前.后.父.子 pre ...

  9. JavaScript总结(五)

    详解DOM(文档对象模型(Docment Object Model)) ✍  DOM中定义了许多节点类型来表示节点的多个方面: 文档节点Document 最顶层的节点(跟节点),代表整个HTML文档, ...

随机推荐

  1. Jmeter5.1——聚合报告参数分析

    Jmeter5.1——聚合报告参数分析 Label: 每个JMeter的element的Name值.例如HTTP Request的Name. Samples:发出请求的数量.如果线程组中配置的是线程数 ...

  2. vue html属性绑定

    业务场景: element ui里面select的组件,通过勾选是否启动搜索功能 解决: 在select组件上绑定一个 :filterable,值就是是否可搜索的checkbox的值  true和fa ...

  3. 关于WEB前端开发的思考与感悟

    万事开头难. 当我想要认真写一篇文章向大家分享我对前端的认识与感悟的时候,突然就深刻的体会到了这句话确实太有道理了. 最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良 ...

  4. 【微信网页直接下载app】微信跳转-微信浏览器中直接唤起本地浏览器和App

    文档传送门:https://github.com/EthanOrange/wechat-redirect demo: http://wxredirect.jslab.fun/call-app

  5. 【异常】java.sql.SQLException: Could not retrieve transaction read-only status from server Query

    1 详细异常 java.sql.SQLException: Could not retrieve transaction read-only status , ], [ChargingOrderRea ...

  6. 【Flask+Redis】 python学习第一章 - 7.0 断言 数据库测试 redis学习

    assert 断言 def div(num1, num2): # 断言 assert isinstance(num1, int), "值类型错误" assert isinstanc ...

  7. 特殊权限 - SUID GUID STICKYBIT

    ◆ SUID ( Set User ID ) Linux里,用户的ID被称作UID.在实际生产中,可能需要临时借用别的用户执行程序,因此需要能够临时变更自己UID的机能叫做SUID.借助SUID权限, ...

  8. PAT Basic 1050 螺旋矩阵 (25 分)

    本题要求将给定的 N 个正整数按非递增的顺序,填入“螺旋矩阵”.所谓“螺旋矩阵”,是指从左上角第 1 个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为 m 行 n 列,满足条件:m×n 等于 N:m ...

  9. mongodb索引 复合索引

    当我们的查询条件不只有一个时,就需要建立复合索引,比如插入一条{x:1,y:2,z:3}记录,按照我们之前建立的x为1的索引,可是使用x查询,现在想按照x与y的值查询,就需要创建如下的索引     创 ...

  10. 属性 Attribute

    一.创建属性 [AttributeUsage(AttributeTargets.Class | AttributeTargets.Constructor, AllowMultiple = true, ...