JavaScript高階程式設計學習10_DOM
阿新 • • 發佈:2018-12-17
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():處理文件樹中的文字節點。