DOM 概念
所謂DOM,全稱 Docuemnt Object Model 文檔對象模型，毫無疑問，此時要操作對象，什麼對象？
在文檔中一切皆對象，比如html,body,div,p等等都看做對象，那麼我們如何來點擊某個盒子讓它變色呢？
DOM 爲文檔提供了結構化表示，並定義瞭如何通過腳本來訪問文檔結構。目的其實就是爲了能讓js操作html元素而制定的一個規範。
解析過程
HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。然後操作的時候修改的是該元素的屬性。
DOM樹（一切皆是節點）
在HTML當中，一切都是節點：（非常重要）
元素節點：HMTL標籤。
文本節點：標籤中的文字（比如標籤之間的空格、換行）
屬性節點：：標籤的屬性
DOM可以做什麼
找對象（元素節點）
設置元素的屬性值
設置元素的樣式
動態創建和刪除元素
事件的觸發響應：事件源、事件、事件的驅動程序
清楚DOM的結構
獲取文檔對象：document
獲取html：document.documentElement
獲取body: document.body
獲取其它DOM（事件源）的三種方式
var oDiv1 = document.getElementById("box1"); //方式一：通過id獲取單個標籤
var oDiv2 = document.getElementsByTagName("div")[0]; //方式二：通過 標籤名 獲得 標籤數組，所以有s
var oDiv3 = document.getElementsByClassName("box")[0]; //方式三：通過 類名 獲得 標籤數組，所以有s
事件
JS是事件驅動爲核心的一門語言。
事件的三要素
事件的三要素：事件源、事件、事件驅動程序。
代碼書寫步驟如下：（重要）
（1）獲取事件源：document.getElementById(“box”); //類似與ios語言的UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）綁定事件： 事件源box.事件onclick = function(){ 事件驅動程序 };
（3）書寫事件驅動程序：關於DOM的操作
綁定事件的方式
JavaScript入口函數 window.onload()
函數調用，是當頁面加載完畢(文檔和圖片)的時候，觸發onload()函數，文檔先加載，圖片資源後加載。
有一點我們要知道：js的加載是和html同步加載的。因此，如果使用元素在定義元素之前，容易報錯。這個時候，onload事件就能派上用場了，我們可以把使用元素的代碼放在onload裏，就能保證這段代碼是最後執行。
window.onload()方法存在的問題
- 圖片加載完成才調用onload方法，大家想個問題，如果現在用戶訪問JD商城頁面，如果JD商城中的腳本文件在window.onload()方法調用，如果此時用戶網速卡了，然後圖片資源加載失敗了，此時用戶是做不了任何操作的，所以winodw.onload()方法有很大問題。
- window.onload()方法 如果腳本中書寫兩個這樣的方法，那麼會有事件覆蓋現象。
樣式屬性操作
所謂樣式屬性，就是對之前所講解的style標籤中的屬性進行操作，並且通過js控制盒模型的屬性（width,height等），控制盒子的顯示隱藏（display:none|block）,控制盒子的顏色切換（background：red|green）等等
首先，大家明確一點，你是要操作文檔對象了，要遵循事件三步走
獲取事件源
事件
事件驅動程序
值的操作
所謂值的操作，就是對前閉合標籤和後閉合標籤中間的文本內容的設置和獲取。
雙閉合標籤： innerText或者innerHTML
單閉合標籤：除了img標籤，就剩input了，使用value進行賦值
標籤屬性操作
所謂標籤屬性,就是對標籤中（字面上看到的）屬性的操作。比如像每個標籤中id，class，title、img
標籤的src屬性和alt屬性、a標籤的href屬性、input標籤中的name、type屬性等等
節點的操作
插入節點
方式1：
父節點.appendChild(新的子節點);
解釋：父節點的最後插入一個新的子節點。
方式2：
父節點.insertBefore(新的子節點,作爲參考的子節點);
刪除節點
父節點.removeChild(子節點);
如果我想刪除自己這個節點，可以這麼做：
node1.parentNode.removeChild(node1);