DOM启蒙

前言

序言

第1 章 节点概览

11 文档对象模型（Document Object Model，亦称 DOM）是个由JavaScript

节点对象组成的层次结构/ 树

12 节点对象类型

13 继承自节点对象的子节点对象

14 用于与节点打交道的属性与方法

15 识别节点的类型与名称

16 获取节点的值

17 使用 JavaScript 方法来创建元素与文本节点

18 使用 JavaScript 字符串创建并向DOM 中添加元素与文本节点

19 提取DOM 树中的部分作为JavaScript 字符串

110 使用 appendChild() 与 insertBefore() 向DOM 中插入节点对象

111 使用 removeChild() 与 replaceChild() 来移除与替换节点

112 使用 cloneNode() 来复制节点

113 理解节点集合（即 NodeList 与 HTMLCollection）

114 获取所有直属子节点的列表/ 集合

115 将 NodeList 或者 HTMLCollection 转换成JavaScript 数组

116 遍历 DOM 中的节点

117 使用 contains() 与 compareDocumentPosition() 验证节点在 DOM 树中的

位置

118 判断两个节点是否相同

第2 章 文档节点

21 文档节点概览

22 HTML 文档属性与方法（包括继承的）

23 获取 HTML Document 通用信息（标题、链接、提及者、最后修改时间

及兼容模式）

24 文档子节点

25 document 提供的 ＜!DOCTYPE＞、＜html lang="en"＞、＜head＞ 及 ＜body＞

捷径

26 使用 documentimplementationhasFeature() 探测 DOM 规范/ 特性

27 获取文档中当前聚焦/ 激活节点的引用

28 判断文档或者文档中任何节点得到焦点

29 documentdefaultView 是个到顶部/ 全局对象的捷径

210 使用 ownerDocument 从某一元素取得文档的引用

第3 章 元素节点

31 HTML*Element 对象概览

32 HTML*Element 对象属性与方法（包括继承的）

33 创建元素

34 获取元素的标签名

35 获取元素属性与值的列表/ 集合

36 获取、设置及移除元素的属性值

37 验证元素是否有某一特定属性

38 获取类属性值列表

39 添加与移除类属性中的部分值

310 变换某个类属性值

311 判断类属性值是否含有某一特定值

312 获取与设置 data-* 属性

第4 章 元素节点选取

41 选取特定元素节点

42 选取/ 创建一个元素节点列表（即 NodeList）

43 选取所有的直属子元素节点

44 选取与上下文有关的元素

45 预定义的元素节点选取/ 列表

46 使用 matchesSelector() 验证元素会否被选取

第5 章 元素节点几何量与滚动几何量

51 元素节点尺寸、偏移及滚动概览

52 获取元素相对于 offsetParent 的 offsetTop 及 offsetLeft 值

53 使用 getBoundingClientRect() 获取元素相对于视区的Top， Right， Bottom

及Left 边沿偏移量

54 获取元素在视区中的尺寸（边框 + 填充 + 内容）

55 获取元素在视区中的尺寸（填充 + 内容），不含边框

56 使用 elementFromPoint() 获取视区中某一特定点上最顶层的元素

57 使用 scrollHeight 及 scrollWidth 获取滚动元素的尺寸

58 使用 scrollTop 及scrollLeft 获取并设置从上、左边滚动的距离

59 使用 scrollIntoView() 滚动元素到视区

第6 章 元素节点内联样式

61 样式属性（亦称元素内联 CSS 属性）概览

62 获取、设置及移除单个内联 CSS 属性

63 获取、设置及移除所有内联 CSS 属性

64 使用 getComputedStyle() 获取元素的已计算样式（即包含任何级联样式的

实际样式）

65 使用 class 及 id 属性应用或者移除元素上的 CSS 属性

第7 章 文本节点

71 文本对象概览

72 文本对象与属性

73 空白符创建文本节点

74 创建与注入文本节点

75 使用 data 或 nodeValue 获取文本节点值

76 使用appendData()、deleteData()、insertData()、replaceData() 及

subStringData() 操作文本节点

77 当有多个兄弟文本节点时

78 使用 textContent 移除文本标记并返回所有的子文本节点

79 textContent 与 innerText 的区别

710 使用 normalize() 合并兄弟文本节点成单个文本节点

711 使用 splitText() 分割文本节点

第8 章 DocumentFragment 节点

81 DocumentFragment 对象概览

82 使用 createDocumentFragment() 创建 DocumentFragment

83 添加 DocumentFragment 到实时 DOM

84 使用文档片段上的 innerHTML

85 通过复制将片段所含节点保留在内存中

第9 章 CSS 样式表与 CSS 规则

91 CSS 样式表概览

92 访问 DOM 中所有样式表（即 CSSStyleSheet 对象）

93 CSSStyleSheet 属性与方法

94 CSSStyleRule 概览

95 CSSStyleRule 属性与方法

96 使用 cssRules 获取样式表内的 CSS 规则列表

97 使用 insertRule() 和 deleteRule() 来插入与删除样式表中的 CSS 规则

98 使用 style 属性修改 CSSStyleRule 的值

99 创建新的内联 CSS 样式表

91 0 以编程方式添加外部样式表到 HTML 文档

91 1 用 disabled 属性使样式表失效/ 生效

第10 章 DOM 中的 JavaScript

101 插入与执行 JavaScript 概览

102 JavaScript 默认同步解析

103 使用 defer 推迟外部脚本的下载与执行

104 使用 async 异步下载并执行外部JavaScript 文件

105 使用动态 ＜script＞ 元素强制异步加载并解析外部 JavaScript

106 通过给异步 ＜script＞ 加 onload 回调从而知道它们何时加载完毕

107 注意含有 DOM 操作的 ＜script＞ 的放置

108 获取 DOM 中 ＜script＞ 列表

第11 章 DOM 事件

111 DOM 事件概览

112 DOM 事件类型

113 事件流程

114 添加事件监听函数到Element 节点、window 对象及document 对象

115 移除事件监听函数

116 从事件对象中获取事件属性

117 使用 addEventListener() 时监听函数中 this 的值

118 事件调用时取得事件模板而不是所绑定的节点或对象

119 使用 preventDefault() 撤销浏览器默认事件

1110 使用 stopPropagation() 终止事件流程

1111 使用 stopImmediatePropagation() 终止事件流程与相同目标上的其他

事件

1112 自定义事件

1113 模拟/ 触发鼠标事件

1114 事件委托

第12 章 创作domjs ：源自jQuery 的灵感，服务于现代

浏览器，这是一个万众期待的DOM 库

121 domjs 概览

122 创建唯一作用域

123 创建 dom() 与 GetOrMakeDom()，全局暴露 dom() 与 GetOrMakeDom

prototype

124 创建传给 dom() 的可选上下文参数

125 依据 params 产生一个持有 DOM 节点引用的对象并返回

126 创建 each() 方法并使它可链式调用

127 创建 html()、append() 及 text() 方法

128 拉 domjs 出来兜兜风

129 总结与 domjs 继续

通过《DOM启蒙》，读者将学习如何通过文档对象模型（DOM）更有效率地操作HTML，而无需DOM操作库的帮助。作者CodyLindley（jQuery手册）用菜谱风格的代码示例，用演示多种节点对象的工作方式，带你领略现代DOM理念。在过去的十年里，框架简化了DOM的用法，后者因此被开发者尘封在前者之下。本书通过现代浏览器原生的概念与代码，将这些工具带回视线。读者将理解jQuery在DOM脚本编写中扮演的角色，并学习如何在移动应
　　用和特定浏览器中直接使用DOM编写应用程序。

海报：