目錄

• 獲取DOM元素
• 動態操作DOM元素
• DOM的節點以及屬性

獲取DOM元素

• document.getElementById 一個元素

  1. 通過ID名稱獲取元素，元素是個物件;元素都是物件資料型別的；
  2. 如果獲取不到，獲取結果是null
  3. 如果名字相同，只獲取第一個
  4. getElementById的上下文只能是document；

• [context].getElementsByTagName 元素集合

  通過標籤名來獲取元素；得到是一個元素集合；
  getElementsByTagName 方法支援元素作為該方法的上下文；

• [context].getElementsByClassName 元素集合

  通過class名稱獲取DOM元素集合；
  結果也是一個複數，如果需要獲取具體的某個元素，需要加上索引；

• document.getElementsByName 節點集合

  通過name屬性來獲取元素集合；一般用於表單元素；

• document.documentElement 獲取整個HTML物件
• document.body 獲取整個BODY對像
• document.head 獲取整個HEAD對像
• [context].querySelector 一個元素物件
• [context].querySelectorAll 獲取元素集合

• ......

動態操作DOM元素

1. document.createElement: 建立一個元素
   document.createElement(標籤名)
2. appendChild 向容器的末尾新增子節點
   容器.appendChild(元素)
   box.appendChild(newDiv)
   3.insertBefore : 向容器中的某個元素前面插入新元素
   容器.insertBefore(newChild,oldChild)
   box.insertBefore(newDiv,first)
3. removeChild : 刪除子節點
   容器.removeChild(oldChild)
4. replaceChild: 用新的子節點替換老的子節點
   容器.replaceChild(newChild,oldChild)
5. cloneNode : 克隆一份同樣的元素
   cloneNode的引數一個是true，代表深度克隆，將子孫節點也克隆出來
   false：如果不傳就是false；淺克隆；
   var divs = box.cloneNode(true);
6. getAttribute : 獲取行間屬性所對應的屬性值；沒有獲取到是null;
   setAttribute : 設定行間屬性所對應的屬性值
   setAttribute(屬性名，屬性值)
removeAttribute(屬性名): 移除行間屬性
7. classList; add remove replace 類名的增刪改

box.className="a"
box.classList.add("a")
box.classList.remove("a")
box.classList.replace("a","b")// 第一個引數是舊的，後面是新的class

DOM的節點以及屬性

node：節點，瀏覽器認為在一個HTML頁面內的所有內容都是節點（包括標籤、註釋、文字文字等）

• 元素節點：HTML標籤
• 文字節點：文字內容（高版本瀏覽器會把空格和換行也當做文字節點）
• 註釋節點：註釋內容
• document文件節點
• ...

元素節點
nodeType：1
nodeName：大寫標籤名（在部分瀏覽器的怪異模式下，我們寫的標籤名是小寫，它獲取的就是小寫...）
tagName：獲取當前元素的標籤名（獲取的標籤名一般都是大寫），常用這個方法
nodeValue：null

文字節點
nodeType：3
nodeName：#text
nodeValue：文字內容

註釋節點
nodeType：8
nodeName：#comment
nodeValue：註釋內容

文件節點
nodeType：9
nodeName：#document
nodeValue：null

1. childNodes : 當前元素所有的子節點
2. children : 當前元素的所有的子元素節點；
3. parentNode : 獲取當前元素的父親節點 document 是根節點，他的父親節點是null;
4. previousSibling : 上一個哥哥節點
   previousElementSibling : 上一個哥哥元素節點 （IE8以下是不相容的）
5. nextSibling : 下一個弟弟節點
   nextElementSibling : 下一個弟弟元素節點；（IE8以下是不相容的）
6. firstChild : 第一個子節點
   firstElementChild : 第一個子元素節點 （IE8以下是不相容的）
7. lastChild : 最後一個子節點
   lastElementChild : 最後一個子元素節點 （IE8以下是不相容的）

    // 獲取上一個哥哥元素節點，相容所有瀏覽器；
    function getBrother(curEle) {
        var pre = curEle.previousSibling;
        while(pre){ //如果pre存在
            if(pre.nodeType===1){
                return pre;
            }
            pre = pre.previousSibling;// pre等於哥哥節點的哥哥節點；
        }
    }
    var last= document.getElementById("last");
    console.log(getBrother(last));

//或使用函式遞迴
 function getBrother(curEle) {
        var pre = curEle.previousSibling;
        if(pre){
              if(pre.nodeType===1){
                  return pre;
               }else{
                    return getBrother(pre); 
                  } 
         }
   }