DOM

節(jié)點

節(jié)點（Node）：構成 HTML 網(wǎng)頁的最基本單元荠商。網(wǎng)頁中的每一個部分都可以稱為是一個節(jié)點寂恬，比如：html標簽、屬性结啼、文本掠剑、注釋、整個文檔等都是一個節(jié)點郊愧。雖然都是節(jié)點朴译，但是實際上他們的具體類型是不同的。常見節(jié)點分為四類：

文檔節(jié)點（文檔）：整個 HTML 文檔属铁。整個 HTML 文檔就是一個文檔節(jié)點眠寿。
元素節(jié)點（標簽）：HTML標簽。
屬性節(jié)點（屬性）：元素的屬性焦蘑。
文本節(jié)點（文本）：HTML標簽中的文本內(nèi)容（包括標簽之間的空格盯拱、換行）。

節(jié)點的類型不同例嘱，屬性和方法也都不盡相同狡逢。所有的節(jié)點都是Object。

DOM又稱為文檔樹模型拼卵。DOM就是由節(jié)點組成的奢浑。
解析過程： HTML加載完畢，渲染引擎會在內(nèi)存中把HTML文檔腋腮，生成一個DOM樹雀彼，getElementById是獲取內(nèi)中DOM上的元素節(jié)點。然后操作的時候修改的是該元素的屬性即寡。

DOM樹

DOM可以做什么

找對象（元素節(jié)點）
設置元素的屬性值
設置元素的樣式
動態(tài)創(chuàng)建和刪除元素
事件的觸發(fā)響應：事件源徊哑、事件、事件的驅動程序

獲取元素節(jié)點

想要操作元素節(jié)點聪富，必須首先要找到該節(jié)點莺丑。有三種方式可以獲取DOM節(jié)點：

var div1 = document.getElementById("box1"); //方式一：通過 id 獲取 一個 元素節(jié)點（為什么是一個呢？因為 id 是唯一的）

var arr1 = document.getElementsByTagName("div"); //方式二：通過 標簽名 獲取 元素節(jié)點數(shù)組墩蔓，所以有s

var arr2 = document.getElementsByClassName("hehe"); //方式三：通過 類名 獲取 元素節(jié)點數(shù)組梢莽，所以有s

DOM的節(jié)點并不是孤立的，可以通過DOM節(jié)點之間的關系來獲取

節(jié)點關系

獲取父節(jié)點

節(jié)點.parentNode

獲取兄弟節(jié)點

下一個節(jié)點 | 下一個元素節(jié)點：

nextSibling：
火狐钢拧、谷歌蟹漓、IE9+版本：都指的是下一個節(jié)點（包括標簽、空文檔和換行節(jié)點）源内。
IE678版本：指下一個元素節(jié)點（標簽）葡粒。
nextElementSibling：
火狐、谷歌膜钓、IE9+版本：都指的是下一個元素節(jié)點（標簽）嗽交。
為了獲取下一個元素節(jié)點，我們可以這樣做：在IE678中用nextSibling颂斜，在火狐谷歌IE9+以后用nextElementSibling夫壁，于是，綜合這兩個屬性沃疮，可以這樣寫

下一個兄弟節(jié)點 = 節(jié)點.nextElementSibling || 節(jié)點.nextSibling

** 前一個節(jié)點 | 前一個元素節(jié)點：**

previousSibling：
火狐盒让、谷歌梅肤、IE9+版本：都指的是前一個節(jié)點（包括標簽、空文檔和換行節(jié)點）邑茄。
IE678版本：指前一個元素節(jié)點（標簽）姨蝴。

previousElementSibling：

火狐、谷歌肺缕、IE9+版本：都指的是前一個元素節(jié)點（標簽）左医。
為了獲取前一個元素節(jié)點，我們可以這樣做：在IE678中用previousSibling同木，在火狐谷歌IE9+以后用previousElementSibling浮梢，于是，綜合這兩個屬性彤路，可以這樣寫：

前一個兄弟節(jié)點 = 節(jié)點.previousElementSibling || 節(jié)點.previousSibling

獲取其他兄弟節(jié)點

節(jié)點自己.parentNode.children[index];  //隨意得到兄弟節(jié)點

獲取單個子節(jié)點

第一個子節(jié)點 | 第一個子元素節(jié)點

firstChild：火狐秕硝、谷歌、IE9+版本：都指的是第一個子節(jié)點（包括標簽斩萌、空文檔和換行節(jié)點）缝裤。IE678版本：指第一個子元素節(jié)點（標簽）。
firstElementChild：火狐颊郎、谷歌憋飞、IE9+版本：都指的是第一個子元素節(jié)點（標簽）。
為了獲取第一個子元素節(jié)點姆吭，我們可以這樣做：在IE678中用firstChild榛做，在火狐谷歌IE9+以后用firstElementChild，于是内狸，綜合這兩個屬性检眯，可以這樣寫：

第一個子元素節(jié)點 = 節(jié)點.firstElementChild || 節(jié)點.firstChild

最后一個子節(jié)點 | 最后一個子元素節(jié)點

lastChild
火狐、谷歌昆淡、IE9+版本：都指的是最后一個子節(jié)點（包括標簽锰瘸、空文檔和換行節(jié)點）。IE678版本：指最后一個子元素節(jié)點（標簽）昂灵。
lastElementChild
火狐避凝、谷歌、IE9+版本：都指的是最后一個子元素節(jié)點（標簽）眨补。
為了獲取最后一個子元素節(jié)點管削，我們可以這樣做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild撑螺，于是含思，綜合這兩個屬性，可以這樣寫：

