什麼DOM模型

文件物件模型：

在web上把頁面的html表現看作乙個有樹型結構的物件模型，可以通過一些操作介面來對document的每乙個子物件節點進行訪問和操作，這就為ajax在不重新整理頁面的情況下改變頁面顯示資料成為了可能。

html標記都被認為是乙個物件，例如：div物件，table物件等等。dom模型就規定了這些物件所具有的屬性、方法和事件。通過這些性質，可以對乙個已經顯示於瀏覽器的頁面進行內容的修改，例如增加節點、修改節點位置，刪除節點等等。

document.getelementbyid()方法直接引用節點，這個是我們在實際應用中最常用的一種方法，在html文件中每乙個元素節點都可以定義乙個唯一的id屬性，然後使用getelementbyid方法就可以準確地得到對這個節點的引用。

html文件中每乙個元素節點都有innerhtml這個屬性，我們通過對這個屬性的訪問可以獲取或者設定這個元素節點標籤內的html內容.(需要注意的是，我們如果對單標記標籤，如

此外document物件還有乙個類似的方法getelementbyname，我們可以通過form標籤的name屬性對表單元素節點進行引用，但返回的通常是乙個陣列，因為表單中的節點name屬性的值不是唯一的，可以通過索引器得到每乙個元素的引用。

·document.getelementbytagname()

可以得到乙個指定標記名稱節點引用的陣列集合，可以通過索引器對每個節點的引用進行訪問。

[color=orange]

節點1節點2

[/color]

這個方法通常在要對整個文件的某一類元素節點進行操作時用到，比如說為全部的新增乙個滑鼠掠過時發生位移的效果，這時就可以通過這個方法對文件所有的節點進行引用。

·parentnode和childnodes，可以通過訪問這兩個屬性獲得當前節點的父節點和子節點集合的引用。

[color=orange]

節點1節點2

[/color]

2．文件元素節點的操作

得到乙個文件元素節點的引用之後，就可以對這個節點進行一些控制和操作，以達到對html顯示進行更新的目的。

（1） dom標準操作，在dom模型中定義了一套能夠對文件結構進行更新的方法，我們可以通過這些方法建立文件節點，並將節點新增到文件中或者從文件中刪除。

·document.createelement(elmname) 根據標記名稱建立乙個節點。

·document.createtextnode(text) 根據一段文字建立乙個文字節點。

·node.insertbefor(newnode,oldnode) 將節點插入到指定節點之前，newnode為新節點，oldnode為指定的節點，此節點必須為node的已經存在的乙個子節點。

·node.replace(newnode,oldnode) 用新節點取代乙個舊節點，與上面方法類似，oldnode必須為node的乙個已近存在的子節點。

·node.clonenode(clonechild) 複製乙個節點，引數clonechild是乙個布林值，表示是否複製子節點。

·node.removechild(childnode) 刪除乙個子節點，需要注意的是該方法將返回被刪除節點的引用。

var _div1 = document.getelementbyid("div1");//獲取div1節點

var _sp3 = document.createelement("span");//建立乙個元素節點_sp3.id="span3";//將新節點的屬性id設為"span3"

var _sp4 = _sp3.clonenode(true);//將元素節點複製

_sp4.id="span4";//為新複製的節點設定id屬性

var _txt2 = document.createtextnode("節點4");//新建乙個文字節點_sp4.replacechild(_txt2,_sp4.childnodes[0]);//將節點_sp4的文字節點替換_sp3.parentnode.insertbefore(_sp4,_sp3);//將節點_sp4新增到節點_sp3之前//此時介面顯示節點1 節點2 節點4 節點3

_sp4.parentnode.removechild(_sp4);//刪除節點_sp4

（2）table的操作

·tab.insertrow(idx) 在**指定索引位置新增一行空行，idx為索引位置。

·tab.deleterow(idx) 在**指定索引位置刪除一行。

·row.insertcell(idx) 在行的指定索引位置新增乙個空單元格。

·row.deletecell(idx) 在行的指定位置刪除乙個單元格。

可以通過document.createelement(「table」)建立乙個**，通過索引器可以訪問talbe的各個行和單元格，如tab.rows[1].cells[3]，這樣我們就能得到**的第二行第四列的引用，我們可以向操作普通節點一樣來對這個單元格物件進行操作。

[color=red] var tab = document.getelementbyid("tab");//得到對**的引用

var row2 = tab.insertrow(2);//新增第三行

var cell20 = row2.insertcell(0);//為第三行新增第乙個單元格cell20.innerhtml = "20";//

var cell21 = row2.insertcell(1);//為第三行新增第二個單元格cell21.innerhtml = "21";

tab.rows[1].deletecell(1);//刪除第二行第二列

tab.deleterow(1);//刪除第二行[/color]

3）innerhtml 的靈活使用

[color=darkred]var _div1 = document.getelementbyid("div1");//得到父節點

var _sp1 = document.createelement("span");//建立span節點sp1.id="span1";

這樣寫我們通過六行**完成了功能的實現，下面來看使用innerhtml的情況：

[color=darkred]var _div2 = document.getelementbyid("div2");

_div2.innerhtml = "節點2";[/color]

可見使用innerhtml屬性，可以更為方便高效地改變文件結構，這使得在大多數情況下都使用innerhtml來操作文件，但是標準的dom方法在特定的環境下也有不可取代的作用，在編碼時要靈活判斷，選擇合適的方法解決問題。

什麼DOM模型

Dom物件模型

dom事件模型級別

DOM 文件物件模型

什麼DOM模型

Dom物件模型

dom事件模型級別

DOM 文件物件模型

相關推薦