js DOM基礎總結和詳解

DOM(文檔對象模型）是針對HTML和XML文檔的一個API,描繪了一個層次化的節點樹，允許開發人員添加、刪除和修改頁面的某一部分。

HTML DOM 樹形結構如下:

1.Node方面

1.1 節點類型

確定節點類型，相容的方法是將nodeType屬性與數字值進行比較，如下所示：

if(someNode.nodeType==1){
alert("Node is an element");
}

1.2 節點關係

每一個節點都有一個childNodes屬性，其中保存著一個NodeList對象。NodeList是一種類數組對象，用於保存一組有序的節點，可以通過位置來訪問這些節點。

1.3 節點操作

註意事項

a. 註意appendChild的用法：

1.添加功能:像childNodes列表的末尾添加一個節點，添加節點後，childNodes的新增節點，父節點以及以前的最後一個子節點的關係指針都會得到相應更新。

var returnedNode=someNode.appendChild(newNode);
alert(returnedNode==newNode)//true

2.移位功能:如果傳入到appendChild（）中的節點已經是文檔的一部分，那麼結果就是將該節點從原來的位置轉移到新的位置。

var returnedNode=someNode.appendChild(someNode.firstChild);
alert(returnedNode==someNode.firstChild)//false
alert(returnedNode==someNode.lastChild)//true

3.與insertBefore區別:後者是把節點放在childNodes某個特定的位置上，而不是放在末尾，該方法有兩個參數：要插入的節點和作為參照點的節點。

//輸入後成為最後一個子節點
var returnedNode=someNode.insertBefore(newNode,null);
alert(returnedNode==someNode.lastChild)//true

//輸入後成為第一個子節點
var returnedNode=someNode.insertBefore(newNode,firstChild);
alert(returnedNode==someNode.firstChild)//true

b. 註意replaceChlid用法

前面的appendChild和insertBefore都是插入節點，不會移除節點。而replace方法接受2個參數：要插入的節點和要替換的節點，要替換的節點將會從文檔中被移除，同時由要插入的節點占據其位置。從技術上講：被替換的節點還在文檔中，但是沒有位置。

c. 註意cloneChild用法

cloneChild方法接受一個布爾值參數，表示是否執行深複製。

• true：深複製，複製節點及其整個子節點樹。
• false：淺複製，只複製節點本身。、

二、Document類型

Document類型可以表示HTML頁面或者其他基於xml的文檔。作為HTMLDocument的一個實例，document對象還有一些標準的Document對象所沒有的屬性，例如和網頁請求有關的3個屬性是：URL，domain，referrer，應用最多的是在查找元素方面：

三、Element類型

該類型提供了對元素標簽名，子節點及特性的訪問。所有的HTML元素都是由HTMLElement類型表示，HTMLElement類型直接繼承自element並添加了一些屬性：id,title,lang,dir,className.

註意事項

1.對id或lang的修改對用戶而言是透明不可見的（假設沒有基於透明的值設置的css樣式）
2.title的修改只會體現在滑鼠移動到這個元素上時會顯示出來。
3.對dir的修改只會體現在屬性被重寫的那一刻，立刻影響頁面中文本的左右對齊方式。
4.修改className時，如果新類型關聯了與此前不同的css樣式，那麼就會立刻應用新的樣式。

四、Attr類型

五、Text類型

六、DOM擴展

1.Selectors API擴展：querySelector()方法和querySelectorAll()方法
註意事項
querySelector只返回匹配的第一個元素，如果沒有匹配項，返回null。

querySelectorAll返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節點數組)。 並且返回的結果是靜態的，之後對document結構的改變不會影響到之前取到的結果。
目前IE8+，ff，chrome都支持此api（IE8中的selector string只支持css2.1的）。

關於兩者的詳細區別，我前面看過一篇博客：http://www.cnblogs.com/QingFlye/p/4006484.html

2.HTML5擴展：新增getElementByClassName方法

總結

DOM操作往往是JavaScript程式中開銷最大的部分，訪問nodeList導致的問題最多。NodeList對象都是動態的，意味著每次訪問該對象，都會進行一次查詢，有鑒於此，最好的辦法是：減少DOM操作。
關於前端性能優化問題，比較耳熟能詳的是Yahoo14條軍規與前端性能優化:http://www.cnblogs.com/QingFlye/p/3891980.html
關於DOM相容性問題，前面也看過別人的一篇博客（http://www.cnblogs.com/QingFlye/p/4302099.html）
在知乎里也看過：http://www.zhihu.com/question/29072028/answer/43095799