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. 基于微软hyper-v虚拟化服务器搭建方法和步骤整理

    基于Microsoft基础设施私有云计算搭建 摘要:私有云是指组织机构建设的专供自己使用的云平台,它所提供的服务不是供他人使用,而是供自己的内部人员或分支机构使用,不同于公有云,私有云部署在企业内部网 ...

  2. vue、react中循环遍历为什么会有key,key有什么作用?

    先讲一下,vue和react都是在操作虚拟dom,并且根据diff算法进行新旧dom对比,从而更新dom,以vue举例: vue官方文档中写到有 key 的特殊属性主要用在 Vue 的虚拟 DOM 算 ...

  3. H5各种头部meta标签功能大全

    <!DOCTYPE html>  H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta ...

  4. Linux环境下Redis安装和常见问题的解决

    Redis是一款非常非常非常好用的缓存数据库,在保存需要定期更新的Token值,或者在保证高并发安全可靠性的场景下,基本上说是必用了. 安装过好多次Redis了,也用过阿里云Redis数据库,但是每次 ...

  5. Android开发之图像处理那点事——滤镜

    在Android开发中,一般对图像的处理就是Bitmap(位图),它包含了图像的全部数据,即点阵和颜色值,点阵就是包含像素点的矩阵,而颜色值就是ARGB,分别代表透明.红色.绿色.蓝色通道,它们共同决 ...

  6. Computer Vision_33_SIFT:SAR-SIFT: A SIFT-LIKE ALGORITHM FOR SAR IMAGES——2015

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...

  7. 【HICP Gauss】数据库 数据库管理(存储过程 函数 对象 近义词 触发器 事务类型)-9

    存储过程存储过程在大新数据库系统中,一组为了完成特定功能的SQL语句集 存储在SQL数据库中 优势: SQL进行封装 调用方便             存储过程会进行编译 提升用户执行SQL语句集的速 ...

  8. springmvc,hibernate整合时候出现Cannot load JDBC driver class 'com.mysql.jdbc.Driver

    原因:不清楚是什么原因,哪位知道可以给我留言,不胜感激! 解决方法: 1.把mysql的驱动包放到你项目的WEB-INF目录下的lib目录中2.要mysql的驱动包放在tomcat/lib目录下

  9. C#中设置密码框 ,用符号代替密码

    添加控件 添加控件 确认键代码 private void button1_Click(object sender, EventArgs e) { //修改密码.新密码,重复新密码,两次输入的新密码必须 ...

  10. 算法设计与分析 - 李春葆 - 第二版 - pdf->word v3

    1.1 第1章─概论 练习题 . 下列关于算法的说法中正确的有( ). Ⅰ.求解某一类问题的算法是唯一的 Ⅱ.算法必须在有限步操作之后停止 Ⅲ.算法的每一步操作必须是明确的,不能有歧义或含义模糊 Ⅳ. ...