更新html技術比較

標籤：簡單的   初始化   使用者   應該   如何   載入   strong   初學   dom   

document.write()

document對象的write方法可以很簡單的向頁面的原始碼中新增內容，不過不推薦使用。

優點：可以快速簡單的讓初學者理解如何向頁面新增內容；

缺點：

• 只有頁面初始化載入時有效
• 如果在頁面載入完之後使用該方法，則會碰到：

1. 整個頁面都被覆蓋
2. 不是向頁面新增內容
3. 建立了一個新頁面

• 在嚴格驗證XHTML中可能會遇到問題

element.innerHTML()

innerHTML 屬性允許以字串的方式，擷取/更新任何元素中的整個內容。

優點：

• 和DOM操作相比，可以使用更小代碼添加大量新標籤
• 向頁面中添加大量新元素時，速度比DOM操作更快
• 當需要移除元素中的所有內容時，它更簡單。

缺點：

• 不應該用來添加來自使用者輸入的內容，可能會帶來安全隱患
• 在添加一個很大的DOM片段時，這個方法很難區分出每一個元素
• 事件處理常式可能不像預期那樣生效

DOM操作

DOM操作提供了一組方法和屬性，用來訪問、建立以及更新元素和文本節點。

優點：

• 如果DOM片段擁有大量的兄弟節點，處理其中一個元素節點時使用這種方法更合適
• 不會影響事件處理常式
• 可以輕易的使用指令碼來逐步添加元素

缺點：

• 如果對頁面內容進行大量修改，其速度比innerHTML 屬性更慢
• 與使用innerHTML相比，它需要更多的代碼來實現同樣的功能

更新html技術比較