dom

vue中v-for

由 血红的双手。 提交于 2020-02-19 11:27:52
在vue中我们只要操作数据，就可以渲染和更新数据，这背后的boss就是diff算法 vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设： 1、 俩个相同组件产生类似DOM结构，俩个不同组件产生不同DOM结构 2、 同一层级下的一组节点，他们同唯一的id进行区分 基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。 我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的： diff的默认渲染 如图 有key值得情况下 来源： https://www.cnblogs.com/chenyudi/p/12330221.html

js 异步实现与编程

由 点点圈 提交于 2020-02-18 21:28:22
同步 同步 同步是代码从上到下依次执行，上一个任务结束后，才能执行下一个任务。 如下图所示，任务1执行完后，再执行任务2，任务2执行完后再执行任务3，依次类推... 同步优势 同步是任务有序进行，不会造成资源上处理上的混乱。 1.任务有序进行较好的处理了任务之间的依赖性，如后一个任务需要前一个任务的结果。 2.如果多个任务处理同一个资源，不会造成资源处理的混乱。 var a = 1; function task1(){ 　　console.log(a); 　　for(var i = 0; i <10000;i++){ 　　　　a++; } 　　console.log(a); } function task2(){ 　　console.log(a); 　　for(var i = 0; i <10000;i++){ 　　　　a--; } 　　console.log(a); } task1(); task2(); task1、task2都操作变量a。先执行task1， 执行完 task1后得到一个a的结果值。然后task2处理task1处理的结果值。 如果task1与task2不是同步的，task1没有执行完，去执行task2，task2执行一会，再去执行task1，... ，可能a的值都不是task1、 task2想要的结果。 同步弊端 同步上从上到下依次执行的，必须等到上个任务完成

Ajax技术体系简要说明

由 允我心安 提交于 2020-02-18 13:31:11
JavaScript、CSS（层叠样式表）、DOM（文档对象模型）、XMLHttpRequest是构成Ajax技术体系的四个技术基石，其中前三者合在一起以前称为DHTML。 JavaScript是一种弱类型、解释型的、通用的脚本语言，在Ajax技术体系中，它将各个部分粘合在一起。JavaScript定义应用业务逻辑、操作DOM改变和刷新用户界面、重绘或重新组织用户数据、处理用户交互。 CSS为Web页面元素提供了一种可重用的可视化样式的定义方法来定义应用的外观。样式表提供了集中定义各种视觉样式的方法并方便地设置到页面元素上。样式表可以定义样式元素、定义元素相互之间的布局以及简单的用户交互功能以实现视觉效果。HTML定义了文档的结构，定义了元素之间的包含关系，而不是外观，但它也定义了文档中可以应用样式的位置。通过定义CSS样式来定义用户界面的样式。 DOM组织网页视图，以一组可以使用JavaScript操作的可编程对象展现出Web页面的结构。通过使用脚本修改DOM在运行时改变用户界面，或重绘页面的某个部分。Web页面的DOM是树状结构，JavaScript引擎通过全局变量document公开当前web页面的根节点，这个变量是所有DOM操作的起点。DOM文档与HTML表单的关系是双向的，修改DOM将会改变HTML标记。 使用XMLHttpRequest以异步方式与服务器通信

DOM理解

由 橙三吉。 提交于 2020-02-17 18:42:40
链接：https://www.zhihu.com/question/33453164/answer/56549408 来源：知乎 这几个都是 JS 里面的概念。 先说 DOM ： DOM 全称是 Document Object Model，也就是文档对象模型。 DOM 就是针对 HTML 和 XML 提供的一个API。什么意思？就是说 为了能以编程的方法操作这个 HTML 的内容 （比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。 &amp;lt;img src="https://pic3.zhimg.com/2e9a57f3043adfd954e147c8718c3266_b.png" data-rawwidth="420" data-rawheight="464" class="content_image" width="420"&amp;gt; DOM 有什么用？就是为了操作 HTML 中的元素，比如说我们要通过 JS 把这个网页的标题改了，直接这样就可以了： document.title = 'how to make love'; 这个 API

In which order are parent-child components rendered?

