6.2 操作DOM 6.2.1 更新DOM 6.2.2 插入DOM - 2 - 本文档使用 书栈(BookStack.CN) 构建 6.2.3 删除DOM 6.3 操作表单 6.4 操作文件 6.5 AJAX 6.6 Promise 6.7 Canvas 7 jQuery 7.1 选择器 7.1.1 层级选择器 7.1.2 查找和过滤 7.2 操作DOM 7.2.1 1 修改DOM结构 7.3 事件 7.4 动画 7.5 扩展 8 underscore 8.1 Collections 8.2 Arrays 8.3 Functions 8.4 Objects 8.5 Chaining 9 Node.js 9.1 安装Node.js和npm 9.2 第一个Node程序 9.3 模块 9.4 基本模块 9.4.1 fs 9.4.2 stream location.assign('/discuss'); // 设置一个新的URL地址 7. } document 对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构， document 对象 就是整个DOM树的根节点。 document 的 title 属性是从HTML文档中的 <title>xxx</title> 读取的，但是 可以动态改变：

WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 和 CSS 学习搜索引擎优化 学习 JavaScript 学习 Web 动画 学习 DOM、BOM 和 jQuery 学习网页字体 & 图标 2 1.6.1.14 1.6.1.15 1.6.1.16 1.6.1.17 1.6.1.18 1.6.1.19 1.6.1.20 1.7.32 1.7.33 1.7.34 1.7.35 1.7.36 1.7.37 HTTP / 网络工具 代码编辑工具 浏览器上的神兵利器 HTML 工具 CSS 工具 DOM 工具 JavaScript 工具 静态网页构建工具 无障碍访问工具 应用程序框架工具（台式机、手机、平板电脑等） 渐进式 Web 应用工具 脚手架工具 常规前端开发工具 模版／数据绑定工具 笔者有意将本书打造为一份专业资料，为想要或正在实践的前端开发者们提供学习材料和开 发工具。其次，它同样可供主管、CTO、讲师和猎头们深入探索前端开发实践。 本书内容偏向于 WEB 技术（HTML、CSS、DOM、JavaScript）和以这些技术为根基直接构 建而成的开源技术。书中引用和讨论的材料要么就是同类翘楚，要么就是解决问题的流行方 案。 本书不是一本囊括所有前端可用资源的综合纲领。其价值在于为恰好够用的分类信息搜罗简

dev/prod 文件是预构建的，但是根据 process.env.NODE_env 会自动需要相应的文 件。 如果需要在客户端上编译模板 (即：将字符串传递给 template 选项，或使用其在 DOM 中 HTML 作为模板挂载到元素)，你需要编译器，因此需要完整的版本： 1. // 需要编译器 2. Vue.createApp({ 3. template: '

会把你应用中的数据和 DOM 连接在一起。 • 事件绑定让你的应用可以通过更新应用的数据来响应目标环境下的用户输入。 • 属性绑定让你将从应用数据中计算出来的值插入到 HTML 中。 在视图显示出来之前，Angular 会先根据你的应用数据和逻辑来运行模板中的指令并解析绑定表达式， 以修改 HTML 元素和 DOM。Angular 支持双向数据绑定，这意味着 DOM 中发生的变化（比如用户的选择） 绑定表达式， 以修改 HTML 元素和 DOM。Angular 支持双向数据绑定，这意味着 DOM 中发生的变化（比如用户的选择） 同样可以反映回你的程序数据中。 在视图显示出来之前，Angular 会先根据你的应用数据和逻辑来运行模板中的指令并解析绑定表达式， 以修改 HTML 元素和 DOM。Angular 支持双向数据绑定，这意味着 DOM 中发生的变化（比如用户的选择） 同样可以反映回你的程序数据中。 绑定表达式， 以修改 HTML 元素和 DOM。Angular 支持双向数据绑定，这意味着 DOM 中发生的变化（比如用户的选择） 同样可以反映回你的程序数据中。 在视图显示出来之前，Angular 会先根据你的应用数据和逻辑来运行模板中的指令并解析绑定表达式， 以修改 HTML 元素和 DOM。Angular 支持双向数据绑定，这意味着 DOM 中发生的变化（比如用户的选择） 同样可以反映回你的程序数据中。

VueJS. Virtual DOM VueJS makes the use of virtual DOM, which is also used by other frameworks such as React, Ember, etc. The changes are not made to the DOM, instead a replica of the DOM is created which latter is compared with the original data structure. The final changes are then updated to the real DOM, which the user will see changing. This is good in terms of optimization, it is less expensive and to the DOM elements to listen to the events in VueJS. Animation/Transition VueJS provides various ways to apply transition to HTML elements when they are added/updated or removed from the DOM. VueJS

