JS中的DOM知識概覽

1 Node類型

除IE外全部瀏覽器均可以訪問這個類型（由於IE中的DOM對象都是以COM對象的形式實現的），並且js中的全部節點類型都繼承自Node類型。

1.1 nodeName/nodeValue/nodeType

1.2 節點關係

• childNodes 返回結果是Nodelist類型，不是數組。

  Nodelist是基於DOM結構動態查詢的結果，DOM的變化能自動反映在查詢結果中。可經過方括號進行訪問，也可用item(i)進行訪問。
  
     可經過Array。prototype.slice.call(nodelist,0) 將Nodelist類型轉化成數組，也能夠經過遍歷Nodelist將其轉化成數組。

• firstChild/lastChild

• nextSibling/previousSibling

• parentNode

• ownerDocument

  ownerDocument：全部節點都有的屬性，指向表示整個文檔的文檔節點，任何節點都不能同時存在於多個文檔中。經過這個屬性能夠直接訪問文檔節點，而沒必要層層回溯。

1.3 操做節點

• appendChild()

• insertBefore()

• replaceChild()

• removeChild()

1.4 新建／拷貝節點

拷貝：cloneNode()

當參數爲true時，執行深拷貝，會將該節點的子節點也拷貝。可是這個函數不會複製添加到節點中的js屬性，例如時間處理程序，這個只複製特性、子節點（指定true時）。（IE瀏覽器中另說）

1.5 查找元素(document./element.)

• getElementById()

  注意IE7及較低版本瀏覽器的怪癖：會返回name值爲指定‘ID’的input元素。

• getElementsByTagName()

  返回的是HTMLCollection對象，是一個動態集合。

• getElementsByName()

2 Document類型

document對象是HTMLDocument類型的一個實例，HTMLDocument繼承自Document。而且，document對象是window對象的一個屬性。

2.1 文檔的子節點

• documentElement屬性直接指向html元素

• body屬性，指向body元素

• doctype屬性，指向文檔聲明標籤

2.2 文檔信息

• title

• domain

  不一樣子域的頁面沒法經過js通訊，設爲相同就可互相訪問對方的js對象了。
     域名屬性剛開始是鬆散的不能將它再設置爲緊繃的。

• URL

2.4 特殊集合

• document.images 全部image元素

• document.links 全部有href的a元素

• document.anchors 全部帶name特性的a元素

1.5 新建元素

• createElement()

• createTextNode()

• createDocumentFragment()

• createAttribute()

2.6 DOM 一致性檢測

document.implementation.hasFeature()

通常不要相信這個的檢測結果，由於能夠自行修改結果。

2.7 文檔寫入

document.write()
document.writeln()

若是在文檔加載完畢後寫入會重寫整個頁面。

document.open()
document.close()

若是是在頁面加載期間寫入，則不須要用到這兩個方法。

3 Element類型

全部的元素都是經過HTMLElementle類型或其自類型表示的，HTMLElement類型繼承自Element類型。

• getAttribute()

• setAttribute()

• removeAttribute()

  任何元素的全部特性，也均可以經過DOM元素的自己的屬性來訪問。
     只有公認的（不是自定義的）特性纔會以屬性的形式添加到DOM對象中。
     有些特性經過屬性訪問和getAttribute（）訪問的結果可能不一樣，例如style特性和事件處理程序
     給元素添加自定義屬性，該屬性不會變成特性
     
     總而言之就是：自定義的特性不能經過屬性的方式訪問，自定義的屬性不能經過getAttribute訪問（應該是這樣）。

• attributes屬性

  通常用來遍歷特性時使用（element.attributes.length）

• 繼承Node類型的childNodes等屬性和建立，查找，添加刪除子節點等方法。

4 Text類型

可經過nodeValue或data屬性訪問Text節點中包含的文本。

操做文本節點中的文本：

appendData（）
deleteData（）
replaceData（）
insertData（）
splitText（）

當兩個文本節點相鄰時，可經過normalize()將其變成一個文本節點。normalize()是從node類型繼承的函數

分割文本節點
textnode.splitText(5) 返回一個新文本節點，且該節點與原節點的parentNode相同

5 comment類型（註釋）

6 DocumentFragment

在文檔中沒有標記。

文檔片斷永遠不會成爲文檔的一部分。當經過appendchild將文檔片斷添加到文檔中時，只是將文檔片斷的子節點添加到文檔中，文檔片斷將會刪除這些子節點。

當須要添加多個子節點時，若是一個一個添加，那麼將會致使瀏覽器的反覆渲染，這時能夠將這些子節點添加到文檔片斷中，而後再添加到文檔中。

7 動態添加腳本

7.1 動態添加腳本
7.2 動態添加樣式
7.3 操做表格
7.4 NodeList

最好將length的值保存在一個變量中，由於length的值是動態的。
    訪問NodeList至關於一次基於文檔的查詢，因此要少訪問NodeList，或將其存在緩存中。