1. 程式人生 > >JavaScript高階程式設計學習10_DOM

JavaScript高階程式設計學習10_DOM

1、node型別

DOM1級定義了一個Node介面,javascript中得所有節點都繼承Node型別,因此所有節點都共享著相同的屬性和方法。每個節點都有一個nodeType屬性,用於表明節點的型別。它由下列12個數值常量表示,任何節點型別必居其一:

Node.ELEMENT_NODE(1);
Node.ATTRIBUTE_NODE(2);
Node.TEXT_NODE(3);
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9);
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);

確定節點型別,最好比較數值:

if(someNode.nodeType == 1){
  alert('Node is an element');
  value = someNode.nodeName;//nodeName是元素的標籤名,對於元素節點,nodeName始終儲存標籤名,nodeValue始終為空
}

(1)節點關係

childNodes屬性:儲存著NodeList物件,用於儲存一組有序的節點,可通過陣列的方式訪問節點,注意(它並不是Array的例項),獨特之處在於它是基於DOM結構動態執行查詢的結果;

parentNodes屬性:該屬性指向文件樹的父節點;

previousSibling屬性和nextSibling屬性:指向當前節點的同胞節點的上一個和下一個。

(2)操作節點

appendChild():用於向childNodes列表的末尾新增一個節點,返回新增的節點;

insertBefore():向指定的位置新增節點。接受兩個引數:要插入的節點和作為參照的節點,如果參照點為null,則與appendChild()執行相同操作,如下:

returnNode = someNode.insertBefore(newNode,null);//插入後成為最後一個子節點
returnNode = someNode.insertBefore(newNode,someNode.firstNode);//插入後成為第一個子節點
returnNode = someNode.insertBefore(newNode,someNode.laseChild);//插入後成為倒數第二個子節點

replaceChild():替換節點。接受兩個引數:要插入的節點和要替換的節點。

removeChild():移除節點。接受一個引數:要移除de的節點,注意(通過removeChild()移除的節點仍為文件所有,只不過在文件中已經沒有了自己的位置)

(3)其他方法

cloneNode():接受一個bool值,表示是否深複製,也就是是否複製整個子節點樹還是隻複製節點本身。

normalize():處理文件樹中的文字節點。