UI—html—DOM(tree-structured representation、 manipulate)—Virtual DOM(component)

Real DOM强调树状结构的整体;核心是树状结构的维护;

Virtual DOM强调的是组件,核心是组件的构建、组合和维护;

Real DOM

First things first, DOM stands for “Document Object Model”. The DOM in simple words represents the UI of your application. Everytime there is a change in the state of your application UI, the DOM gets updated to represent that change.

Just to get things straight - DOM stands for Document Object Model and is an abstraction of a structured text. For web developers, this text is an HTML code, and the DOM is simply called HTML DOM. Elements of HTML become nodes in the DOM.

So, while HTML is a text, the DOM is an in-memory representation of this text.

The HTML DOM provides an interface (API) to traverse and modify the nodes. It contains methods like getElementById or removeChild. We usually use JavaScript language to work with the DOM, because… Well, nobody knows why :).

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction.

https://www.cnblogs.com/feng9exe/p/10906496.html

DOM是什么的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

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

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路(2)-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. VueTreeselect出现unknown解决方法

    VueTreeselect 控件显示[unknown]如图: treeselect 绑定的值需要与options输出的id相对应,若是空值,请不要给空字符串,0,等,因为会出现unknown,并且当选 ...

  2. 移相器——K波段有源移相器设计

    博主之前在做一款K波段有源移相器,所用工艺为smic55nmll工艺,完成了几个主要模块的仿真,现对之前的工作做个总结. K波段的频率范围是18G——27GHz,所设计移相器的工作频率范围是19G—— ...

  3. 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[4]:在 CKB 上实现 WebAssembly

    作者:Xuejie 原文链接:https://xuejie.space/2019_10_09_introduction_to_ckb_script_programming_wasm_on_ckb/ N ...

  4. vue日历/日程提醒/html5本地缓存

    先上图 功能: 1.上拉日历折叠,展示周 2.左右滑动切换月 2.“今天”回到今天:“+”添加日程 3.localStorage存储日程 index,html <body> <div ...

  5. Kafka分布式的消息顺序

    Kafka分布式的单位是partition,同一个partition用一个write ahead log组织,所以可以保证FIFO的顺序.不同partition之间不能保证顺序. 但是绝大多数用户都可 ...

  6. UIPath RPA 自动化脚本 机器人从入门到精通

    本文链接:https://blog.csdn.net/qq_27256783/article/details/93619818 一.UiPath介绍 UiPath 是RPA(Robotic Proce ...

  7. js学习之存储

    一.Cookie和Session的区别 1.cookie数据存放在客户的浏览器上,session数据放在服务器上(一般以内存.数据库.文件形式). 2.session会在一定时间内保存在服务器上.当访 ...

  8. 学校老师没重点讲的C语言

    格式说明由“%”和格式字符组成,如%d%f等.它的作用是将输出的数据转换为指定的格式输出.格式说明总是由“%”字符开始的.不同类型的数据用不同的格式字符. 格式字符有d,o,x,u,c,s,f,e,g ...

  9. HashMap的源码分析与实现 伸缩性角度看hashmap的不足

    本文介绍 1.hashmap的概念 2.hashmap的源码分析 3.hashmap的手写实现 4.伸缩性角度看hashmap的不足 一.HashMap的概念 HashMap可以将其拆分为Hash散列 ...

  10. kbmmw 5.10.10 发布

    这个版本主要是bug修正. New stuff         =========         - Added OnException event property to TkbmMWSchedu ...