html+dom+深入,DOM 深入学习 - 1
本文章記錄本人在深入學習Javascirpt DOM中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。
DOM 版本
w3c 指定的DOM規范包括多個版本，不同的版本(或稱知為級別)又包含不同的子規法和模塊，不同瀏覽器對DOM的支持是千變萬化的。
DOM0級
在很早的時候市場上已經有了一些不同版本的DHTML規范，主要包括IE和Netscape兩個不同的版本。這組DHTML規法規定了一套文檔對象、集合、方法和屬性。雖然不同的DHTML版本的特性存在差異，但是一些基本的思路和用法還是有章可循的。
DOM1級
1998年10月，w3c 推出了DOM 1.0版本的規范。
這個規法主要是包括兩個子規范。
- DOM Core(核心部分)：把XML文檔設計為樹形節點結構，并為這種結構的運行機制定制了一套規法化標準，同時定義了創建、編輯、操作這些文檔結構的方法以及屬性。
- DOM HTML：針對HTML文檔、標簽集合、以及與個別HTML標簽相關的元素定義了對象、屬性和方法。
DOM2級
2000年1月，w3c正式發布更新后的DOM核心部分，并且在這次發布添加了一些新的規范，這次發布的DOM稱為2級規范。2003年1月，w3c又正式發布了對DOM HTML子規范的修訂，添加了針對HTML 4.01和XHTML 1.0版本文檔中的很多對象、屬性和方法。這次發布就叫做DOM2.0的推薦版本。
DOM 2.0 Core：添加了更多的特性，如針對命名空間的方法等。
DOM 2.0 HTML：針對HTML的文檔結構模型，并添加了一些屬性。
DOM 2.0 Event：規定了與鼠標相關的事件和控制機制，但是不包括鍵盤相關事件和處理部分。
DOM 2.0 Style：提供了訪問和操作所有與css相關的樣式以及規則的能力。
DOM 2.0 Traversal and DOM 2.0 Range：允許開發人員通過迭代方式訪問DOM，以便根據需要對文檔進行遍歷或者其他的操作。
DOM 2.0 Views：提供了訪問和更新文檔的表現的能力。
DOM 2.0規法已經是目前各大瀏覽器主持的主流標準。可惜對ie的支持并不完善。
DOM3級
2014年4月，w3c發布了DOM3.0版本。
DOM 3.0 Core：添加了更多新的方法和新屬性。同時也修改了已有的一些方法。
DOM 3.0 Load and Save：提供將XML文檔的內容加載到DOM文檔中和將DOM文檔序列化為XML的文檔能力。
DOM 3.0 Validation：提供了確保動態生成的文檔的有效性的能力，即如何符合文檔類型聲明。
清理 DOM 加載流程
一般瀏覽器加載順序：
1. 解析HTML結構
2. 加載外部腳本和樣式結構表
3. 解析并且執行腳本代碼
4. 構造DOM模型
5. 加載圖片等外部文件
6. 頁面加載完畢
通過上面的加載順序可以知道，網頁頭部的腳本(由外部文件加載)會在構造HTML DOM文檔之前執行，這就會導致執行腳本無法訪問文檔結構模型。
如果頁面包含許多的外部文件，如大量的圖片、視頻、音頻、動畫等文件，可能會延遲腳本的執行事件。為了避免js腳本處于長時間的等待，可以把需要執行的腳本部分放在HTML文檔的中間，這樣只要在構造DOM后執行到腳本所在的結構位置，就會執行腳本。所以一般建議把js放在頁面的底部。
謹慎訪問 DOM
訪問一個DOM元素是代價比較高的，修改元素的代價更高，因為它們經常導致瀏覽器重新計算頁面的幾何變換。在訪問或者修改元素最不好的情況下就是使用循環執行操作，特別是在HTML集合中使用循環。
for (var i = 0; i < 15000; i++) {
document.getElementById('here').innerHTML += 'a';
};
上面這段代碼的問題就是每一次循環都會去對DOM元素訪問兩次：一次是讀取innerHTML屬性能容，第二次是寫入它。更有效率的方法是使用局部賓利儲存更新后的內容，在循環結束后一次性寫入。
var text = '';
for (var i = 0; i < 15000; i++) {
text += 'a';
};
document.getElementById('here').innerHTML += text;
innerHTML 與 DOM 方法
誰的性能比較好
兩者的性能都是基本接近，不過幾乎所有的瀏覽器中，innerHTML的速度會更快一些，但是最新的基于webkit內核的瀏覽器除外。
如何選用
使用innerHTML的好處就是在早期的瀏覽器上面是顯而易見的，但在最新版本的瀏覽器上面就沒有那么的明顯。因此，采用哪種方法將取決于用戶經常使用的瀏覽器，以及個人的編碼愛好。
對于日常的大多數的操作而言，使用innerHTML和使用DOM差異并不是很大，應當根據代碼的可讀性、可維護性、團隊習慣、以及代碼風格來綜合決定采用那種風格。
警惕文檔遍歷中的空格 bug
在遍歷DOM元素時候，空格的存在很容易造成誤解，因為DOM把空格也作為一個節點進行解析(換行符也算)。
var el = document.documentElement.lastChild.firstChild.nodeName;
可以使用上面的代碼去檢測DOM的元素。
可以定義一個函數用來清除所有包括包含文本節點。這樣當執行文檔遍歷的時候，就不存在元素之間的空格影響。函數要在文檔結構加載完后在執行。
function clean(el) {
var el = el || document,
f = el.firstChild;
while (f != null) {
if (f.nodeType === 3 && /\s/.test(f.nodeValue)) {
e.removeChild(f);
} else if (f.nodeType === 1) {
arguments.callee(f);
}
f = f.nextSibling;
};
}
使用上面函數要注意到是，該函數的功能僅是臨時性的清除元素之間的空格，需要在HTML文檔的每一次加載是都重新只想你個一遍清除的操作。當然，使用這種方法雖然比較高效，但是在每次遍歷文檔之前，都需要先執行一次遍歷操作，如果文檔的結構比較復雜，那么這個操作所消耗的系統資源是不可小視的。
最后，如果文章有什么錯誤和疑問的地方，請指出。與sf各位共勉！
總結
以上是生活随笔為你收集整理的html+dom+深入,DOM 深入学习 - 1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 测试用例的书写方式及测试模板大全
- 下一篇： 数字语音信号处理学习笔记——绪论（1）