11-DOM介紹
什麽是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
既然方式二、方式三獲取的是標簽數組，那麽習慣性是先遍歷之後再使用。
特殊情況：數組中的值只有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
3、補充：獲得任意一個兄弟節點：
節點自己.parentNode.children[index]; //隨意得到兄弟節點
獲取單個的子節點
1、第一個子節點 | 第一個子元素節點：
（1）firstChild：
-
火狐、谷歌、IE9+版本：都指的是第一個子節點（包括標簽、空文檔和換行節點）。
-
IE678版本：指第一個子元素節點（標簽）。
（2）firstElementChild：
- 火狐、谷歌、IE9+版本：都指的是第一個子元素節點（標簽）。
總結：為了獲取第一個子元素節點，我們可以這樣做：在IE678中用firstChild，在火狐谷歌IE9+以後用firstElementChild，於是，綜合這兩個屬性，可以這樣寫：
第一個子元素節點 = 節點.firstElementChild || 節點.firstChild
2、最後一個子節點 | 最後一個子元素節點：
（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、獲取節點的屬性值
方式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。
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","你好");
3、刪除節點的屬性
格式：
元素節點.removeAttribute(屬性名);
舉例：（刪除節點的屬性）
myNode.removeAttribute("class");
myNode.removeAttribute("id");
補充：
innerHTML、innerText 、value
11-DOM介紹