DOM啟蒙

前言
序言
第1 章 節(jié)點(diǎn)概覽
11 文檔對(duì)象模型（Document Object Model，亦稱 DOM）是個(gè)由JavaScript
節(jié)點(diǎn)對(duì)象組成的層次結(jié)構(gòu)/ 樹(shù)
12 節(jié)點(diǎn)對(duì)象類型
13 繼承自節(jié)點(diǎn)對(duì)象的子節(jié)點(diǎn)對(duì)象
14 用于與節(jié)點(diǎn)打交道的屬性與方法
15 識(shí)別節(jié)點(diǎn)的類型與名稱
16 獲取節(jié)點(diǎn)的值
17 使用 JavaScript 方法來(lái)創(chuàng)建元素與文本節(jié)點(diǎn)
18 使用 JavaScript 字符串創(chuàng)建并向DOM 中添加元素與文本節(jié)點(diǎn)
19 提取DOM 樹(shù)中的部分作為JavaScript 字符串
110 使用 appendChild() 與 insertBefore() 向DOM 中插入節(jié)點(diǎn)對(duì)象
111 使用 removeChild() 與 replaceChild() 來(lái)移除與替換節(jié)點(diǎn)
112 使用 cloneNode() 來(lái)復(fù)制節(jié)點(diǎn)
113 理解節(jié)點(diǎn)集合（即 NodeList 與 HTMLCollection）
114 獲取所有直屬子節(jié)點(diǎn)的列表/ 集合
115 將 NodeList 或者 HTMLCollection 轉(zhuǎn)換成JavaScript 數(shù)組
116 遍歷 DOM 中的節(jié)點(diǎn)
117 使用 contains() 與 compareDocumentPosition() 驗(yàn)證節(jié)點(diǎn)在 DOM 樹(shù)中的
位置
118 判斷兩個(gè)節(jié)點(diǎn)是否相同
第2 章 文檔節(jié)點(diǎn)
21 文檔節(jié)點(diǎn)概覽
22 HTML 文檔屬性與方法（包括繼承的）
23 獲取 HTML Document 通用信息（標(biāo)題、鏈接、提及者、最后修改時(shí)間
及兼容模式）
24 文檔子節(jié)點(diǎn)
25 document 提供的 ＜!DOCTYPE＞、＜html lang="en"＞、＜head＞ 及 ＜body＞
捷徑
26 使用 documentimplementationhasFeature() 探測(cè) DOM 規(guī)范/ 特性
27 獲取文檔中當(dāng)前聚焦/ 激活節(jié)點(diǎn)的引用
28 判斷文檔或者文檔中任何節(jié)點(diǎn)得到焦點(diǎn)
29 documentdefaultView 是個(gè)到頂部/ 全局對(duì)象的捷徑
210 使用 ownerDocument 從某一元素取得文檔的引用
第3 章 元素節(jié)點(diǎn)
31 HTML*Element 對(duì)象概覽
32 HTML*Element 對(duì)象屬性與方法（包括繼承的）
33 創(chuàng)建元素
34 獲取元素的標(biāo)簽名
35 獲取元素屬性與值的列表/ 集合
36 獲取、設(shè)置及移除元素的屬性值
37 驗(yàn)證元素是否有某一特定屬性
38 獲取類屬性值列表
39 添加與移除類屬性中的部分值
310 變換某個(gè)類屬性值
311 判斷類屬性值是否含有某一特定值
312 獲取與設(shè)置 data-* 屬性
第4 章 元素節(jié)點(diǎn)選取
41 選取特定元素節(jié)點(diǎn)
42 選取/ 創(chuàng)建一個(gè)元素節(jié)點(diǎn)列表（即 NodeList）
43 選取所有的直屬子元素節(jié)點(diǎn)
44 選取與上下文有關(guān)的元素
45 預(yù)定義的元素節(jié)點(diǎn)選取/ 列表
46 使用 matchesSelector() 驗(yàn)證元素會(huì)否被選取
第5 章 元素節(jié)點(diǎn)幾何量與滾動(dòng)幾何量
51 元素節(jié)點(diǎn)尺寸、偏移及滾動(dòng)概覽
52 獲取元素相對(duì)于 offsetParent 的 offsetTop 及 offsetLeft 值
53 使用 getBoundingClientRect() 獲取元素相對(duì)于視區(qū)的Top， Right， Bottom
及Left 邊沿偏移量
54 獲取元素在視區(qū)中的尺寸（邊框 + 填充 + 內(nèi)容）
55 獲取元素在視區(qū)中的尺寸（填充 + 內(nèi)容），不含邊框
56 使用 elementFromPoint() 獲取視區(qū)中某一特定點(diǎn)上最頂層的元素
57 使用 scrollHeight 及 scrollWidth 獲取滾動(dòng)元素的尺寸
58 使用 scrollTop 及scrollLeft 獲取并設(shè)置從上、左邊滾動(dòng)的距離
59 使用 scrollIntoView() 滾動(dòng)元素到視區(qū)
第6 章 元素節(jié)點(diǎn)內(nèi)聯(lián)樣式
61 樣式屬性（亦稱元素內(nèi)聯(lián) CSS 屬性）概覽
62 獲取、設(shè)置及移除單個(gè)內(nèi)聯(lián) CSS 屬性
63 獲取、設(shè)置及移除所有內(nèi)聯(lián) CSS 屬性
64 使用 getComputedStyle() 獲取元素的已計(jì)算樣式（即包含任何級(jí)聯(lián)樣式的
實(shí)際樣式）
65 使用 class 及 id 屬性應(yīng)用或者移除元素上的 CSS 屬性
第7 章 文本節(jié)點(diǎn)
71 文本對(duì)象概覽
72 文本對(duì)象與屬性
73 空白符創(chuàng)建文本節(jié)點(diǎn)
74 創(chuàng)建與注入文本節(jié)點(diǎn)
75 使用 data 或 nodeValue 獲取文本節(jié)點(diǎn)值
76 使用appendData()、deleteData()、insertData()、replaceData() 及
subStringData() 操作文本節(jié)點(diǎn)
77 當(dāng)有多個(gè)兄弟文本節(jié)點(diǎn)時(shí)
78 使用 textContent 移除文本標(biāo)記并返回所有的子文本節(jié)點(diǎn)
79 textContent 與 innerText 的區(qū)別
710 使用 normalize() 合并兄弟文本節(jié)點(diǎn)成單個(gè)文本節(jié)點(diǎn)
711 使用 splitText() 分割文本節(jié)點(diǎn)
第8 章 DocumentFragment 節(jié)點(diǎn)
81 DocumentFragment 對(duì)象概覽
82 使用 createDocumentFragment() 創(chuàng)建 DocumentFragment
83 添加 DocumentFragment 到實(shí)時(shí) DOM
84 使用文檔片段上的 innerHTML
85 通過(guò)復(fù)制將片段所含節(jié)點(diǎn)保留在內(nèi)存中
第9 章 CSS 樣式表與 CSS 規(guī)則
91 CSS 樣式表概覽
92 訪問(wèn) DOM 中所有樣式表（即 CSSStyleSheet 對(duì)象）
93 CSSStyleSheet 屬性與方法
94 CSSStyleRule 概覽
95 CSSStyleRule 屬性與方法
96 使用 cssRules 獲取樣式表內(nèi)的 CSS 規(guī)則列表
97 使用 insertRule() 和 deleteRule() 來(lái)插入與刪除樣式表中的 CSS 規(guī)則
98 使用 style 屬性修改 CSSStyleRule 的值
99 創(chuàng)建新的內(nèi)聯(lián) CSS 樣式表
91 0 以編程方式添加外部樣式表到 HTML 文檔
91 1 用 disabled 屬性使樣式表失效/ 生效
第10 章 DOM 中的 JavaScript
101 插入與執(zhí)行 JavaScript 概覽
102 JavaScript 默認(rèn)同步解析
103 使用 defer 推遲外部腳本的下載與執(zhí)行
104 使用 async 異步下載并執(zhí)行外部JavaScript 文件
105 使用動(dòng)態(tài) ＜script＞ 元素強(qiáng)制異步加載并解析外部 JavaScript
106 通過(guò)給異步 ＜script＞ 加 onload 回調(diào)從而知道它們何時(shí)加載完畢
107 注意含有 DOM 操作的 ＜script＞ 的放置
108 獲取 DOM 中 ＜script＞ 列表
第11 章 DOM 事件
111 DOM 事件概覽
112 DOM 事件類型
113 事件流程
114 添加事件監(jiān)聽(tīng)函數(shù)到Element 節(jié)點(diǎn)、window 對(duì)象及document 對(duì)象
115 移除事件監(jiān)聽(tīng)函數(shù)
116 從事件對(duì)象中獲取事件屬性
117 使用 addEventListener() 時(shí)監(jiān)聽(tīng)函數(shù)中 this 的值
118 事件調(diào)用時(shí)取得事件模板而不是所綁定的節(jié)點(diǎn)或?qū)ο?br />119 使用 preventDefault() 撤銷瀏覽器默認(rèn)事件
1110 使用 stopPropagation() 終止事件流程
1111 使用 stopImmediatePropagation() 終止事件流程與相同目標(biāo)上的其他
事件
1112 自定義事件
1113 模擬/ 觸發(fā)鼠標(biāo)事件
1114 事件委托
第12 章 創(chuàng)作domjs ：源自jQuery 的靈感，服務(wù)于現(xiàn)代
瀏覽器，這是一個(gè)萬(wàn)眾期待的DOM 庫(kù)
121 domjs 概覽
122 創(chuàng)建唯一作用域
123 創(chuàng)建 dom() 與 GetOrMakeDom()，全局暴露 dom() 與 GetOrMakeDom
prototype
124 創(chuàng)建傳給 dom() 的可選上下文參數(shù)
125 依據(jù) params 產(chǎn)生一個(gè)持有 DOM 節(jié)點(diǎn)引用的對(duì)象并返回
126 創(chuàng)建 each() 方法并使它可鏈?zhǔn)秸{(diào)用
127 創(chuàng)建 html()、append() 及 text() 方法
128 拉 domjs 出來(lái)兜兜風(fēng)
129 總結(jié)與 domjs 繼續(xù)