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）和以这些技术为根基直接构 建而成的开源技术。书中引用和讨论的材料要么就是同类翘楚，要么就是解决问题的流行方 案。 本书不是一本囊括所有前端可用资源的综合纲领。其价值在于为恰好够用的分类信息搜罗简

会把你应用中的数据和 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 中发生的变化（比如用户的选择） 同样可以反映回你的程序数据中。

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:

JavaScript 2020/4/28 2 内容提要 1 JavaScript 简史 2 JavaScript 功能、脚本语言 3 JavaScript 实现 ECMAScript DOM BOM 4 在 HTML 中使用 JavaScript 直接嵌入 外部引入 JS 代码压缩 2 VCG JavaScript 2020/4/28 3 时代背景 1995 2020/4/28 10 3. JavaScript 实现 JavaScript 实现 10 JavaScript 的完整实现 = ECMAScript 提供语言核心功能 文档对象模型（DOM） 提供访问和操作网页的方法和接口 浏览器对象模型（BOM） 提供与浏览器交互的方法和接口 VCG JavaScript 2020/4/28 11 3.1 ECMAScript 简介  ECMAScript ECMAScript 实现和扩展（如 DOM、BOM 等）。 JavaScript 实现 11 VCG JavaScript 2020/4/28 12 3.2 DOM（文档对象模型）简介 JavaScript 实现 12  DOM（Document Object Model）是一种跨平台、独立于编程语言的应用 程序编程接口（API）。DOM 标准由 W3C 设定。  DOM 将 HTML/XHTML/XML

External Types ● Type declarations files (.d.ts): Interfaces, enums etc. ● Existing browser and DOM types: lib.es6.d.ts ● DefinitelyTyped - 3000+ common .d.ts files ● Editors (i.e. VS Code) can understand : Rewrote View Engine => 40% smaller size application. ○ Laze-load. ● Cross Platform for Mobile: DOM Decoupling. ● Platform not just a framework => High quality end to end experiences. ● Scalability Expressive declarative components and directives. ○ Cross-Platform: Decoupled rendering from the DOM (NativeScript, Universal) ○ Content Projection ○ Pipes ● Dependency Injection ● Zones ○ Execution

或者把代码复制到TypeScript playground。 将鼠标悬停在标识符上查看它们的类型。 注意在某些情况下它们的 类型可以被自动地推断出来。 重新输入一下最后一行代码，看一下自动补全列表和 参数列表，它们会根据DOM元素类型而变化。 将光标放在 greeter 函数上，点 击F12可以跟踪到它的定义。 还有一点，你可以右键点击标识，使用重构功能来重 命名。 这些类型信息以及工具可以很好的和JavaScript一起工作。 true, "emitDecoratorMetadata": true 到 "compilerOptions" 部分。 然后，再添加 "lib": ["es2015", "es5", "dom"] 到 "compilerOptions" ，以引入ES2015的声明。 最后，我们 需要添加 "./model.ts" 到 "files" 里，我们接下来会创建它。 现 在 tsconfig "emitDecoratorMetadata": true, "target": "es5", "lib": [ "es2015", "es5", "dom" ] }, "files": [ "./app.ts", "./model.ts", "./main.ts", ], "compileOnSave":