........................................................... 36 Angular 8 ii DOM Overview ......................................................................................... Lazy loading - Angular 8 splits AppRoutingModule into smaller bundles and loads the data in the DOM.  Differential loading - When you create an application, Angular CLI generates modules and this additional functionality to bind the component data into the HTML and to dynamically generate HTML DOM elements. The core concept of the template can be categorised into two items and they are as follows:

Templates ● Custom Elements ● Shadow DOM ● Imports Templates Templates ● 脚手架 ● 惰性的 DOM 块，稍后需要时再激活 ● 解析，但不渲染 ● DOM at runtime. document.body.appendChild(content.cloneNode(true)); // 3. Clone to stamp it out. Custom Elements ● 定义自己的标签(名字中要包含 - ) ● 纽带，封装其它元素和属性、行为、JS代码 ● 创建新的 HTML 元素，扩展 HTML 的语义 ● 扩展现存的 DOM 对象 ● 组件复用的单元 ● 让标签更有意义 大量底层标签可读性差 自定义元素可读性好 One Two

ew-Controller(MVC) 和 Model-View-Vie wModel(MVVM) 8. 依赖注入 Ext JS 能够通过扩展（ Deft JS）增加依赖注入 ✔ 9. 数据绑定 ✔ ✔ 10. 直接操作DOM元素 ✔ ✔ 11. 模块化 ✔ ✔ 测试 测试 12. 自动测试支持 通过扩展工具实现 ✔ 13. 测试框架或者测试工具 许多第三方的测试框架，比如 Siesta (专门为ExtJS优化) 能够用于ExtJS的测试 AngularJS 自带了Karma用于端对端的测 试。 Protractor 是用于 Angular apps端对 端测试的框架 性能 性能 14. Dom算法 深度优先，自底向上 对于DOM树，指令是深度优先、自底 往上的算法。而对于控制器则是自上往 下的方式。 15. 性能 高度的封装，所以 ExtJS 相对较慢 在我们的性能测试中， AngularJS 比Ext 移动解决方案 8. Dom 算法 9. Deferred and Promises 10. 脏检查 11. Deferred bootstrap 摘要： 摘要： ExtJS 是基于组件的 (表格、树、表单、绘图)；代码开始于对现有类的扩展，配置 模型，自定义显示和行为/事件，将这些组件加入到container/layout中。 它遵循面 向对象的设计思想和MVC设计模式，很少直接操作DOM元素 An

JSON 对象 面向对象编程 实例对象与 new 命令 this 关键字 对象的继承 Object 对象的相关方法 严格模式 异步操作 概述 定时器 Promise 对象 DOM 概述 - 2 - 本文档使用 书栈(BookStack.CN) 构建 致谢 当前文档 《阮一峰 JavaScript 教程》 由 进击的皇虫 使用 书栈(BookStack.CN) 进行构建，生成于 浏览器控制类：操作浏览器 DOM 类：操作网页的各种元素 Web 类：实现互联网的各种功能 如果宿主环境是服务器，则会提供各种操作系统的 API，比如文件操 作 API、网络通信 API等等。这些你都可以在 Node 环境中找到。 本书主要介绍 JavaScript 核心语法和浏览器网页开发的基本知识， 不涉及 Node。全书可以分成以下四大部分。 基本语法 标准库 浏览器 API DOM JavaScript 的关系是，前者是后者的规格，后者 是前者的一种实现。在日常场合，这两个词是可以互换的。 ECMAScript 只用来标准化 JavaScript 这种语言的基本语法结 构，与部署环境相关的标准都由其他标准规定，比如 DOM 的标准就是 由 W3C组织（World Wide Web Consortium）制定的。 ECMA-262 标准后来也被另一个国际标准化组织 ISO（International Organization

Vue.js Library Component Map name/props/events… Renderer Vue.js Core vnode/events… DOM Emulating Document/Element/ Text… CSS Matcher RegExp Runtime template/script/style vue-plugin Compiler hippy-vue-css- loader CSS Selector Apply the styles Console Global JavasSript Virtual DOM CSS Reverse Selector Apply styles to DOM Component Translator to Native node-ops Hippy-Vue 模板 Hello Buffer 样式 CSS Matcher RegExp CSS AST hippy-vue-css- loader CSS Reverse Selector Apply styles to DOM #id { color: red } #id .class { background-color: blue } [ { selector: [['#id']], style: