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. Matlab 整数线性规划问题模型代码

    整数线性规划问题的基本内容 整数线性规划解决的是自变量在一定的线性约束条件下,使得线性目标函数求得最大值或者最小值的问题.其中自变量只能取整数.特别地,当自变量只能取0或者1时,称之为 0-1 整数规 ...

  2. SSM 整合配置

    目录 1. Maven : pox.xml 2. Web container : web.xml 3. Spring context : dbconfig.properties + applicati ...

  3. [转帖]SQL Server 2000~2017补丁包

    SQL Server 2000~2017补丁包 https://www.cnblogs.com/VicLiu/p/11510510.html 最新更新 Product Version Latest S ...

  4. 阿里云服务器连接ftp服务(软件的使用)

    首先你需要有一个阿里云的ECS服务器 开通了宽带之后,ECS服务器就可以上网了 可以在本地电脑cmd控制台运行mstsc.exe启动远程桌面连接 windows+R 计算机名输入ECS服务器的公网ip ...

  5. C#读写修改设置调整UVC摄像头画面-滚动

    有时,我们需要在C#代码中对摄像头的滚动进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...

  6. CMU-Multimodal SDK Version 1.1 (mmsdk)使用方法总结

    年10月26日 星期六 mmdatasdk: module for downloading and procesing multimodal datasets using computational ...

  7. ECMA6新增语法(待续...)

    块级作用域:  ES6允许你使用块级作用域,不过目前大多数的ES6语法只允许在严格模式下使用("use strict” ). 1 let关键字 作用:声明变量,一个花括号就是一个作用域(每个 ...

  8. 创建简易的SpringBoot项目

    创建简易的SpringBoot项目 这两天在学习springboot,菜鸟刚刚知道这个东西,看着springboot项目下那一大堆目录都不知道从何下手,还是静下心来从最简单的创建一个项目入手,这路和大 ...

  9. Es查询工具使用

    Kibana按照索引过滤数据 1.创建索引模式 2.查询索引中的数据 Es查询不返回数据 创建索引的时候指定mapping mappings={ "mappings": { &qu ...

  10. pandas 之 group by 过程

    import numpy as np import pandas as pd Categorizing a dataset and applying a function to each group ...