先列舉常用的幾種方式:
createElement() 創建一個元素節點 => 接收參數為string類型的nodename
createTextNode() 創建一個文本節點 => 接收參數為string類型的text內容
createAttribute() 創建一個屬性節點 => 接收參數為string類型的屬性名稱
createComment() 創建一個注釋節點 => 接收參數為string類型的注釋文本
除了這幾個,還有一個常常會被我們忽略createDocumentFragment方法,它是用來創建虛擬的節點對象,或者說是碎片節點。
createDocumentFragment
DocumentFragment節點不屬于節點樹,繼承的parentNode屬性總是null,當我們要把DocumentFragment節點插入文檔樹時,插入不是他本身,而是他所有的子孫節點。
createDocumentFragment帶來的性能優化
當需要添加多個dom元素時,如果先將這些元素添加到DocumentFragment中,再統一將DocumentFragment添加到頁面,會減少頁面渲染dom的次數,效率會明顯提升。
還有一個很重要的特性是,如果使用appendChid方法將原dom樹中的節點添加到DocumentFragment中時,會刪除原來的節點。