第1章  說說BOM和DOM	1
1.1  BOM簡介	1
1.2  DOM簡介	2
1.3  應用場景	3
1.4  如何學習	4
第2章  BOM詳解	5
2.1  什么是BOM	5
2.1.1  BOM概述	6
2.1.2  BOM的核心之window對象	6
2.2  window對象全接觸	8
2.2.1  window對象的常用屬性	9
2.2.2  定時器和周期事件	11
2.2.3  其他常用方法	21
2.2.4  窗口操作、分幀	24
2.3  window下的常用子對象	28
2.3.1  location	28
2.3.2  navigator	32
2.3.3  history	34
2.3.4  screen	35
2.4  HTML5新特性	36
2.4.1  applicationCache對象	36
2.4.2  haschange對象	36
2.5  本章小結	37
2.6  本章習題	37
第3章  JavaScript事件處理	38
3.1  什么是事件	38
3.1.1  事件類型	39
3.1.2  事件源	40
3.1.3  事件處理程序	40
3.2  事件綁定	40
3.2.1  在DOM元素中直接綁定	40
3.2.2  在JavaScript代碼中綁定	42
3.2.3  綁定事件監聽函數	43
3.3  事件的類型	45
3.3.1  UI事件	45
3.3.2  焦點事件	49
3.3.3  鼠標事件	50
3.3.4  滾輪事件	53
3.3.5  鍵盤與文本事件	55
3.4  事件對象	56
3.4.1  DOM中的事件對象	56
3.4.2  IE中的事件對象	59
3.5  本章小結	60
3.6  本章習題	61
第4章  什么是DOM	63
4.1  DOM簡介	63
4.2  DOM中的D	65
4.3  DOM中的O	66
4.4  DOM中的M	67
4.5  本章小結	69
第5章  DOM可以做什么	70
5.1  通過id獲取標簽元素	70
5.2  操作標簽元素的內容	71
5.3  操作標簽元素的屬性	73
5.4  操作標簽元素的CSS樣式	75
5.5  倒計時秒殺活動實例	76
5.6  本章小結	79
5.7  本章習題	79
第6章  DOM節點操作	80
6.1  什么是節點	80
6.2  節點類型	81
6.2.1  元素節點	81
6.2.2  屬性節點	83
6.2.3  文本節點	84
6.2.4  節點類型、名字、值速查表	85
6.3  通過文檔對象方法獲取節點	86
6.3.1  通過id屬性獲取節點	86
6.3.2  通過標簽名字獲取節點	87
6.3.3  通過類名獲取節點	90
6.3.4  通過name屬性值獲取節點	91
6.4  通過層級關系獲取節點	92
6.4.1  子節點	92
6.4.2  父節點	98
6.4.3  兄弟節點	99
6.4.4  節點的混合操作	101
6.5  節點的其他操作	103
6.5.1  添加節點	103
6.5.2  修改節點	105
6.5.3  刪除節點	107
6.6  自封裝函數庫	108
6.7  QQ空間實例	117
6.8  本章小結	122
第7章  DOM表單相關操作	123
7.1  幾種獲取表單數據的方式	123
7.1.1  通過id屬性獲取表單數據	124
7.1.2  通過name屬性獲取表單數據	125
7.1.3  通過標簽名獲取表單數據	129
7.2  與表單相關的事件	131
7.2.1  焦點事件	131
7.2.2  onchange（改變）事件	132
7.2.3  表單提交事件	135
7.3  給表單加一些驗證	137
7.3.1  驗證長度	138
7.3.2  正則匹配驗證	139
7.4  幾個常見的實例	141
7.4.1  全選，全不選，反選	141
7.4.2  下拉框特效	144
7.4.3  城市級聯特效	147
7.4.4  用戶注冊實例	150
7.5  本章小結	153
第8章  DOM中的Cookie	154
8.1  什么是Cookie	154
8.1.1  Cookie簡介	154
8.1.2  Cookie的特點	155
8.1.3  Cookie的用途	156
8.2  如何操作Cookie	156
8.2.1  查看Cookie	157
8.2.2  添加Cookie	158
8.2.3  設置Cookie過期時間	159
8.2.4  修改Cookie	160
8.2.5  刪除Cookie	161
8.3  本章小結	162
第9章  DOM對象的尺寸和位置	163
9.1  關于DOM對象的尺寸和位置的介紹	163
9.2  DOM文檔對象的尺寸	165
9.2.1  obj.scrollWidth和obj.scrollHeight	165

