DOM(文档对象模型)是针对 HTML 和 XML 文档的一个API(应用程序编程接口).DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 层次节点 DOM可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构.节点分成几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记.每个节点都拥有各自的特点.属性及方法,另外也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.以下面的 HTML 为例…

在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面.而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问. Document 节点具有如下特性: no…

前言 React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React.Virtual DOM 的文章.但是直到前不久我专门花时间去学习 Virtual DOM,才让我对 Virtual DOM 有了一定的理解,以致于要怀疑起很久之前看过的那些文章来.倒不是这些文章讲得不对,而是现在在我看来角度不太好,说得越多,越说不清. 让我能够有所开窍(自认为)的,是这篇文章: Change And Its Detection In JavaS…

virtual DOM的作用:将DOM的维护工作由系统维护转交给virtual DOM维护 两个方面:对应用端 & 对DOM端(渲染准备的计算) 1.将DOM状态的维护工作由系统维护转交给virtual DOM维护 virtual DOM 比系统维护具有更高的效率: 2.virtual DOM 提供更便捷的操作接口,和更轻便的操作模型. 3.整体上是一个分层模型 应用层(virtual DOM API)—— virtual DOM(更高效的(变更)渲染计算)—— DOM (渲染呈现) 应用层(j…

在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 HTMLLinkElement 节点引入外部样式表,或者使用 HTMLStyleElement 节点来定义内联样式表,都可以添加样式表到 HTML 文档.在如下 HTML 文档中,这两种 Element 节点都在 DOM 中,并且我们可以验证哪个构造器构造了这些节点. <link id='linkElem…

上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 XML 元素,提供了对元素标签名.子节点及特性的访问. Element 节点具有以下特征: nodeType 的值为 1 nodeName 的值为元素的标签名 nodeValue 的值为null parentNode 可能是 Document 或者 Element 其子节点可能是 Element.Te…

Web technology for developers   Web 技术文档 备注:本文介绍web technology的分类,各自职责,因为之前一直就没有搞明白各种技术.各种名词究竟是属于哪个范畴的. Web technology 总体概况如下: HTML,CSS不做说明,主要解释下其他内容. JavaScript JavaScript由三部分组成:EMCAScript.DOM.BOM. ECMAScript,由ECMAScript定义,提供核心语言功能. DOM,提供访问和操作网页内容的…

最近一两年前端最火的技术莫过于 reactjs,angularJS,vuejs,即便你没用过也可能听过,像ReactJS由业界顶尖的互联网公司facebook提出,其本身有很多先进的设计思路,比如页面UI组件化.虚拟DOM等.本文将带你解开虚拟DOM的神秘面纱,不仅要理解其原理,而且要实现一个基本可用的虚拟DOM. 1.为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新…

Vue:https://cn.vuejs.org/ (一)Vue概况 Vue本身并不是一个框架 Vue结合周边生态构成一个灵活的.渐进式框架 声明式渲染 组件系统 客户端路由 状态管理 构建工具 (二)Vue核心思想 数据驱动 组件化 (三)Vue和React对比 Vue 模板和渲染函数的弹性选择 简单的语法及项目构建 更快的渲染速度和更小的体积 React 更适用大型应用和更好的可测试性 同时适用于Web端和原生App 更大的生态圈带来的更多支持和工具 Vue和React相同点 利用虚拟DOM…

1.为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需要DOM操作.其实近年来,前端的框架主要发展方向就是解放DOM操作的复杂性. 在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差:有了jQuery强大的选择器以及高度封装的API,我们可以更方便的操作DOM,jQuery帮我们处理兼容性问题,同时也使DOM操作变得简单:但…