你對Javascript DOM技術的是否了解,這裡我們討論的是javascript中或者說xhtml（html）對DOM的實現,希望對你的學習有所幫助.
Javascript之DOM技術
首先需要理解的一點是,DOM是針對XML的基於樹的API,它的實現有很多（各語言基本都有自己的實現）,我們討論的是javascript中或者說xhtml（html）對DOM的實現.
一、使用DOM
考慮一個html文件：
<html> <head><title>測試</title></head> <body> <p>測試</p> </body> </html> 1.訪問節點：
訪問html元素：varoHtml=document.documentElement;
獲取head元素：varoHead=oHtml.firstChild;
獲取body元素：varoBody=oHtml.lastChild;或者varoBody=document.body;
也可以通過childNodes來做同樣的工作：
varoHead=oHtml.childNodes[0]或者oHtml.childNodes.item（0）；
varoBody=oHtml.childNodes[1]或者oHtml.childNodes.item（1）；
判斷節點間關係：
alert（oHead.parentNode==oHtml）； alert（oBody.previousSibling==oHead）； alert（oHead.nextSibling==oBody）； alert（oHead.ownerDocument==document）； 2.檢測節點類型：
通過節點的nodeType屬性來檢驗節點類型：
alert（document.nodeType）；//輸出9
需要注意的是,DOM兼容的瀏覽器（以FF2.0為例）,擁有Node.DOCUMENT_NODE、Node.ELEMENT_NODE等常量.各常量名稱與數值對照表如下：
ELEMENT_NODE1 ATTRIBUTE_NODE2 TEXT_NODE3 CDATA_SECTION_NODE4 ENTITY_REFERENCE_NODE5 ENTITY_NODE6 PROCESSING_INSTRCTION_NODE7 COMMENT_NODE8 DOCUMENT_NODE9 DOCUMENT_TYPE_NODE10 DOCUMENT_FRAGMENT_NODE11 NOTATION_NODE12 IE6不支持,不過你可以自定義一個JS對象Node.
3.處理特性
處理特性可以使用標準的NameNodeMap中的方法：
getNamedItem（name）removeNamedItem（name） setNamedItem（node）item（pos） 比如：<pid="test">測試</p>
假設變數oP是上面的p節點的引用,我們要訪問oP的id屬性：
varsId=oP.attributes.getNamedItem（"id"）.nodeValue;
這些方法用起來很累贅,
DOM又定義了三個方法來簡化：
getAttribute（name）——返回名稱為name的屬性的值
setAttribute（name,value）——顧名思義
removeAttribute（name）——顧名思義
上面的例子可以改寫為：
varsId=oP.getAttribute（"name"）；
4.訪問指定節點：
熟知的getElementByTagName（name）,getElementByName（name）,getElementById（id）三個方法,不再展開.
5.創建和操作節點：
（1）創建新節點,一張IE（6.0）和FF對DOMLevel1的創建新節點方法支持的對照表：
方法IEFF
createAttribute（name）YY createCDATASection（text）NY createComment（text）YY createDocumentFragment（）YY createElement（tagName）YY createEntityReference（name）NY createProcessingInstruction（ target,data）NY createTextNode（text）YY 下面介紹常用的幾個方法
（2）createElement（）,createTextNode（）,appendChild（）
例子：
<html> <head> <title>createElement（）Example</title> <scripttypescripttype="text/javascript"> functioncreateMessage（）{ varoP=document.createElement（"p"）； varoText=document.createTextNode（"HelloWorld!"）； oP.appendChild（oText）； document.body.appendChild（oP）； } </script> </head> <bodyonloadbodyonload="createMessage（）"> </body> </html> 在頁面載入后,創建節點oP,並創建一個文本節點oText,oText通過appendChild方法附加在oP節點上,為了實際顯示出來,將oP節點通過appendChild方法附加在body節點上.此例子將顯示HelloWorld!
（3）removeChild（）,replaceChild（）和insertBefore（）
從方法名稱就知道是幹什麼的：刪除節點,替換節點,插入節點.需要注意的是replaceChild和insertBefore兩個參數都是新節點在前,舊節點在後.
（4）createDocumentFragment（）
此方法主要是為了解決大量添加節點時,速度過慢.通過創建一個文檔碎片節點,將要添加的新節點附加在此碎片節點上,然後再將文檔碎片節點append到body上面,替代多次append到body節點.
例子：
<html> <head> <title>insertBefore（）Example</title> <scripttypescripttype="text/javascript"> functionaddMessages（）{ vararrText=["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"]; varoFragment=document.createDocumentFragment（）； for（vari=0;i<arrText.length;i ）{ varoP=document.createElement（"p"）； varoText=document.createTextNode（arrText[i]）； oP.appendChild（oText）； oFragment.appendChild（oP）； } document.body.appendChild（oFragment）； } </script> </head> <bodyonloadbodyonload="addMessages（）"> </body> </html>
二、HTMLDOM的特徵功能
HTMLDOM的特性和方法不是標準的DOM實現,是專門針對HTML同時也讓一些DOM操作變的更加簡便.
1.讓特性像屬性一樣
訪問某元素的特性需要用到getAttribute（name）方法,HTMLDOM擴展,可以直接使用同樣名稱的屬性來獲取和設置這些值：
比如<imgsrc="test.jpg"/>
假設oImg是此元素的引用
（oImg.getAttribute（"src"）可以直接寫成：oImg.src,設置值簡化為：
oImg.src="test2.gif";
唯一特殊的class屬性,
class是ECMAScript的保留字,
替代的屬性名是className.
2.table的系列方法：
為了簡化創建表格,HTMLDOM提供了一系列的表格方法,常用幾個：
cells——返回</tr>元素中的所有單元格
rows——表格中所有行的集合
insertRow（position）——在rows集合中指定位置插入新行
deleteRow（position）——與insertRow相反
insertCell（position）——在cells集合的指定位置插入一個新的單元格
deleteCell（position）——與insertCell相反
三.遍歷DOM
DOM的遍歷是DOMLevel2中提出的標準,IE6沒有實現,Mozilla和Safari已經實現,最新IE7不清楚是否實現.