9.2.2  obj.offsetWidth和obj.offsetHeight、obj.style.width和obj.style.height
的聯系與區別	166
9.2.3  obj.clientWidth和obj.clientHeight的對比與聯系	168
9.3  DOM文檔對象的位置	169
9.3.1  obj.offsetTop和obj.offsetLeft、obj.style.top和obj.style.left
的對比與聯系	169
9.3.2  obj.clientTop和obj.clientLeft	173
9.3.3  obj.scrollTop和obj.scrollLeft	174
9.4  移動端DOM對象的尺寸和位置的運用	175
9.4.1  像素的概念	175
9.4.2  移動端手勢庫——hammer.js	176
9.4.3  移動端實例1——完成一個置頂效果	177
9.4.4  移動端實例2——完成向左向右滑動導航條實例	180
9.5  本章小結	183
第10章  DOM相關屬性和方法	184
10.1  document（文檔）對象	184
10.1.1  document對象集合	184
10.1.2  document對象屬性	189
10.1.3  document對象方法	192
10.2  element（元素）對象	194
10.2.1  element對象屬性	194
10.2.2  element對象方法	208
10.3  attribute（屬性）對象	216
10.3.1  attribute對象屬性	216
10.3.2  attribute對象方法	217
10.3.3  避免使用的屬性和方法	218
10.4  event（事件）對象	219
10.4.1  事件句柄	219
10.4.2  鼠標鍵盤屬性	223
10.4.3  標準event屬性和方法	226
10.5  本章小結	232

第11章  DOM實例篇	233
11.1  打字游戲	233
11.1.1  需求分析	234
11.1.2  知識點整理	234
11.1.3  實戰	235
11.2  使用JavaScript實現PPT效果	244
11.2.1  需求分析	244
11.2.2  知識點整理	244
11.2.3  實戰	245
11.3  自定義鼠標右鍵菜單	250
11.3.1  需求分析	251
11.3.2  知識點整理	251
11.3.3  實戰	252
11.4  放大鏡效果	256
11.4.1  需求分析	256
11.4.2  知識點整理	257
11.4.3  實戰	258
11.5  拖拽效果	266
11.5.1  需求分析	266
11.5.2  知識點整理	266
11.5.3  實戰	267
11.6  淘寶評價效果	273
11.6.1  需求分析	274
11.6.2  知識點整理	274
11.6.3  實戰	274
11.7  輪播圖效果	279
11.7.1  需求分析	279
11.7.2  知識點整理	281
11.7.3  實戰	281

學習了JavaScript的基本語法，其實和網頁并沒有關系，要想使用JavaScript這門語言，讓它發揮出強大的功能，實現炫酷的網頁特效，就必須結合瀏覽器的BOM和HTML頁面的DOM，尤其是DOM。JavaScript最常應用在前端HTML編程中，通過JavaScript讓HTML文檔變得生動形象，具有可交互性，而這一切都是BOM和DOM的功勞。 本書主要面向具有一定JavaScript語法基礎，想讓JavaScript發揮更大作用的人群。學習本書，不需要具備特殊的專業知識，只需熟練掌握“跟兄弟連學HTML5系列教程”的第二本書《細說JavaScript》的基本部分，就可以跟隨本書一起來學習DOM編程了。

