先列舉常用的幾種方式:
createElement() 創(chuàng)建一個(gè)元素節(jié)點(diǎn) => 接收參數(shù)為string類型的nodename
createTextNode() 創(chuàng)建一個(gè)文本節(jié)點(diǎn) => 接收參數(shù)為string類型的text內(nèi)容
createAttribute() 創(chuàng)建一個(gè)屬性節(jié)點(diǎn) => 接收參數(shù)為string類型的屬性名稱
createComment() 創(chuàng)建一個(gè)注釋節(jié)點(diǎn) => 接收參數(shù)為string類型的注釋文本
除了這幾個(gè)低缩,還有一個(gè)常常會(huì)被我們忽略createDocumentFragment方法徽千,它是用來創(chuàng)建虛擬的節(jié)點(diǎn)對象躺盛,或者說是碎片節(jié)點(diǎn)。
createDocumentFragment
DocumentFragment節(jié)點(diǎn)不屬于節(jié)點(diǎn)樹捷绑,繼承的parentNode屬性總是null,當(dāng)我們要把DocumentFragment節(jié)點(diǎn)插入文檔樹時(shí),插入不是他本身陵珍,而是他所有的子孫節(jié)點(diǎn)。
createDocumentFragment帶來的性能優(yōu)化
當(dāng)需要添加多個(gè)dom元素時(shí)违施,如果先將這些元素添加到DocumentFragment中互纯,再統(tǒng)一將DocumentFragment添加到頁面,會(huì)減少頁面渲染dom的次數(shù)磕蒲,效率會(huì)明顯提升留潦。
還有一個(gè)很重要的特性是,如果使用appendChid方法將原dom樹中的節(jié)點(diǎn)添加到DocumentFragment中時(shí)辣往,會(huì)刪除原來的節(jié)點(diǎn)兔院。