Javascript進階程式設計讀書筆記（第10章 DOM）

標籤：

第10章 DOM

10.1  節點層次

　　 每個節點都有一個nodeType屬性，用於表明節點的類型。任何節點類型必是下面中的一個：

• • 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);

 

　　每個節點都有childNoes屬性，儲存著一個NodeList對象。NodeList是一種類數組對象，用於儲存一個組有序的節點。

　　每個節點都有一個parentNode屬性，該屬性指向文檔樹中的父節點。

　　childNodes中的每個節點之間都是同胞節點。通過使用previousSibling和nextSibling屬性可以訪問。列表中的第一個節點的previousSibling和最後一個節點的nextSibling都為null。

　　父節點的firstChild和lastChild屬性分別指向childNodes中的第一個和最後一個節點。

　　owneDocument表示整個文檔的文檔節點。

　　appendChild用於向childNodes列表的末尾添加一個節點，並返回新增的節點。

　　insertBefore()方法接受兩個參數：要插入的節點和作為參照的節點。如果參照點是null，則insertBefore()和appendChild()執行相同的操作。返回新插入的節點。

　　replaceChild()方法接受兩個參數：要插入的節點和要替換的節點，返回要替換的節點。

　　removeChild()移除節點，接受一個參數：要移除的節點。返回被移除的節點。

　　cloneNode()使用者建立調用這個方法的節點的一個完全相同的副本。該方法接受一個布爾值參數，如果為true表示執行深複製，表示複製節點機器整個子節點樹。沒有父節點，相當於一個孤兒

　　document節點具有下列特徵：

• nodeType的值為9
• nodeName的值為“#document”
• nodeValue的值為null
• parentNode的值為null
• ownerDocument的值為null

　　document.documentElemenet即為HTML元素

　　document.body即為body元素

　　getElementById()  getElementByTagName();

　　Text類型的節點具有以下特徵：

• nodeType的值為3
• nodeName的值為“#text”
• nodeValue的值為節點所包含的文本
• parentNode是一個element
• 沒有子節點，不支援

　　Comment類型

　　　　Comment節點具有下列特徵：

• nodeType的值為8
• nodeName的值為“#comment”
• nodeValue的值是注釋的內容；
• parentNode可能是Document或Element
• 不支援子節點

　　　　可以使用document.createComment()並為其傳遞注釋文本也可以建立注釋節點。

Javascript進階程式設計讀書筆記（第10章 DOM）