隨著HTML5標準化逐漸成熟，以及互聯網的飛速發展和移動端的應用不斷創新，再加上微信公眾號、小程序的應用飆升，原生APP向Web APP和混合APP的轉變，用戶對視覺效果和操作體驗的要求越來越高，HTML5成為移動互聯網的主要技術，也是目前的主流技術之一。HTML5是超文本標記語言（HTML）的第5次修訂，是近年來Web標準的巨大飛躍。Web是一個內涵極為豐富的平臺，和以前版本不同的是，HTML5并非僅僅用來表示Web內容，在這個平臺上還能非常方便地加入視頻、音頻、圖像、動畫，以及與計算機的交互。HTML5的意義在于它帶來了一個無縫的網絡，無論是PC、平板電腦，還是智能手機，都能非常方便地瀏覽基于HTML5的各類網站。對用戶來說，手機上的APP會越來越少，用HTML5實現的一些應用不需要下載安裝，就能立即在手機界面中生成一個APP圖標，使用手機中的瀏覽器來運行，新增的導航標簽也能更好地幫助小屏幕設備和視力障礙人士使用。HTML5擁有服務器推送技術，給用戶帶來了更便捷的實時聊天功能和更快的網游體驗。
HTML5對于開發者來說更是福音。HTML5本身是由W3C推薦的，也就意味著每一個瀏覽器或每一個平臺都可以實現，這樣可以節省開發者花在瀏覽器頁面展現兼容性上的時間。另外，HTML5是Web前端技術的一個代名詞，其核心技術點還是JavaScript。如HTML5的服務器推送技術，再結合JavaScript編程，能夠幫助我們實現服務器將數據“推送”到客戶端的功能，客戶端與服務器之間的數據傳輸將更加高效。基于SVG、Canvas、WebGL及CSS3的3D功能，會讓用戶驚嘆在瀏覽器中所呈現的各種炫酷的視覺效果。以往在iPhone iPad上不支持的Flash將來都有可能通過HTML5華麗地呈現在用戶的iOS設備上。
本套圖書介紹
為了讓前端初學者少走彎路，快速而輕松地學習HTML5和JavaScript編程，我們結合新技術和兄弟連多年的教學經驗積累，再通過對企業實際應用的調研，編寫了一整套HTML5系列圖書，共5本，包括《細說網頁制作》、《細說JavaScript》、《細說DOM編程》、《細說AJAX與jQuery》和《細說HTML5高級API》，每一本書都是不同層次的完整內容，不僅給初學者安排了循序漸進的學習過程，也便于不同層次的讀者選擇；既適合沒有編程基礎的前端初學者作為入門教程，也適合正在從事前端開發的人員作為技術提升參考資料。本套圖書編寫的初衷是為了緊跟新技術和兄弟連IT教育HTML5學科的教學發展，作為本校培訓教程使用，也可作為大、中專院校和其他培訓學校的教材使用。同時，對于前端開發愛好者，本書也有較高的參考價值。
《細說網頁制作》
作為“跟兄弟連學HTML5系列教程”的第一本書，主要帶領HTML5初學者一步步完成精美的頁面制作。本書內容包括HTML應用、CSS應用、HTML5的新技術、各種主流的頁面布局方法和一整套頁面開發實戰技能，讓讀者可以使用多種方法完成PC端的頁面制作、移動端的頁面制作，以及響應式布局頁面的制作，不僅能做出頁面，還能掌握如何做好頁面。
《細說JavaScript》
這是“跟兄弟連學HTML5系列教程”的第二本書，在學習本書之前需要簡單了解一下第一本書中的HTML和CSS內容。本書內容是純JavaScript語言部分，和瀏覽器無關，包括JavaScript基本語法、數據類型、流程控制、函數、對象、數組和內置對象，所有知識點都是為了學習DOM編程、Node.js、JS框架等JavaScript高級部分做準備。本書雖然是JavaScript的基礎部分，但全書內容都需要牢牢掌握，才能更好地晉級學習。
《細說DOM編程》
這是“跟兄弟連學HTML5系列教程”的第三本書，全書內容都和瀏覽器相關，在學習本書之前需要掌握前兩本書的技術。本書內容包括BOM和DOM兩個關鍵技術點，并且全部以PC端和移動端的Web特效為主線，以實例貫穿全部知識點進行講解。學完本書的內容，不僅可以用JavaScript原生的語法完成頁面的特效編寫，也為學習后面的JavaScript框架課程做好了準備。本書內容是Web前端課程的核心，需要讀者按書中的實例多加練習，能熟練地進行瀏覽器中各種特效程序的開發。
《細說AJAX與jQuery》
這是“跟兄弟連學HTML5系列教程”的第四本書，其內容是建立在第三本書之上的，包括服務器端開發語言Node.js、異步傳輸AJAX和jQuery框架三部分。其中，Node.js部分是為了配合AJAX完成客戶端向服務器端的異步請求；jQuery是目前主流的前端開發框架，其目的是讓開發者用盡量少的代碼完成盡可能多的功能。AJAX和jQuery是目前前端開發的必備技術，本書從基本應用開始學起，用實例分解方式講解技術點，讓讀者完全掌握這些必備的技能。
《細說HTML5高級API》
這是“跟兄弟連學HTML5系列教程”的第五本書，是前端開發的應用部分，主要講解HTML5高級API的相關內容，包括畫布、Web存儲、應用緩存、服務器發送事件等，可以用來開發移動端的Web APP項目。本書重點講解了Cordova技術，它提供了一組與設備相關的API，通過這組API，移動應用就能夠通過JavaScript訪問原生的設備功能，如攝像頭、麥克風等。Cordova還提供了一組統一的JavaScript類庫，以及與這些類庫所用的設備相關的原生后臺代碼。通過編寫HTML5程序，再用Cordova打包出混合APP的項目，可以安裝在Android和iOS等設備上。
本套圖書的特點
1．內容豐富，由淺入深
本套圖書在內容組織上本著“起點低，重點高”的原則，內容幾乎涵蓋前端開發的所有核心技能，對于某一方面的介紹再從多角度進行延伸。為了讓讀者更加方便地學習本套圖書的內容，在每本書的每個章節中都提供了一些實際的項目案例，便于讀者在實踐中學習。
2．結構清晰，講解到位
每個章節都環環相扣，為了讓初學者更快地上手，本套圖書精心設計了學習方式。對于概念的講解，都是先用準確的語言總結概括，再用直觀的圖示演示過程，接著以詳細的注釋解釋代碼，最后用形象的比喻幫助記憶。對于框架部分，先提取核心功能快速掌握框架的應用，再用多個對應的實例分別講解每個模塊，最后逐一講解框架的每個功能。對于代碼部分， 先演示程序效果，再根據需求總結出涉及的知識點逐一講解，然后組合成實例，最后總結分析重點功能的邏輯實現。
3．完整案例，代碼實用
為了便于讀者學習，本套圖書的全部案例都可以在商業項目中直接運用，豐富的案例幾乎涵蓋前端應用的各個方面。所有的案例都可以通過對應的二維碼掃描，直接在手機上查看運行結果，讀者可以通過仔細研究其效果，最大限度地掌握開發技術。另外，掃描每個章節中的資源下載二維碼，可以獲得下載鏈接，點擊鏈接即可獲取所有案例的完整源代碼。
4．視頻精致，立體學習
字不如表，表不如圖，圖不如視頻，每本書都配有詳細講解的教學視頻，由兄弟連名師精心錄制，不僅能覆蓋書中的全部知識點，而且遠遠超出書中的內容。通過參考本套圖書，再結合教學視頻學習，可以加快對知識點的掌握，加快學習進度。讀者可以掃描每個章節中提供的教學視頻二維碼，獲取視頻列表直接在手機上觀看，也可以直接登錄“猿代碼（www.ydma.cn）”平臺在PC端觀看，逐步掌握每個技術點。
5．電子教案，學教通用
每本書都提供了和章節配套的電子教案（PPT）。對于學生來說，可以作為學習筆記使用，是知識點的濃縮和重點內容的記錄。由于本套圖書可以作為高校相關課程的教材或課外輔導書，所以可以方便教師教學使用。讀者可以通過掃描對應章節的二維碼，下載或在線觀看電子教案。本書也為部分章節提供了一些擴展文章，也可以通過掃描二維碼的方式下載或在線觀看。
6．實時測試，寓學于練
每章最后都提供了專門的測試習題，供讀者檢驗所學知識是否牢固掌握。通過掃描測試習題對應的二維碼，可以查看答案和詳細的講解。
7．技術支持，服務到位
為了幫助讀者學到更多的HTML5技術，在兄弟連論壇（bbs.itxdl.cn）中還可以下載常用的技術手冊和所需的軟件。筆者及兄弟連IT教育（新三板上市公司，股票代碼：839467）的全體講師和技術人員也會及時回答讀者的提問，與讀者進行在線技術交流，并為讀者提供各類技術文章，幫助讀者提高開發水平，解決讀者在開發中遇到的疑難問題。
本套圖書的讀者群：
有審美，喜歡編程，并且懷揣夢想的有志青年。
打算進入前端編程大門的新手，階梯遞進，由淺入深。
專業培訓機構前端課程授課教材，有體系地掌握全部前端技能。
各大院校的在校學生和相關的授課老師，課件、試題、代碼豐富實用。
前端頁面、Web APP、網頁游戲、微信公眾號等開發的前沿程序員，是專業人員的開發工具。
其他方向的編程愛好者，需要前端技術配合，或轉向前端開發的程序員。