DOM的相關概念

【前面的話】DOM全稱是Document Object Model，即文檔對象模型。我們常說的html文檔其實就是一個DOM樹，DOM操作就是在記憶體中找到DOM樹上我們想要的DOM對象，對它的屬性進行修改，然後渲染引擎會把修改的結果重新繪製在界面上。DOM裡面涵蓋的知識點還是很多的，尤其是到後來要相容瀏覽器的時候是很繞的，這次先講一些DOM的相關概念，等聊完BOM之後，我會再針對相容瀏覽器這塊做個小總結。

1、節點的屬性：

① nodeType

//節點
//nodeType  1-元素節點 ， 2-屬性節點 ，  3-文本節點

② nodeName

// nodeName 如果是標簽則返回的是標簽的名稱；如果是文本則返回的是#text；如果是屬性節點則返回屬性的名稱

③ nodeValue

// nodeValue 如果是標簽則始終返回null ； 如果是文本節點則返迴文本的內容 ；  如果是屬性節點則返回屬性的值

④節點的複製

    element.cloneNode();    // 克隆一個新的DOM對象；參數為Boolean類型，true賦值子節點，false不複製子節點
    element.appendChild();  // 追加元素

2、自定義屬性：

1 element.className = " ";     //僅刪除class類的值，保留類名
2 element.removeAttribute("class")   //完全刪除這個類

1 // 獲取屬性節點
2     var attrNode = box.getAttributeNode（"id"）；
3     console.log(attrNode.nodeType);   //屬性節點的nodeType   2
4     console.log(attrNode.nodeName);   //屬性節點的nodeName 屬性的名稱
5     console.log(attrNode.nodeValue);   //屬性節點的nodeValue 屬性的值
6         
7  // 設置屬性  setAttribute
8         
9  //  移除屬性  removeAttribute

3、層次結構

1 childNodes  所有的子節點——DOM標準的方法，除了獲取子標簽以外，還會獲取文本節點；IE8以前會忽略空白節點
2 children  所有的子元素——非標準的DOM方法，但是幾乎所有的瀏覽器都支持，只會獲取元素節點

1  element.nextSibling 下一個兄弟節點，可能是非元素節點，會獲取到文本節點
2  element.nextElementSibling 獲取下一個緊鄰的兄弟元素，會忽略空白   // IE8以前不支持此屬性
3         
4  element.previousSibling  上一個兄弟節點，可能是非元素節點，會獲取到文本節點
5  element.previousSibling 獲取上一個緊鄰的兄弟元素，會忽略空白  // IE8以前不支持此屬性

1  previousElementSibling 上一個兄弟節點
2  nextElementSibling  下一個兄弟節點