DOM (Document Object Model)文檔對象模型

【理解下DOM】

    DOM——Document Object Mode。DOM是網頁上XHTML中文檔正文標題啊、段落、列表、樣式、以及ID/class等全部其餘數據的一個內部表示。我本身的理解是將網頁內容變成代碼的形式呈現。

    DOM的主要思想是HTML上每一個元素分別對應於DOM中的一個節點。

    （最容易理解的方式是畫樹狀結構圖，這個電腦上很差操做的這裏就不展現了。）這個樹狀結構圖是怎麼出來的呢？是將網頁的XHTML結構經過瀏覽器解析，在內存中建立整個文檔節點對象document，而後從文檔中出現的第一個標記出發，按照XHTML的層次結構一個一個地加載。[當網頁被裝載到內存後，在內存中就有了一個按照XHTML結構造成的倒掛的節點對象樹狀結構。

    這個結構中，有3個節點是關鍵：文檔節點、元素節點、文本節點。這個看書就明白了。

===============================

    下面我來回憶下這章的重點部分，就是如何使用DOM訪問文檔節點和如何使用DOM建立、修改、刪除文檔節點及其屬性。（也就是那一大堆東西）
    經過瀏覽器解析後的網頁，層次結構可能很複雜，節點不少。可是咱們爲了不有些沒必要要的麻煩。咱們在訪問或對節點進行操做的時候，只牽扯到此節點的上一級/下一級。（至關於只牽扯到你的父親或兄弟）。這樣，相對而言在對每一個節點操做的時候要簡便許多。

    ↓   ↓   ↓

   【10個屬性】

    nodeName: 節點的名字

    nodue: 節點的值

    nodeType: 節點的類型

    parentNode: 父節點

    childNodes: 全部子節點的列表

    firstChild: 子節點列表中的第一個節點

    lastChild: 子節點列表中的最後一個節點

    previousSibling: 前一個兄弟節點

    nextSibling: 後一個兄弟節點

    ownerDocument: *此節點所屬的文檔 （還不明白。囧）

    innerHTML:  更輕鬆地操縱文檔。

                經過innerHTML屬性將HTML字符串賦值給一個元素。這裏就不舉例了，反正很好很強大。

                雖然這個innerHTML不是標準的DOM，可是幾乎全部的瀏覽器都支持因此咱們能夠放心用。

    經過這麼種種屬性，咱們能夠再經過下面的方法來更容易的訪問或操做相應的節點。   

   【14個方法】

    childNodes.length: 獲取子節點的數量

    hasChildNodes(): 查詢是否存在子節點

    childNodes.item(): 獲取子節點

                       由於childNodes是列表，全部item()括號裏面傳入的是數組裏的下標。

    getElementsByTagName_r(): 返回一個NodeList數組，包含全部的標記名特性

    getElementsByName(): 獲取全部name屬性等於指定值的元素。

    getElementById(): 獲取單個指定元素 （此方法是從文檔樹中最快找到指定元素的方法）

                      在XHTML中，id特性是惟一的，也就是說全部元素的id的不同的。

    createElement_x(tagname):建立標記名爲tagname的元素 

    createTextNode(text):  建立包含文本text的文本節點 

    appendChild(): 在子節點後追加元素。

                   將給定的節點添加到某個節點的chlidNodes列表尾部

    removeChild(): 移除某個節點。

                   傳的參數也就是這個要刪除的節點，而後再將這個節點做爲函數的返回值返回。

    replaceChild():替換某個節點。

    createAttribute(name): 用定義的名稱name建立特性節點（自定義節點）

    insertBefore():將新節點添加的舊節點的前面。

                   裏面有兩個參數：要添加的節點和插在哪一個節點以前。  

    cloneNode(): 克隆節點。

                 這個方法中，須要注意的是：方法帶一個boolean參數來指示在複製時 ↓

                 是包含該節點的全部子節點(深度複製) or 元素自己。

                 false 表示僅複製元素自己      true表示深度複製。 

 

一、Node對象         Element、Document對象繼承他

屬性名/方法名	做用
childNodes	返回的是一個NodeList對象，也能夠當作是一個數組，它表示調用該屬性的節點對象下的全部子節點，能夠用childNodes[]來引用數組中單獨的元素
parentNode	返回節點的父節點
nodeType	返回節點的節點類型，IE只支持數字值，FF還支持常量值。1：ELEMENT節點，2：ATTRIBUTE節點，3：TEXT節點，9：DOCUMENT節點
nodeName	返回節點的名稱，即標籤名稱
firstChild	返回第一個子節點
lastChild	返回最後一個子節點
previousSibling	返回調用該屬性的節點的前一個兄弟節點，沒有則返回null
nextSibling	返回調用該屬性的節點的後一個兄弟節點，沒有則返回null
appendChild()	向調用該方法的節點的子節點列表末尾添加節點。注意其參數是一個節點，而不是一個標籤。該方法返回的是這個新添加進去的節點,要注意的是，若是要添加的節點已是文檔的一部分的話，那麼首先會刪除文檔原先存在的節點
cloneNode()	拷貝節點。當裏面參數爲true時，那麼節點的全部子節點也會被克隆。該方法返回拷貝的節點
removeChild()	從子節點列表中刪除指定的節點，參數是要刪除的節點。成功則返回被刪除的節點，失敗則返回null
replaceChild(a,b)	將某個子節點替換爲另外一個,成功則返回被替換的節點，失敗則返回null。第一個參數爲用來替換的新節點，第二個參數爲將要被替換的節點
insertBefore(a,b)	在某個子節點前插入新的子節點，並返回新的子節點。第一個參數爲要插入的新的子節點，第二個參數指定要在哪一個子節點前插入新節點

 

2、Document對象。Document 對象是一棵文檔樹的根，可爲咱們提供對文檔數據的最初（或最頂層）的訪問入口。  HTMLDocument繼承他

屬性名/方法名	做用
getElementsByTagName()	返回指定標籤的元素節點，類型爲數組。例如 document.getElementsByTagName(「p」)
getElementById()	返回指定ID的元素節點，類型爲單個元素。例如 document.getElementById(「id」)
creatElement()	建立一個元素節點，並返回該元素節點。例如 document.creatElement(「div」)
documentElement	返回對文檔根元素的引用

 

HTMLDocument對象。DOM的Document對象放到HTML文檔中則成爲了HTMLDocument對象

屬性名/方法名	做用
getElementsByName()	返回指定name的元素節點，類型爲數組。例如 document.getElementsByName(「name」)

 

Element對象     HTMLElement對象繼承他

屬性名/方法名	做用
getElementsByTagName()	該方法與Documen對象的同名方法相似，不過該方法把查找的範圍限定在了調用該方法的元素節點內
steAttribute(a,b)	該方法用來改變或建立（當要改變的屬性沒設置時）節點元素的屬性,第一個參數爲屬性名，第二個參數爲屬性值，例如element.setAttribute(「id」,」hcp」)
getAttribute()	該方法用來獲取元素節點的屬性值，參數爲屬性名。例如 element.getAttribute(「id」)
removeAttribute()	刪除元素節點的屬性，參數爲屬性名。例如 element.removeAttribute(「id」)

 

HTMLElement對象

屬性名/方法名	做用
className	元素的class屬性
currentStyle	該屬性爲一個對象
innerHTML	該屬性可設置元素內HTML文本串，HTML代碼會被執行（該屬性非w3c標準）
innerText	該屬性可設置元素內的純文本，即便文本包含有html代碼也不會被瀏覽器執行，而是看成純文本（非w3c標準）
outerHTML	設置元素內的HTML文本串，元素自己也包括在內（非w3c標準）
outerText	設置元素內的純文本，即便文本包含有html代碼也不會被瀏覽器執行，而是看成純文本.元素自己也包括在內（非w3c標準）
offsetWidth	返回元素可見區域的寬度，不帶單位，單位爲px。可見寬度包括元素自己、padding、border。margin不屬於可見區域，若是有滾動條，沒被顯示出來的那部分也不屬於可見區域。在IE下若是元素被撐大，則會計算撐大後的可見區域寬度。總之該屬性返回的是實際的可見區域寬度。該屬性不是w3c標準，但獲得了很好的支持
offsetHeight	做用同上
clientWidth	做用性質與offsetWidth類似，不過它計算的只是元素自己+padding的值，
clientHeight	做用同上
offsetLeft	返回元素的可見區域的邊界距其父元素自己（即不考慮padding、margin、border）的邊界的左邊偏移量，若是其父元素（或更高級的父元素）沒有相對或絕對定位屬性，則會把body算做其父元素。使用此屬性時最好把父元素設成絕對或相對定位。另外，無論此元素是絕對定位仍是靜態定位都適用於該屬性
offsetTop	做用同上。沒有offsetRight、offsetBottom的說法
offsetParent	返回對最近的具備相對或絕對定位的父元素的引用。該屬性不是w3c標準，但獲得了很好的支持
scrollWidth	返回元素的自己寬度加上padding加上可滾動的寬度（若是有滾動條的話），注意，IE六、7下有滾動條的時候，padding左右兩邊的寬度都會算在內，但在IE八、FF下有滾動條的時候，只有左邊的padding纔會有做用，所以只會加上左邊padding的寬度
scrollHeight	做用同上，該屬性不是w3c標準，但獲得了很好的支持
scrollTop	至關於返回或設置已滾動區域的高度
scrollLeft	做用同上，該屬性不是w3c標準，但獲得了很好的支持

 

CSS2Properties對象，用來獲取元素樣式

     一、 element.style引用的是一個CSS2Properties對象，此時該對象只表明內聯樣式的集合，即由HTML標籤中的style屬性設置的樣式。

     二、element.currentStyle引用了一個CSS2Properties對象，不過該對象包含的是元素的最終樣式，該屬性只能用於IE瀏覽器。  該屬性爲只讀

            用法舉例： var s=element.currentStyle.fontSize

     三、 window.getComputedStyle() 或document.defaultView.getComputedStyle() 是FF等標準瀏覽器中用來獲取對象樣式的函數，該函數返回的是一個CSS2Properties對象，此對象包括了元素的最終樣式。該函數有兩個參數，第一個爲要獲取樣式的元素對象，第二個參數爲僞元素，通常設爲null.        該屬性爲只讀

          用法舉例：var s= window.getComputedStyle(element,null).fontSize 

 

DocumentFragment節點

        DocumentFragment節點是一種特殊類型的節點，它自身不出如今文檔中，只作爲連續節點集合的臨時容器，並容許將這些連續的節點做爲一個對象來操做。當把一個DocumentFragment插入文檔時（用appendChild(),insertBefore(),replaceChild()方法），插入的不是DocumentFragment,而是它裏面包含的節點

        示例：  var f=document.createDocumentFragment();  //獲取一個空的DocumentFragment對象

                  f.appendChild(element1)  //給DocumentFragment添加節點

                  f.appendChild(element2)  //給DocumentFragment添加節點

                  element3.appendChild(f)  //把element一、element2做爲一個總體插入element3

          DocumentFragment對象的好處在於能夠減小瀏覽器迴流，提升效率