js的DOM編程藝術的筆記（二）

1：編寫js的原則：「預留退路問題」 ； 「js代碼和html分離」 ； 「進行必要的檢查」

2： 動態建立html內容：document.write()方法 .和 innnerHTML屬性；深刻剖析DOM：createElement(), appendChild(), insertBefore()以及createTextNode()等。使用js改變文檔結構和內容。理解 【元素節點對象和文本節點以及屬性節點的關係】。其中createElement()建立元素節點；createTextNode()建立文本節點；appendChild()添加子節點；insertBefore(ndoe1,node2)【使用insertBefore的三要素:1.明確父節點；2.明確要插入的節點node1; 3:插入那個節點以前 node2】。

3：　firstChild 和lastChild 獲取到的節點也有可能會是文本節點

【<b id="child">My text <p>鐵素體</p></b> :

    var bNodeOld = document.getElementById("child");
    alert(bNodeOld.firstChild); //獲取的是 My text的文本節點

    alert(bNodeOld.firstChild.nextSibling)； //獲取到的就是<p>元素節點

】

4：DOM文檔中的每一個元素都是對象。這些對象都有着不一樣的屬性，有些屬性包含着特定元素在節點樹上的位置信息【parentNode, nextSibling, previousSibling, ChildNodes, firstChild, lastChild等屬性都是元素位置有關的】；有些屬性是元素自身的信息【nodeValue, nodeType, nodeName等屬性】；除此以外每一個元素節點對象還有一個style的屬性，style屬性包含着元素的樣式信息。【值得注意的是，元素節點的style屬性返回的也是一個對象】

5：在使用js處理DOM的時候，【空格換行符也是一個文本節點】例如childNodes 和 nextSibling 都有可能獲取到這樣的文本節點。

實例方法：

//getNextElementNode:返回第一個元素節點【只返回第一個元素節點】
function getNextElementNode(pNode){
    if(pNode.nodeType == 1){ //若是是元素節點 直接返回
        return pNode;
    }
    if(pNode.nextSibling){ //不然判斷是否有下一個節點
        return getNextElementNode(pNode.nextSibling); //繼續遞歸函數
    }
    return null;
}

//自定義的addClass方法

function addClass(element, className){     if(!element.className){ //若是元素沒有class屬性，直接將新的className賦予它        element.className = className;     }else{                                //不然該元素的className = 原來的className + " " + 新的className        element.className += " " + className;     } }