js—— DOM中的node類型（二）

DOM中的node類型

DOM1中定義了一個Node接口，這個接口在js中做爲Node類型實現，除IE外，其餘瀏覽器均可以訪問到這個類型。Js中因此節點類型都繼承自Node類型，節點類型都享有共同的·基本屬性和方法。

每一個節點都有nodeType屬性，代表節點類型，由12個常量表示，任何節點必居其一。

Node.ELEMENT_NODE   1   元素節點
Node.ATTRIBUTE_NODE   2  屬性節點
Node.TEXT_NODE   3  文本節點
......

經常使用的爲以上三種，還有其餘類型可去查閱相關資料

肯定節點類型的方法：

//IE中無效
if(someNode.nodeType==Node.ELEMENT_NODE){
    alert("element");
}

//或（因爲IE沒有公開Node類型的構造函數，上面的方法會致使錯誤，因此爲了保證兼容性，仍是用數值比較的方法）
if(someNode.nodeType==1){
    alert("element");
}

• nodeName和nodeValue屬性

  //先檢測節點類型
  if(someNode,nodeType==1){
      value=someNode.nodeNmae;
  }

  對於元素節點

  • nodeName：它的值是元素的標籤名
  • nodeValue: 它的值始終是null

• 節點關係

  節點間的關係通常採用家族關係來描述。好比HTML中有父元素，子元素關係。

  1.每一個節點都有childNodes屬性，保存着NodeList對象,一種保存着有序節點的類數組對象

  • //訪問NodeList對象方法
    var firstChild=someNode.childNodes[0];
    var secondChild=someNode.childNodes.item(1);
    var count=someNode.childNodes.lenth;

  • NodeList是DOM結構動態執行查詢的結果。

  • 將NodeList轉爲數組

    //IE中無效
    var arrayOfNode=Array.prototype.slice.call(someNode.childNodes,0);
    
    //全部瀏覽器均可運行
    function convertToArray(nodes){
        var array=null;
        try{
            arrayOfNode=Array.prototype.slice.call(nodes,0);
        }catch(err){//報錯就手動添加
            array=new Array();
            for(var i=0,len=nodes.length;i<len;i++){
                array.push(node[i]);
            }
        }
    }

  2.每一個節點還有：

  • parentNode屬性：指向父節點。父節點的firstChild和lastChild指向第一個和最後一個子節點；只有一個子節點時這兩屬性指向同一個節點，沒有子節點時，兩個屬性爲null
  • nextSibling屬性：同一列表中下一個節點，最後一個節點的nextSibling爲null
  • previousSibling屬性：同一列表中上一個節點，第一個一個節點的previousSibling爲null

3.全部節點的ownerDocument屬性：指向表示整個文檔的文檔節點

• 操做節點

  1. appendChild() ： 向節點的childNodes列表末尾添加一個節點

  • 添加新節點：

    someNode.appendChild(newNode);

  • 移動節點到最後一位

    someNode.appendChild(someNode.firstChild);//將第一個子節點移動到最後一位

  1. insertBefore() : 插入節點，接收兩個參數：第一個是要插入的節點，第二個是位置參照節點。被插入的節點會做爲參照節點的前一個同胞節點被返回。

     //插入後成爲最後一個節點
     someNode.insertBefore(newNode,null);
     
     //插入成爲第一個節點
     someNode.insertBefore(newNode,someNode.firstChild);

  2. replaceChild(): 替換節點。接收兩個參數：要傳入的節點和要替換的節點。

  3. removeChild()：移除節點。接收一個參數：要移除的節點。

• 其餘方法

  1. cloneNode(): 建立調用這個方法的節點的一個徹底相同的副本。接收一個布爾值參數：是否執行深複製，深複製會複製整個子節點數（true)，淺複製只複製自己。
  2. normalize(): 處理文檔樹中的文本節點。有時候會出現文本節點不包含文本或者接連出現兩個文本節點的狀況。在某個節點上調用這個節點，可查找上述的兩種狀況，若是找到了空節點就刪除它，若是找到接連的兩個節點就合併。

上一節---->[js——DOM層次節點（一）]