由 ♀尐吖头ヾ 提交于 2020-02-17 17:58:47
问题 If I have Two Components (Parent & Child) like this : 1-The Parent (Countdown): var Countdown = React.createClass({ getInitialState: function(){ return{count: 0}; }, handleSetCountdown: function(seconds){ this.setState({ count: seconds }); }, render:function(){ var {count} = this.state; return( <div> <Clock totalSeconds={count}/> <CountdownForm onSetCountdown={this.handleSetCountdown} /> </div> ); } }); module.exports =Countdown; 2-The Child (CountdownForm): var CountdownForm = React

In which order are parent-child components rendered?

由 一个人想着一个人 提交于 2020-02-17 17:56:06
问题 If I have Two Components (Parent & Child) like this : 1-The Parent (Countdown): var Countdown = React.createClass({ getInitialState: function(){ return{count: 0}; }, handleSetCountdown: function(seconds){ this.setState({ count: seconds }); }, render:function(){ var {count} = this.state; return( <div> <Clock totalSeconds={count}/> <CountdownForm onSetCountdown={this.handleSetCountdown} /> </div> ); } }); module.exports =Countdown; 2-The Child (CountdownForm): var CountdownForm = React

DOM理解

由 一笑奈何 提交于 2020-02-17 07:23:58
什么是DOM？ DOM是一个标准（或者说API），允许程序和脚本访问、操作页面的内容、结构和样式，为文档提供了一种结构化的表示方式，以 改变文档呈现方式 （即用来改变文档呈现方式）。 DOM标准包括3个不同的部分： 核心DOM（Core DOM）：所有文档类型的标准模型 XML DOM：XML文档的标准模型 HTML DOM：HTML文档的标准模型 HTM DOM HTML DOM 可以获取、添加、删除和修改HTML元素。它定义了HTML元素和属性，并可以访问它们。将HTML 文档呈现为 树结构。 如何从HTML文档构建网页？ 浏览器将文档转换为可视化页面的过程称为“渲染”，这大致分为俩阶段。 浏览器解析文档，将HTML文档每个元素映射为一个存在层级关系的节点，皆喜玩城后，生成一个由不同节点组成的树结构，即DOM树。 document 对象就用来描述 DOM树的状态和属性，同时也提供操作DOM的API。如下： HTML DOM定义了： HTML元素均为节点对象 HTML元素的属性 操作HTML元素的方法 HTML元素的事件 通过HTML DOM，JavaScript可以动态地对HTML进行如下操作： 添加、修改和移除页面中HTML元素和属性 修改页面中的CSS样式 实现事件交互 增加新的事件 DOM树不一定是源html文档 1.html无效 <!doctype html>

jQuery学习之DOM操作

由 与世无争的帅哥 提交于 2020-02-17 07:09:06
接着昨天的继续写，这几篇只是把看书的内容系统的在写一下。 对dom的基本操作 （1）查找结点 查找元素节点 查找属性节点 var $para=$("p"); var p_txt=$para.attr("title"); （2）创建结点 创建元素节点 var $li_test=$("<li></li>"); $("ul").append($li_test); 创建文本节点 var $li_test=$("<li>文本文档</li>"); $("ul").append($li_test); 创建属性节点 var $li_test=$("<li title="文本文档"></li>"); $("ul").append($li_test); （3）插入节点 append() 向每一个匹配内部追加内容 appendTo() 将所有匹配的元素追加到指定的元素中.与append相反 prepend() 向每个匹配元素的内部前置内容 prependTo() after() 在每个匹配元素之后插入内容 insertAfter() 将所有匹配的元素插入到指定元素后面 before() 在每个匹配元素之前插入内容 insertBefore() （4）删除节点 remove() 从Dom中删除所有匹配的元素 detach() 与remove不一样的是，所有绑定的事件会保留下来 empty() 清空节点

什么是DOM，DOM level 1\\2\\3 的区别是什么

由 一世执手 提交于 2020-02-17 06:13:35
DOM 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。 根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。 1级DOM 1级DOM在1998年10月份成为W3C的提议，由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。 2级DOM 鉴于1级DOM仅以映射文档结构为目标，DOM 2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM

什么是DOM，DOM level 1\\2\\3 的区别是什么

由 元气小坏坏 提交于 2020-02-17 06:11:14
什么是DOM，DOM level 1\2\3 的区别是什么： https://www.cnblogs.com/PopularProdigal/p/6506003.html DOM 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。 根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。 1级DOM 1级DOM在1998年10月份成为W3C的提议，由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。 2级DOM 鉴于1级DOM仅以映射文档结构为目标，DOM 2级面向更为宽广。通过对原有DOM的扩展
订阅 dom