什麼是DOM
DOM：文檔對象模型。DOM 爲文檔提供告終構化表示，並定義瞭如何經過腳原本訪問文檔結構。目的其實就是爲了能讓js操做html元素而制定的一個規範。
DOM就是由節點組成的。
解析過程
HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。而後操做的時候修改的是該元素的屬性。
DOM樹（一切都是節點）
DOM的數據結構以下：
上圖可知，在HTML當中，一切都是節點：（很是重要）
-
元素節點：HMTL標籤。
-
文本節點：標籤中的文字（好比標籤之間的空格、換行）
-
屬性節點：：標籤的屬性。
整個html文檔就是一個文檔節點。全部的節點都是Object。
DOM能夠作什麼
-
找對象（元素節點）
-
設置元素的屬性值
-
設置元素的樣式
-
動態建立和刪除元素
-
事件的觸發響應：事件源、事件、事件的驅動程序
DOM節點的獲取
DOM節點的獲取方式其實就是獲取事件源的方式
操做元素節點，必須首先找到該節點。有三種方式能夠獲取DOM節點：
var div1 = document.getElementById("box1"); //方式一：經過id獲取單個標籤
var arr1 = document.getElementsByTagName("div1"); //方式二：經過 標籤名 得到 標籤數組，因此有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：經過 類名 得到 標籤數組，因此有s
既然方式2、方式三獲取的是標籤數組，那麼習慣性是先遍歷以後再使用。
特殊狀況：數組中的值只有1個。即使如此，這一個值也是包在數組裏的。這個值的獲取方式以下：
document.getElementsByTagName("div1")[0]; //取數組中的第一個元素
document.getElementsByClassName("hehe")[0]; //取數組中的第一個元素
DOM訪問關係的獲取
DOM的節點並非孤立的，所以能夠經過DOM節點之間的相對關係對它們進行訪問。以下：
節點的訪問關係，是以屬性的方式存在的。
JS中的父子兄訪問關係：
這裏咱們要重點知道parentNode和children這兩個屬性的用法。下面分別介紹。
獲取父節點
調用者就是節點。一個節點只有一個父節點，調用方式就是
節點.parentNode
（1）nextSibling：
指的是下一個節點（包括標籤、空文檔和換行節點）
-
火狐、谷歌、IE9+版本：都指的是下一個節點（包括標籤、空文檔和換行節點）。
-
IE678版本：指下一個元素節點（標籤）。
（2）nextElementSibling：
- 火狐、谷歌、IE9+版本：都指的是下一個元素節點（標籤）。
總結：爲了獲取下一個元素節點，咱們能夠這樣作：在IE678中用nextSibling，在火狐谷歌IE9+之後用nextElementSibling，因而，綜合這兩個屬性，能夠這樣寫：
下一個兄弟節點 = 節點.nextElementSibling || 節點.nextSibling
previous的中文是: 前一個
（1）previousSibling：
-
火狐、谷歌、IE9+版本：都指的是前一個節點（包括標籤、空文檔和換行節點）。
-
IE678版本：指前一個元素節點（標籤）。
（2）previousElementSibling：
- 火狐、谷歌、IE9+版本：都指的是前一個元素節點（標籤）。
總結：爲了獲取前一個元素節點，咱們能夠這樣作：在IE678中用previousSibling，在火狐谷歌IE9+之後用previousElementSibling，因而，綜合這兩個屬性，能夠這樣寫：
前一個兄弟節點 = 節點.previousElementSibling || 節點.previousSibling
三、補充：得到任意一個兄弟節點：
節點本身.parentNode.children[index]; //隨意獲得兄弟節點
獲取單個的子節點
一、第一個子節點 | 第一個子元素節點：
（1）firstChild：
-
火狐、谷歌、IE9+版本：都指的是第一個子節點（包括標籤、空文檔和換行節點）。
-
IE678版本：指第一個子元素節點（標籤）。
（2）firstElementChild：
- 火狐、谷歌、IE9+版本：都指的是第一個子元素節點（標籤）。
總結：爲了獲取第一個子元素節點，咱們能夠這樣作：在IE678中用firstChild，在火狐谷歌IE9+之後用firstElementChild，因而，綜合這兩個屬性，能夠這樣寫：
第一個子元素節點 = 節點.firstElementChild || 節點.firstChild
二、最後一個子節點 | 最後一個子元素節點：
（1）lastChild：
-
火狐、谷歌、IE9+版本：都指的是最後一個子節點（包括標籤、空文檔和換行節點）。
-
IE678版本：指最後一個子元素節點（標籤）。
（2）lastElementChild：
- 火狐、谷歌、IE9+版本：都指的是最後一個子元素節點（標籤）。
總結：爲了獲取最後一個子元素節點，咱們能夠這樣作：在IE678中用lastChild，在火狐谷歌IE9+之後用lastElementChild，因而，綜合這兩個屬性，能夠這樣寫：
最後一個子元素節點 = 節點.lastElementChild || 節點.lastChild
獲取全部的子節點
（1）childNodes：標準屬性。返回的是指定元素的子節點的集合（包括元素節點、全部屬性、文本節點）。是W3C的親兒子。
- 火狐 谷歌等高本版會把換行也看作是子節點。（瞭解）
用法：
子節點數組 = 父節點.childNodes; //獲取全部節點。
（2）children：非標準屬性。返回的是指定元素的子元素節點的集合。【重要】
- 它只返回HTML節點，甚至不返回文本節點。
- 在IE6/7/8中包含註釋節點（在IE678中，註釋節點不要寫在裏面）。
雖然不是標準的DOM屬性，但它和innerHTML方法同樣，獲得了幾乎全部瀏覽器的支持。
用法：（用的最多）
子節點數組 = 父節點.children; //獲取全部節點。用的最多。
nodeType
這裏講一下nodeType。
-
nodeType == 1 表示的是元素節點（標籤） 。記住：元素就是標籤。
-
nodeType == 2 表示是屬性節點 瞭解
-
nodeType == 3 是文本節點 瞭解
DOM節點操做（重要）
上一段的內容：節點的訪問關係都是屬性。
節點的操做都是函數（方法）
建立節點
格式以下：
新的標籤(元素節點) = document.createElement("標籤名");
好比，若是咱們想建立一個li標籤，或者是建立一個不存在的adbc標籤，能夠這樣作：
<script type="text/javascript">
var a1 = document.createElement("li"); //建立一個li標籤
var a2 = document.createElement("adbc"); //建立一個不存在的標籤
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
結果：
插入節點
插入節點有兩種方式，它們的含義是不一樣的。
方式1：
父節點.appendChild(新的子節點);
解釋：父節點的最後插入一個新的子節點。
方式2：
父節點.insertBefore(新的子節點,做爲參考的子節點);
解釋：
- 在參考節點前插入一個新的節點。
- 若是參考節點爲null，那麼他將在父節點最後插入一個子節點。
刪除節點
格式以下：
父節點.removeChild(子節點);
解釋：用父節點刪除子節點。必需要指定是刪除哪一個子節點。
若是我想刪除本身這個節點，能夠這麼作：
node1.parentNode.removeChild(node1);
複製節點（克隆節點）
格式以下：
要複製的節點.cloneNode(); //括號裏不帶參數和帶參數false，效果是同樣的。 要複製的節點.cloneNode(true);
括號裏帶不帶參數，效果是不一樣的。解釋以下：
-
不帶參數/帶參數false：只複製節點自己，不復制子節點。
-
帶參數true：既複製節點自己，也複製其全部的子節點。
設置節點的屬性
咱們能夠獲取節點的屬性值、設置節點的屬性值、刪除節點的屬性。
咱們就統一拿下面這個標籤來舉例：
<img src="images/1.jpg" class="image-box" title="美女圖片" alt="地鐵一瞥" id="a1">
下面分別介紹。
一、獲取節點的屬性值
方式1：
元素節點.屬性;
元素節點[屬性];
舉例：（獲取節點的屬性值）
<body>
<img src="images/1.jpg" class="image-box" title="美女圖片" alt="地鐵一瞥" id="a1">
<script type="text/javascript">
var myNode = document.getElementsByTagName("img")[0];
console.log(myNode.src);
console.log(myNode.className); //注意，是className，不是class
console.log(myNode.title);
console.log("------------");
console.log(myNode["src"]);
console.log(myNode["className"]); //注意，是className，不是class
console.log(myNode["title"]);
</script>
</body>
方式2：（推薦）
素節點.getAttribute("屬性名稱");
例子：
console.log(myNode.getAttribute("src"));
console.log(myNode.getAttribute("class")); //注意是class，不是className
console.log(myNode.getAttribute("title"));
方式1和方式2的區別在於：前者是直接操做標籤，後者是把標籤做爲DOM節點。推薦方式2。
二、設置節點的屬性值
方式1舉例：（設置節點的屬性值）
myNode.src = "images/2.jpg" //修改src的屬性值
myNode.className = "image2-box"; //修改class的name
方式2：（推薦）
元素節點.setAttribute(屬性名, 新的屬性值);
方式2舉例：（設置節點的屬性值）
myNode.setAttribute("src","images/3.jpg");
myNode.setAttribute("class","image3-box");
myNode.setAttribute("id","你好");
三、刪除節點的屬性
格式：
元素節點.removeAttribute(屬性名);
舉例：（刪除節點的屬性）
myNode.removeAttribute("class");
myNode.removeAttribute("id");
補充：
innerHTML、innerText 、value