JavaScript高级程序设计 --- 读书笔记

第八章: BOM

浏览器对象模型主要掌握几个 浏览器 所提供的内置对象即可:

• window 全局对象, window.open 方法用于弹窗.
• location 对象, 表示当前加载的文档的位置相关信息, 常用方法: location.href location.replace() 等等.
• navigator 对象, 主要用于获取浏览器相关的元数据, 如版本, 浏览器名字.
• screen 对象, 用于提供屏幕相关信息和属性.
• history 对象, 操作访问历史, 页面的回退等等. 常用方法: history.go history.back, history.forward.

第十章: DOM

对于学习 DOM 的API 和属性, 一定要通过类型系统来学习和记忆.

• 在 DOM 树中, 一切皆为 Node, Node接口是 DOM 树中最基本的类型接口, 其提供了大部分的公用的属性和方法, 常用的子类型有 ParentNode, ChildrenNode, Element, Document 接口.
• document 对象为 HTMLDocument 接口的实例对象.
• 书中说到的所有的 NodeList 对象都为动态的有误, 亲自实践, 只有 childNodes 属性的 Nodelist 为动态的, 其他的都为静态的, 而 HTMLCollection 都为动态的.

第十一章: DOM扩展

• matchSelector 方法目前还没有统一的实现.
• Node 接口的 firstChild 属性和 ParentNode 接口的 firstElementChild 属性因名字即可知道其差别, firstChild 是包括任何文本节点在内的第一个子元素, 包括换行符.
• HTML5 新增了一些 DOM扩展的API, 如 element 的getElementsByClassName方法, classList 属性, 焦点管理等
• 使用 innerHTML 插入标记技术, 直接插入 HTML 字符串, 速度较快, 且较为方便.
• outerHTML 和 innerHTML 的主要区别是: outerHTML 会返回调用元素自身在内的节点字符串.
• 使用 innerHTML 来插入大量的新的 HTML 标签和通过创建 HTML 标签并指定他们之间的关系相比, 效率要高的多

第十二章: DOM2 和 DOM3

• DOM2 和 DOM3 是对 DOM1 的扩展, DOM2 主要扩展了 对 XHTML 的 nameSpace 的支持, DOM3 级主要是对 DOM1 的细化, 添加了一些新的类型.
• element 的 style 属性和 window.getComputeStyle 方法的区别.
• 对于计算样式, 需要注意所有的计算样式都是只读的.

第十三章:事件流

• 事件捕获流和事件冒泡流的起点都是 window 对象.
• IE8 级以前不支持事件捕获流.
• DOM2 级事件流包括三个阶段, 事件捕获阶段, 事件处于目标阶段, 事件冒泡阶段.
• event.stopPropagation() 只会阻止当前事件在 DOM 树上的继续传播, 不会阻止当前节点上的其他事件处理函数的调用, 而 ev.stopImmediatePropagation() 会同时阻止同一节点上的其他事件处理函数的调用.
• event.stopPropagation() 不会阻止默认行为的发生, 有默认行为的控件有 a 标签, input 的 submit 标签, 可以使用 ev.preventDefault() 来阻止默认行为的发生, 如果一个元素没有默认行为, 其 ev.cancelable 属性为 false, 调用 ev.preventDefault 方法无效.
• click事件可以通过 回车键 来触发.
• Android 和 iOS 等移动设备不能触发 dblclick 事件, 双击页面会导致放大.

第十四章: 表单脚本

• 只要表单上的任何一个元素具有焦点, 按下回车即可提交表单.
• 可以使用 form 元素的 submit 方法来提交 表单, 但是此方法不会触发表单的 submit 事件.
• 表单的 change 事件需要单表单元素失去焦点且表单的值同时发生了改变时才会触发.
• select 元素的 option 标签如果没有设定 value 值, 则把 option 标签的文本当中其值.

第十五章: 使用 canvas 绘图

• Canvas 元素设定 style 的 width 和 height 样式属性会导致绘制内容的宽高不符合预期, 只能使用 canvas 元素的属性来设定宽高, 不要用样式

第十六章: HTML5 脚本编程

• 跨文档(不同域) 的通信方式主要有: 片段标识符通信(即 hash), window.postMessage 方法.
• 同域下的不同页面之间的通信方式有: localStorage, hash.

第二十一章: Ajax与 Comet

• get 请求比 post 的请求消耗的资源更少, 发送相同的数据, get请求最多可以比 post 请求快两倍.
• 常见的跨域请求有:
  1. CORS 技术, 通过浏览器自动在请求头中添加 Origin 头信息, 来实现跨域 ajax 请求.
  2. Proxy 技术, 在后台服务器进行请求转发.
  3. Img 标签, 此方式只能发送 get 请求, 且只可和服务器进行单向通信.
  4. JSONP