最后一個子元素節(jié)點 = 節(jié)點.lastElementChild || 節(jié)點.lastChild

獲取所有的子節(jié)點

childNodes：標準屬性。返回的是指定元素的子節(jié)點的集合（包括元素節(jié)點含潘、所有屬性饲做、文本節(jié)點）。

火狐谷歌等高本版會把換行也看做是子節(jié)點调鬓。

子節(jié)點數(shù)組 = 父節(jié)點.childNodes;   //獲取所有節(jié)點艇炎。

children：非標準屬性酌伊。返回的是指定元素的子元素節(jié)點的集合
它只返回HTML節(jié)點腾窝，甚至不返回文本節(jié)點。在IE6/7/8中包含注釋節(jié)點（在IE678中居砖，注釋節(jié)點不要寫在里面）虹脯。雖然不是標準的DOM屬性，但它和innerHTML方法一樣奏候，得到了幾乎所有瀏覽器的支持循集。

子節(jié)點數(shù)組 = 父節(jié)點.children;   //獲取所有節(jié)點。

DOM節(jié)點操作

創(chuàng)建節(jié)點

新的標簽(元素節(jié)點) = document.createElement("標簽名");

插入節(jié)點

父節(jié)點.appendChild(新的子節(jié)點);//父節(jié)點的最后插入一個新的子節(jié)點蔗草。

父節(jié)點.insertBefore(新的子節(jié)點,作為參考的子節(jié)點)/*在參考節(jié)點前插入一個新的節(jié)點咒彤。如果參考節(jié)點為null，那么他將在父節(jié)點里面的最后插入一個子節(jié)點咒精。*/

刪除節(jié)點

父節(jié)點.removeChild(子節(jié)點);//用父節(jié)點刪除子節(jié)點镶柱。必須要指定是刪除哪個子節(jié)點。

刪除當前節(jié)點

node1.parentNode.removeChild(node1);

復制節(jié)點

要復制的節(jié)點.cloneNode();       //括號里不帶參數(shù)和帶參數(shù)false模叙，效果是一樣的歇拆。
要復制的節(jié)點.cloneNode(true);

不帶參數(shù)/帶參數(shù)false：只復制節(jié)點本身，不復制子節(jié)點范咨。
帶參數(shù)true：既復制節(jié)點本身故觅，也復制其所有的子節(jié)點。

設置節(jié)點屬性

獲取節(jié)點屬性

語法如下渠啊，

元素節(jié)點.屬性名;
元素節(jié)點[屬性名];

<body>
<img src="images/1.jpg" class="image-box" title="圖片"  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"));

設置節(jié)點的屬性值

myNode.src = "images/2.jpg"   //修改src的屬性值
    myNode.className = "image2-box";  //修改class的name

或者灭返，

元素節(jié)點.setAttribute("屬性名", "新的屬性值");

 myNode.setAttribute("src","images/3.jpg");
    myNode.setAttribute("class","image3-box");
    myNode.setAttribute("id","你好");

刪除節(jié)點的屬性

元素節(jié)點.removeAttribute(屬性名);

  myNode.removeAttribute("class");
    myNode.removeAttribute("id");

方式1: 元素節(jié)點.屬性和元素節(jié)點[屬性]：綁定的屬性值不會出現(xiàn)在標簽上盗迟。

方式2 : get/set/removeAttribut：綁定的屬性值會出現(xiàn)在標簽上。

這兩種方式不能交換使用熙含，get值和set值必須使用同一種方法罚缕。

nodeType屬性

nodeType == 1 表示的是元素節(jié)點（標簽）。記自蹙病：在這里邮弹，元素就是標簽黔衡。
nodeType == 2 表示是屬性節(jié)點。
nodeType == 3 是文本節(jié)點腌乡。

文檔加載

文檔的加載
瀏覽器在加載一個頁面時盟劫，是按照自上向下的順序加載的，讀取到一行就運行一行与纽。如果將script標簽寫到頁面的上邊侣签，在代碼執(zhí)行時，頁面還沒有加載急迂，頁面沒有加載DOM對象也沒有加載影所，會導致無法獲取到DOM對象。
onload 事件：
onload 事件會在整個頁面加載完成之后才觸發(fā)僚碎。為 window 綁定一個onload事件猴娩，該事件對應的響應函數(shù)將會在頁面加載完成之后執(zhí)行，這樣可以確保我們的代碼執(zhí)行時所有的DOM對象已經(jīng)加載完畢了勺阐。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript">
      // 【方式一：先加載卷中，后執(zhí)行】這段 js 代碼是寫在 <head> 標簽里的，所以建議放在 window.onload 里面渊抽。
      window.onload = function() {
        // 獲取id為btn的按鈕
        var btn = document.getElementById("btn");
        // 為按鈕綁定點擊事件
        btn.onclick = function() {
          alert("hello");
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">點我一下</button>

    <script type="text/javascript">
      // 【方式二：后加載蟆豫，后執(zhí)行】這段 js 代碼是寫在 <body> 標簽里的，代碼的位置是處在頁面的下方腰吟。這么做无埃，也可以確保：在頁面加載完畢后，再執(zhí)行 js 代碼毛雇。

      // 獲取id為btn的按鈕
      var btn = document.getElementById("btn");
      // 為按鈕綁定點擊事件
      btn.onclick = function() {
        alert("hello");
      };
    </script>
  </body>
</html>