天天看點

DOM和DHTML

1. DOM的對象屬性

DOM供給了一套屬性用于導航、拜會和更新文檔内容,其中包括隻讀種類的屬性和可讀寫種類的屬性。

下表是隻讀種類的屬性:

DOM對象屬性 返 回 值

FirstChild 歸來一個對象(Object),表示第一個孩子節點(child node)。

LastChild 歸來一個對象(Object),表示最後一個孩子節點(child node)。

NextSibling 歸來一個對象(Object),表示下一個鄰接的兄弟節點。

NodeName 歸來節點對應的HTML符号。例如:P,Script。對應文本項節點,歸來#text。

nodeType 歸來節點的種類,1表示此節點是符号(tag),2表示屬性(attribute),3表示文本項。

parentNode 歸來一個對象(Object),表示目前節點的雙親節點(parent node)。

previousSibling 歸來一個對象(Object),表示前一個鄰接的兄弟節點。

specified 歸來一個布爾型變量(Boolean),表示是否設定了屬性值(attribute)。

下表是可讀寫種類的屬性:

DOM對象屬性 返 回 值

data 歸來一個字元串,表示文本項節點的值。萬一是其他種類節點,歸來undefined。

nodeValue 歸來一個字元串,表示文本項節點的值。萬一是其他種類節點,歸來null。

下表是DOM中相幹屬性聚集:

DOM對象屬性 返 回 值

attributes 表示節點的屬性聚集,穿越id來拜會,例如attributes.id。

childNodes 表示節點的孩子節點聚集,穿越數組索引措施拜會,例如:childNodes[2]。

2.   DOM和DHTML對象模型的比拟

DOM是文檔對象化模型(Document Object Model)的簡稱。利用過DHTML對象模型的開發者定然能極其熟練地壟斷HTML版面上的每個符号内容,但萬一借助DOM技巧,我們就能夠穿越更加直接而且簡易的措施到達同樣的目标。

梗概

DOM技巧被Internet Explorer 5.0及以上版本的博覽器所扶持,它準許一種極其直覺且統一的措施将HTML文檔舉行模型化處理,并借此供給拜會、導航和壟斷版面的簡易程式設計接口。穿越 DOM技巧,我們不但能夠拜會和更新版面的内容及構造,而且還能壟斷文檔的風格款式。DOM由W3C組織所提倡,這麼,大多數博覽器都将最後扶持這項技 巧。

DOM和DHTML對象模型的比拟

能夠這麼說,DOM是從DHTML對象模型進展而來的。但更準确而言,DOM更象是對DHTML對象模型舉行了大約改革的産物。

借助DHTML對象模型技巧,我們能夠獨自地拜會并更新HTML版面上的對象,每個HTML符号穿越它的ID和NAME屬性被壟斷,每個對象都具有自己的屬性、措施和事件,穿越措施壟斷對象,穿越事件引發因果過程。

DOM則要比DTHML對象模型功能更全面,它供給了一個對全副文檔的拜會模型,而不但僅再局限于單一的HTML符号(Tag)範圍内。DOM将文檔描 摹為一個樹形(Tree)構造,Tree的每個節點出現為一個HTML符号可能HTML符号内的文本項。樹形構造準确地描寫了HTML文檔中符号間以及文 本項間的互相幹聯性,這種關系性包括child(孩子)種類、parent(雙親)種類和兄弟(sibling)種類。

利用 DHTML對象模型拜會和更新HTML版面内容時,不可避免地必需查詢相幹技巧手冊。因為HTML對象許多,每個HTML對象又有許多的屬性、措施和事 件。然而準許DOM技巧拜會和更新HTML版面内容時,任何手冊都能夠放在一邊了。率先察看一下HTML源代碼,推算出版面的Tree構造模型;然後,按 照層次構造聯系壟斷必需的屬性。例如要更新版面上的文本項内容,萬一準許DTHML對象模型,必需利用到innerHTML屬性,但定然要當心并不是所有 的HTML對象都扶持innerHTML屬性;萬一準許DOM技巧,凡是修正相幹Tree節點都具有的nodeValue屬性值即可。

DOM技巧使我們能夠得體地沿着文檔的樹型構造在上、下以及一側方向做節點導航,從版面的任何地方開始,利用child、parent可能 sibling三種關系性構成的表白式代表版面的另外地方。而DTHML對象模型不包括Tree構造,因而也就不具有版面對象的互相導航功能。當我們從一 個符号對象開始時,不可能用關系表白式來表白相近的符号。固然對于某些符号,例如 <TABLE> ,DHTML對象模型能夠供給特異的屬性和措施存取相幹内容,但告終措施和收獲遠不及DOM技巧顯得統一化和直覺化。準許DTHML對象模型拜 會<TABLE> 中的單元(cell)内容時,率先要查詢手冊确定單元的坐标值i、j,然後再穿越表白式 tableObj.rows[i].cells[j].innerHTML告終拜會。但對于DOM來說,拜會TABLE每個單元的内容将變得極其容易,隻 必需發生一個節點導航表白式就能夠。

另外,DOM技巧準許我們壟斷文檔的Tree構造,這包括創立新節點(nodes)、剔除存在的 節點以及在Tree中挪動節點。切實上,這即便厲行創立新符号(tags)、剔除存在的符号以及在文檔中挪動符号的過程。DTHML對象模型則不準許改動 文檔構造,我們隻能壟斷現有的對象。

與DHTML對象模型相比拟,DOM隻有一個缺憾:DOM不能扶持事件處理,而DTHML對象模型對于文檔對象則具有一個普遍的事件處理功能目前,Example對象具有負值了!萬一getValues() 的調用者永遠也不設定歸來的Dimension對象的width 和height值,那麼僅憑測驗是不可能檢測到這類的訛謬。

轉載于: http://ecker03.blog.163.com/blog/static/188877425201162071139355/

上面的大概了解為: 通過DOM可以為這個頁面建立出 樹狀結構圖,利用DOM的方法可以迅速找到需要的節點,比如通過FirstChild等,找到這個節點後,就開始使用DHTML的東西了,DHTML個人了解為将真個頁面的所有标簽(我是這麼狹隘了解的)封裝成了一個個的對象,比如p标簽變成了p對象,a連結變成了a對象,每個對象都有自己的屬性,方法,事件,樣式,集合等資訊,在通過DOM找到了需要的DHTML節點對象後,調用這個對象所在的DHTML的方法或者事件或者增加樣式的方式來實作頁面部分标簽的文字或者樣式轉變的效果------- 這就達到了動态網頁的目的!!!

轉載于:https://blog.51cto.com/4125536/1018144