ajax完全自學(xué)手冊源碼第4章

1、第 4 章 DOM 基礎(chǔ)及高級DOM 技術(shù)面的章節(jié)中，簡要講解了 Ajax 技術(shù)原理以及技術(shù)體系，Ajax 技術(shù)是一種前臺技術(shù)，良好的 JavaScript 基礎(chǔ)是進行Ajax 技術(shù)開發(fā)的關(guān)鍵。在本章及后續(xù)幾章里，將要學(xué)習(xí) JavaScript 高級應(yīng)用部分，為后續(xù)的Ajax 開發(fā)課程打下良好的基礎(chǔ)。在本章中將要學(xué)習(xí) JavaScript 中，最重要的對象 DOM，DOM對象可以使開發(fā)者將 HTML 頁面作為 XML（可擴展標(biāo)記語言）文檔處理和查看。由于 XML 具有跨語言、跨的特征，DOM 對象在Ajax 技術(shù)中得到了廣泛的使用。4.1DOM 對象在本節(jié)中將要學(xué)習(xí) DOM 對象的基礎(chǔ)知識，如

2、層次結(jié)構(gòu)、特定的 DOM 對象等基礎(chǔ)知識。讀者可以通過本節(jié)對DOM 對象的學(xué)習(xí)有一個基本的概念。4.1.1XML-無限數(shù)據(jù)傳輸講解 DOM 對象就不得不提到XML，盡管在某種意義上 DOM 對象很大程度上受到DHTML 的影響，但是 W3C 還是將DOM 對象首先應(yīng)用于 XML。XML 是由早期的 SGML（標(biāo)準(zhǔn)通用標(biāo)記語言）派生出來的，SGML 還派生出了 HTML。SGML 是1986 發(fā)布的信息管理國際標(biāo)準(zhǔn)（ISO 8879）。SGML 主要用于定義獨立于的文檔格式和索引、信息。SGML 為用戶提供了一種類似語法的機制，用于定義文檔的結(jié)構(gòu)和指示文檔的。由一個在”之間的文本組成，如。起始表

3、示一個文檔區(qū)域起始處如。結(jié)束表示一個文檔區(qū)域的結(jié)束，如。結(jié)束由”著文本。注意結(jié)中定于特束中的文本必須與起始一致，即起始必須和結(jié)束配對。SGML 還允許在定于當(dāng)前的特性，如”。讀者一定發(fā)現(xiàn)這和 HTML 非常相似，HTML 就但是由于SGML 不嚴(yán)謹?shù)奶卣?，?dǎo)致 HTML 中出現(xiàn)了很多奇怪的語法。 在 HTML 中某些是沒有結(jié)束的。例如 HTML 中沒有結(jié)束，代碼如下：允許選擇是否出現(xiàn)結(jié)束。例如在HTML 中可以有，也可以沒有。某些某些起始強制要求結(jié)束。如HTML 中的Script。某些不區(qū)分大小寫。如與是等價的?？梢砸匀魏雾樞蚯短祝?2 個這樣的：的范圍可以。例如在 HTML 中正確的代碼

4、應(yīng)該是但是這樣的代碼也是正確的： 某些的特性可以有值，而有些的特性可以沒有值。例如在 HTML 中的 src 特性必須有值，而的 nowrap 特性可以沒有值。這些問題導(dǎo)致，創(chuàng)建一個完全基于 SGML 語言的器是一項非常的工作，SGML 的隨意性使得開發(fā)幾乎抓狂。XML 去除了SGML 的隨意性，XML 采用以下的語法。任何必須具有結(jié)束，而且在文檔中必須顯示書寫結(jié)束?？梢栽诮Y(jié)束的”前加上”/”來表示結(jié)束。如：可以表示為。實際上在器會將轉(zhuǎn)義為。必須采用鏡像順序進行嵌套，不允許任意嵌套。例如：這樣的標(biāo)簽嵌套是錯誤的，必須書寫為，即按照鏡像順序進行嵌套。所有所有的特性都必須具有值，而且所有的值都必須

5、被雙引號”。嚴(yán)格區(qū)分大小寫。例如在 SGML 中與是等價的，但是在 XML 中與是不同的。以上的語法使XML 變得非常容易，隨著 XML 出現(xiàn)又衍生了很多其他的語言，如：RSS、XSLT等等。XML 主要的目的是用以結(jié)構(gòu)化顯示數(shù)據(jù)，提供數(shù)據(jù)的結(jié)構(gòu)化視圖。由于 XML 是以文本形式數(shù)據(jù)的，XML 可以跨系統(tǒng)、跨的進行數(shù)據(jù)傳輸。下面是一個 XML 文檔實例：XML 文檔首先由XML開始，即 XML。在之后，會有 XML 相應(yīng)的注釋等，或者是XMLXML 文檔有其獨到之處，雖然 JavaScript 是弱類型語言，但是在 XML中 JavaScript 顯得非常強大。在下一節(jié)中將要講解XML 的文檔

6、結(jié)構(gòu)，對XML 的文檔結(jié)構(gòu)有一定了解，對學(xué)習(xí)DOM 對象有很大的幫助。4.1.2XML 文檔的節(jié)點層次XML 文檔在書寫時遵循樹形結(jié)構(gòu)即DOM 樹。DOM 樹定義了Node（節(jié)點）的層次，并且DOM 樹定義了 Node 的接口，以及各種的節(jié)點類型來表示節(jié)點的各個方面。DOM 樹定義了以下 Node 節(jié)點的類-在 XML 中又被稱為節(jié)點。在 JavScript 中型。 節(jié)點：文檔節(jié)點，所有任何節(jié)點的根節(jié)點，即文檔根對象。 Type 節(jié)點：DTD（ Type Discription，文檔類型描述）的對象，該節(jié)點不允許有任何子節(jié)點。例如： Fragement： Element：普通節(jié)點以及節(jié)點的內(nèi)容

7、，Element 是唯一允許同時包含屬性及子節(jié)點的節(jié)點。例如： Attribute：屬性名稱及屬性值，屬性不允許具有子節(jié)點。例如在上面的代碼中 type=”text/script”。 Text：在 XML 文檔中起始與結(jié)束之間，或者在 CData Section 內(nèi)包含的普通文本，Text不允許有任何子節(jié)點。 CDataSection：對象表現(xiàn)形式，僅僅能包含普通文本即 Text 節(jié)點作 為子節(jié)點。 Entity：Entity 表示在 DTD 文檔中的一個實體定義，Entity 節(jié)點不能包含任何子節(jié)點。例如。 EntityReference：EntityReference 表示在 XML 文檔

8、中對 DTD 文檔中實體的。例如對上例中實體 food 的如&food。 ProsingInstruction：通知器一個節(jié)點的處理辦法，ProsingInstruction 節(jié)點不允許有任何子節(jié)點。 Comment：表示在 XML 文檔中的注釋，Comment 節(jié)點也不允許有任何子節(jié)點。任何 XML 文檔都是由以上這些節(jié)點組成的，而且以上節(jié)點層次可以在XML 文檔的任意位置出現(xiàn)。 例如以下XML 文檔表示的層次結(jié)構(gòu)：圖 4.1 XML 文檔結(jié)構(gòu)圖Ajax 技術(shù)入門JavaScript 精通來自五湖四海為了一個共同的目標(biāo)走到了一起在圖 4.1 中顯示了以上 XML 文檔的結(jié)構(gòu)。在以上文檔中，每

9、個矩形表示一個 Element 節(jié)點。如上圖所示，所有節(jié)點包括注釋、CData 都被包 裹在 節(jié)點中。 任何節(jié)點在這個結(jié)構(gòu)分明的文檔結(jié)構(gòu)圖中都被認為是 的子節(jié)點。、這些節(jié)點都被在節(jié)點中，而且在結(jié)構(gòu)圖中可以清晰的看到，它們是平級的元素，很像兄弟關(guān)系。在 XML 文檔中，所有節(jié)點的父節(jié)點都是文檔節(jié)點。例如在上例中的父節(jié)點就是文檔節(jié)點。實際上在上例中所有節(jié)點的原型都來自與 Node 接口。Node 接口定義了 12 個常量，用以約束節(jié)點。Node.ELEMENT_NODE：XML 節(jié)點類型。 Node.ATTRIBUTE_NODE：XML 屬性節(jié)點。 Node.TEXT_NODE：文本節(jié)點。 Nod

10、e.CDATA_SECTION_NODE：元數(shù)據(jù)節(jié)點。 Node.ENTITY_NODE：XML 實體節(jié)點。Node.ENTITY_REFERENCE_NODE：XML 實體節(jié)點。Node.PROSING_INSTRUCTION_NODE：XML 處理指令節(jié)點。MENT_NODE：注釋節(jié)點。_NODE：文檔節(jié)點。_TYPE_NODE：文檔類型節(jié)點。_FRAGMENT_NODE：文檔碎片節(jié)點。Node.Node. Node.Node.NOTAION_NODE：DTD的表示節(jié)點。Node 接口同時定義了所有節(jié)點類型都包含的特性和方法。在表 4.1 中列舉了這些特性和方法。表 4.1 Node接口定

11、義的特性和方法DOM 提供 2 個輔助對象進行節(jié)點操作。 Nist：當(dāng)前節(jié)點的子節(jié)點列表。按照節(jié)點的索引進行，索引自 0 開始。 NamedNodeMap：當(dāng)前節(jié)點屬性的鍵值對列表，通過節(jié)點屬性名稱進行節(jié)點屬性的值。輔助對象對于操作DOM 對象有很大的作用，在下一節(jié)中將要學(xué)習(xí)通過這些對象操作 DOM 對象。nodeNameString節(jié)點的名字，由節(jié)點類型決定nodeValueString節(jié)點的值，由節(jié)點類型決定nodeTypeNumber節(jié)點的類型枚舉常量值owner指向該節(jié)點所屬的文檔ChildNode指向在childNodes列表中的第一個節(jié)點lastChildNode指向在childN

12、odes列表中的最后一個節(jié)點previousSiblingNode指向一個同級節(jié)點。如果當(dāng)前節(jié)點沒有前一個同級節(jié)點，那么preViousSibling為nullnextSiblingNode指向后面一個同級節(jié)點。如果當(dāng)前節(jié)點沒有后一個同級節(jié)點，那么nextSibling為nullchildNodesNist所有子節(jié)點的列表hasChildNodes當(dāng)前節(jié)點存在子節(jié)點時返回true,若當(dāng)前節(jié)點不存在子節(jié)點返回falseattributesNameNodeMap鍵值對列表，當(dāng)前節(jié)點的屬性集合?？梢酝ㄟ^屬性名稱得到屬性的值。appendChild(node)Node將node添加childNodes

13、的末尾。removeChild(node)Node從childNodes中移除一個節(jié)點。replaceChild(node,oldNode)Node替換childNodes中的一個節(jié)點。insertBefore(node,oldNode)Node在childNodes中的oldNode前一個節(jié)點。4.2DOM 對象的操作DOM 對象中的節(jié)點屬性、節(jié)點層次、節(jié)點類型，在 4.1 節(jié)中進行了詳細的講解。對DOM 對象的操作，在 Ajax 開發(fā)中非常頻繁，DOM 對象的操作是 Ajax 開發(fā)的基礎(chǔ)。希望讀者在仔細閱讀本節(jié)，并加強練習(xí)。4.2.1基于 XML 的特定 DOM 對象在上一節(jié)學(xué)習(xí)了 XML

14、點層次，在本節(jié)將要學(xué)習(xí)如何操作節(jié)點?；?XML 的標(biāo)記語言發(fā)展甚為迅速，如 XHTML、SVG 等。這些語言僅僅是 XML 的另一種表現(xiàn)形式，從本質(zhì)上來說它們還是XML 語言，依然可以通過 XML DOM 對象操作它們。但是這些語言無一例外的開發(fā)了自身的DOM 對象，用以擴充自身的功能。W3C 開發(fā)了針對 XHTML 及 HTML 的 DOM 對象。W3C 定義了 HTML、HTMLElement作為實現(xiàn)HTML的基礎(chǔ)。實際上在上一節(jié)中，已經(jīng)講解了 HTML 并不是合法的XML，但是大部分的瀏覽器都可以將 HTML 文檔為合法的 XML DOM 文檔，請注意瀏覽器并不提供 XML的。在日常編

15、碼中，應(yīng)使用XHTML 替代 HTML 代碼來消除HTML 的不嚴(yán)謹性。XHML 能夠被解析為良好的 XML DOM 對象，在下一節(jié)中，將通過的節(jié)點。一個簡單的 HTML 頁面來學(xué)習(xí)DOM 對象4.2.2DOM 對象的相關(guān)節(jié)點首先來看一個簡單的HTML 頁面。這個 HTMl 頁面中所有的元素都被元素起來，即所有的元素都是元素的子節(jié)點。當(dāng)前 HTML 頁面的文檔元素就是，通過以下代碼Element 節(jié)點：HTML 頁面的var dom=.Element;/實際上一切HTML 頁面的Element 節(jié)點就是元素和元素都是元素的同級子節(jié)點，可以通過以下的代碼訪問到它們：還可以通過一下的代碼和元素：v

16、ar head=dom.Child;/元素是元素的第一個子節(jié)點； var body=dom.lastChild;/元素是元素的最后一個子節(jié)點；學(xué)習(xí) DOM 對象DOM 對象的學(xué)習(xí)DOM 對象掌握 DOM 對象是一種非常必要的技巧在以上代碼中，通過一個整形索引器完整形式如下：了 dom 的 childNodes 屬性，這是 JavaScript 的簡化形式。以上的代碼都可以和元素?？梢酝ㄟ^以下代碼子節(jié)點的數(shù)目：實際上完全可以使用代碼來確定、元素與元系，代碼如下：間的關(guān)運行以上代碼，細心的讀者一定會發(fā)現(xiàn)， 所有的提示框文本都是”true” 。這段代碼測試了、元素與元間的關(guān)系。head.owner屬

17、性指示了元素的文檔節(jié)點。通過本節(jié)的學(xué)習(xí)，讀者一定掌握了點類型依然無法確定。在下一節(jié)中將要學(xué)習(xí)如何確定節(jié)點的類型。DOM 對象的基本方法，但是節(jié)4.2.3檢測節(jié)點類型在上一節(jié)中已經(jīng)學(xué)習(xí)如何對DOM 對象的基本以通過 nodeType 屬性進行。代碼如下：，但是在不能準(zhǔn)確的區(qū)分節(jié)點類型。節(jié)點類型可還可以通過以下代碼檢測的節(jié)點類型：var myNodeType; myNodeType.nodeType;/myNodeType 的值為 9alert(myNodeType=Node._NODE);/提示框顯示為true通過以上的代碼，可以看到提示框顯示為”true”。但是由于 IE 不支持Node.DO

18、CUMEN_NODE 這樣的 nodeType 的常量。為了使的以上代碼在 IE 中運行，可以自行定義一個量。代碼如下：nodeType 的枚舉型的常var myNodeType;myNodeType=.nodeType;if(typeof Node = undefined)/ 判斷當(dāng)前瀏覽器是否支持.nodeType 屬性 如果瀏覽器不支持/.nodeType 那么一定會返回 undefined=var myNodeType; myNodeType=.nodeType;/myNodeType 的值為 9alert(myNodeType);var dom=.Element;/實際上一切 HTM

19、L 頁面的Element 節(jié)點就是元素function testDom()var head=dom.childNodes.item(0);/元素是元素的第一個子節(jié)點； var body=dom.childNodes.item(1);/元素是元素的第二個子節(jié)點； alert(hearentNode=dom);/判斷元素的父節(jié)點是否是元素 alert(body.parentNode=dom);/判斷元素的父節(jié)點是否是元素alert(head.nextSibling=body);/判斷元素的下一個同級節(jié)點是否是元素 alert(body. previousSibling=head)/判斷元素的下一個

20、同級節(jié)點是否是元素 alert(head.owner =dom);/判斷元素的文檔節(jié)點是否是元素 alert(body.owner=dom);/判斷元素的文檔節(jié)點是否是元素var nodesLength=dom.childNodes.length;var head=dom.childNodes.item(0);/元素是元素的第一個子節(jié)點； var body=dom.childNodes.item(1);/元素是元素的第二個子節(jié)點；var head=dom.childNodes0;/元素是元素的第一個子節(jié)點； var body=dom.childNodes1;/元素是元素的第二個子節(jié)點；在以上代

21、碼中，首先通過 typeof 運算符得到Node 的類型，如果當(dāng)前瀏覽器不支持 nodeType 這些枚舉常量，就進入 if 語句塊建立nodeType 的枚舉常量。這樣就可以在任何瀏覽器中屬性了。在DOM 節(jié)點中，有很重要的一個節(jié)點即屬性。在下一節(jié)中將要學(xué)習(xí)如何節(jié)點的 nodeType節(jié)點的屬性。4.2.4節(jié)點的屬性對于 DOM 對象的很多節(jié)點都具有自己很多的屬性，這些屬性在節(jié)點類型中被定義為ATTRIBUTE_NODE。只有Element 節(jié)點可以擁有屬性，其他任何節(jié)點都不允許擁有屬性。在 HTML 中DOM 對象的節(jié)點屬性在所有瀏覽器中都支持，但低版本 IE 并不支持屬性節(jié)點的值。如當(dāng)前

22、 HTML 頁面中一段代碼如下：現(xiàn)在使用以下代碼中的 ID 屬性：在上面的代碼中，使用普通節(jié)點的 attributes 屬性調(diào)用 getNamedItem 方法來一個屬性節(jié)點，getNamedItem() 方法需要傳入屬性節(jié)點的名稱。實際上普通節(jié)點的 attributes 屬性的節(jié)點類型是NamedNodeMap 類型，是一個鍵值對集合。在得到屬性節(jié)點后，可以通過 se值。以下代碼演示了如何修改border 屬性的值：tribute()方法修改屬性的處理屬性function tesr()var atr;var dom=.Element;/得到當(dāng)前 HTML DOM 對象的根節(jié)點var body

23、=dom.childNodes1;/得到節(jié)點 var div=body.childNodes0;/得到 table 節(jié)點atr=div.attributes.getNamedItem(border).nodeValue;/得到節(jié)點的 border 屬性var Node=ELEMENT NODE:1, ATTRIBUTE NODE:2, TEXT NODE:3,CDATA SECTION NODE:4, ENTITY REFERENCE NODE:5, ENTITY NODE:6,PROSING INSTRUCTION NODE:7, COMMENT NODE:8,NODE:9,TYPE NOD

24、E:10, FRAGMENT NODE:11,NOION NODE:12alert(myNodeType=Node._NODE);以下代碼演示了在 JavaScript 動態(tài)修改 HTML DOM 對象節(jié)點的屬性值。通過以上的代碼，可以演示出 table 的邊框?qū)傩园l(fā)生了改變?，F(xiàn)在來總結(jié)一下操作屬性的基本方法，在表 4.2 中列出了操作屬性的基本方法。表 4.2 操作屬性的基本方法在上表中，列出了如何在屬性列表或 Element 節(jié)點中操作屬性的方法，但是在本節(jié)中Element節(jié)點的方法很笨拙。如何進行 DOM的 Element 節(jié)點將在下一節(jié)中進行詳細講解，DOM 提供一些重要的方法用以操作

25、Element 節(jié)點。4.2.4DOM節(jié)點在 DOM點間的相互嵌套非常復(fù)雜。隨著 DOM 技術(shù)的發(fā)展，Elemen 節(jié)點操作變得愈發(fā)重要。在以上的章節(jié)中操作 DOM 的 Element 節(jié)點需要逐層、逐個節(jié)點的查找，這種方式非常繁瑣和復(fù)雜。DOM 對象提供了一下幾種方法進行快捷的Element 節(jié)點操作。1.geementByTagName(String tagName) 方法： XML DOM 定義了 geementByTagName 方方法名稱說明getNamedItem(String name)根據(jù)屬性名稱返回屬性列表中的屬性節(jié)點removeNamedItem(String name)根

26、據(jù)屬性名稱刪除屬性列表中的屬性節(jié)點setNamedItem(Node node)設(shè)置相應(yīng)屬性節(jié)點，并添加至屬性列表(NamedNodeMap)item(index)返回在屬性列表中整形索引處的屬性節(jié)點getribute(String name)根據(jù)屬性名稱返回在Element節(jié)點中的屬性節(jié)點setribute(String name,String value)根據(jù)屬性名稱設(shè)定在Element節(jié)點中的屬性節(jié)點的值removeAttribute(String name)根據(jù)屬性名稱刪除在Element節(jié)點中的屬性節(jié)點function tesr()var atr;var dom=.Element;

27、var body=dom.childNodes1;var div=body.childNodes0; atr=div.attributes.getNamedItem(border).nodeValue; div.setribute(border,3);我來學(xué)習(xí)DOM法 ,geementByTagName 方法返 回名 為 指定值的 Element 節(jié)點集合 。 為什么 geementByTagName 方返回一個集合呢？在復(fù)雜的 DOM 實現(xiàn)中，出現(xiàn)相同名的 Element節(jié)點是很正常的，如 HTML DOM 中、這樣名，相同的Element 節(jié)點可能會出現(xiàn)很多。geementByTagNam

28、e 方法在HTML DOM 中中，它得到了瀏覽器廠商的廣泛支持，所有瀏覽器都支持該方法。以下代碼演示了如何使用geementByTagName 方法：var tr=.geementsByTagName(tr);運行以上代碼，到當(dāng)前DOM 中所有名為“tr”的 Element 節(jié)點的集合。如果需要得到第一個中所有的，可以通過以下的代碼實現(xiàn)：var tds=trs0.geementsByTagName(td);geementByTagName 方法還支持通配符，代碼如下所示：var ts=.geementsByTagName(*);運行以上代碼，可以得到當(dāng)前 DOM 中所有節(jié)點，但是請注意這里的通

29、配符僅僅支持“*”，IE 中并未支持別的通配符，但是使用“*”時 IE 也不一定會返回所有節(jié)點，可以使用.all 替代它。以下是一個得到DOM 中指定名稱節(jié)點結(jié)合并遍歷該集合的完整示例：節(jié)點的演示 function TagName()var trs=.geementsByTagName(tr);/得到當(dāng)前DOM 中所有為”tr”的Element節(jié)點for(var i=0;itrs.length;i+)/遍歷所有的alert(trsi.id);用戶名密 碼通過以上實例可以看到，該 geementByTagName 方法并沒有得到指定的唯一節(jié)點， geementByTagName 方法僅僅得到了相

30、同的 Element 節(jié)點集合。得到唯一指定節(jié)點可以通過以下2 種方法實現(xiàn)。2.gegeementByName(String ControlName)方法：HTML DOM 定義了 geementByName 方法，ementByName 方法可以獲得指定名稱的 Element 節(jié)點。但是請注意的是 IE6.0 和 FireFox 中對該方法僅提供了部分支持，通過該方法得到的節(jié)點值為 undefined。但是在其他的一些瀏覽器和更高版本的 IE 或 FireFox 中， 應(yīng)該會逐漸提供對該方法的支持?？梢允褂靡韵路椒ㄟM行對geementByName 方法的調(diào)用：var chk=.geement

31、sByName(chkProgramme);IE6.0、FireFox 對 DOM 實現(xiàn)提供了該方法，但是該方法不能獲得 Element 節(jié)點。以下的方法 IE 和FireFox 都提供了完整實現(xiàn)，可以實現(xiàn) geementByName 方法一樣的功能。3.geementById(String ID)方法：HTML DOM 定義了 geementById 方法，geementById 方法根據(jù)Element 的 Id 屬性返回Element 節(jié)點。在 HTML DOM 中任何Element 節(jié)點的 Id 屬性都是唯一的，geementById 方法是獲取指定節(jié)點最快捷、便利的方法。geement

32、ById 方法在 IE、FireFox 中都得到了完美的支持，geementById 方法可以獲得任意層次的 Element 節(jié)點。通過以下方式使用geementById 方法：var chk=.geementById(chkProgramme);以下是一個簡單調(diào)用geementById 方法得到一個Element 節(jié)點的實例：節(jié)點的演示 function byName()var chk=.geementById(chkProgramme);/ 得到 HTML DOM 中 Id 屬性為chkProgramme 的Element 節(jié)點alert(chk.id);/提示框顯示該 Element 節(jié)

33、點的 Id 屬性值簡單、快捷節(jié)點的方式在以上章節(jié)中告一段落，在 DOM 中還需要靈活創(chuàng)建節(jié)點。在 Ajax 應(yīng)用經(jīng)常需要動態(tài)加載節(jié)點至 HTML DOM，在下一節(jié)中將學(xué)習(xí)如何在 DOM 中動態(tài)操作節(jié)點。4.2.5創(chuàng)建、操作節(jié)點在以上章節(jié)中，已經(jīng)學(xué)習(xí)了如何通過不同方式DOM 節(jié)點，對 DOM 節(jié)點的動態(tài)創(chuàng)建、刪除、替換這些操作，才是實現(xiàn) DOM 動態(tài)性的根本性保證。在本章中將學(xué)習(xí) DOM 節(jié)點的創(chuàng)建、刪除和替換。DOM 中有很多類型的節(jié)點，DOM 對象提供了不同的方法實現(xiàn)不同類型節(jié)點的創(chuàng)建。但是各瀏覽器對這些方法的支持不盡相同。在表 4.3 中列出了不同類型節(jié)點創(chuàng)建方法，以及這些方法在 IE 和

34、 FireFox中的支持情況。表 4.3 節(jié)點操作方法及瀏覽器支持情況向頁面動態(tài)添加節(jié)點最重要的方法就是 createElement()、appendChild()、createTextNode()這 3 個方方法名稱說明IE是否支持FireFox支持情況createAttributes(String name)根據(jù)名稱創(chuàng)建屬性節(jié)點，Element節(jié)點才可以調(diào)用該方法不支持不支持createCDASection(String text)使用text文本節(jié)點創(chuàng)建一個CDATA Section節(jié)點不支持不支持ment(String text)創(chuàng)建包含文本text的注釋節(jié)點不支持不支持createF

35、ragment()創(chuàng)建文檔碎片節(jié)點支持不支持createElement(String tagname)根據(jù)名稱創(chuàng)建Element節(jié)點支持支持createTextNode(String text)根據(jù)文本text創(chuàng)建文本節(jié)點支持支持編程看書法，這 3 個方法就可以完成基本的動態(tài)添加工作。1.createElement(String name)：createElement()方法由 Element 節(jié)點調(diào)用，但是一般都由象調(diào)用。該方法根據(jù)名稱name 創(chuàng)建Element 節(jié)點。調(diào)用 createElement()的代碼如下所示：對var div=.createElement(div);/創(chuàng)建一個新

36、的 Div以上代碼動態(tài)創(chuàng)建了一個新的層，但是這個層并不能被顯示。因為層并不屬于任何文檔，不能被顯示?？梢酝ㄟ^一下的代碼將這個層添加至文檔：var div=.createElement(div);/創(chuàng)建一個新的 Div.body.appendChild(div);/將 Div 節(jié)點追加至body 的子節(jié)點中2.createTextNode(String text)：該方法由 Element 節(jié)點調(diào)用，創(chuàng)建一個文本為 text 的文本節(jié)點。調(diào)用該方法的代碼如下所示。var text1.createTextNode(o World);/創(chuàng)建文本節(jié)點以上代碼已經(jīng)創(chuàng)建了一個文本為“o World”的文本

37、節(jié)點，但是文本節(jié)點不能顯示。因為文本節(jié)點必須具有父節(jié)點，而且父節(jié)點必須是 Element 節(jié)點?？梢酝ㄟ^以下代碼將文本節(jié)點添加至 Element節(jié)點：var div=var text1.createElement(div);/創(chuàng)建一個新的 Div.createTextNode(o World);/創(chuàng)建文本節(jié)點div.appendChild(text1);/將文本節(jié)點追加至 Div 節(jié)點的子節(jié)點中通過以上代碼就可以正確的顯示文本節(jié)點了。完整示例代碼如下：示例代碼實現(xiàn)了動態(tài)創(chuàng)建層、并向?qū)又凶芳游谋竟?jié)點的方法。當(dāng)用戶單擊按鈕時，就會在頁面顯示一個包含o World 的層。通過對以上方法的學(xué)習(xí)，讀者已

38、經(jīng)掌握了如何動態(tài)添加節(jié)點，現(xiàn)在需要掌握如何刪除、替換節(jié)點。刪除和替換節(jié)點需要學(xué)習(xí) removeChild()、replaceChild()、insertBefore()方法。3.removeChild(Element node)：該方法一般由被刪除節(jié)點的父節(jié)點調(diào)用，刪除被傳入的節(jié)點參數(shù)。請注意該方法只能刪除Element 節(jié)點。調(diào)用該方法的代碼如下：var div=.body.geementsByTagName(div)0;.body.removeChild(div);在這里延續(xù)上一知識點的實例，動態(tài)刪除上一實例中動態(tài)添加的節(jié)點。實例代碼如下：創(chuàng)建節(jié)點 function createText(

39、)var div=.createElement(div);/創(chuàng)建一個新的 Divvar text1=.createTextNode(o World);/創(chuàng)建文本節(jié)點 div.appendChild(text1);/將文本節(jié)點追加至 Div 節(jié)點的子節(jié)點中.body.appendChild(div);/將 Div 節(jié)點追加至body 的子節(jié)點中=在實際應(yīng)用中，經(jīng)常需要動態(tài)替換某些節(jié)點。替換節(jié)點需要使用 replaceChild()方法，該方法具有 2個參數(shù)：新節(jié)點和被替換的節(jié)點。延續(xù)上一實例，替換動態(tài)添加的 Div 節(jié)點。實例代碼如下：創(chuàng)建節(jié)點 function createText()var

40、div=.createElement(div);/創(chuàng)建一個新的 Divvar text1=.createTextNode(o World);/創(chuàng)建文本節(jié)點 div.appendChild(text1);/將文本節(jié)點追加至 Div 節(jié)點的子節(jié)點中.body.appendChild(div);/將 Div 節(jié)點追加至body 的子節(jié)點中function removeText()var div=.body.geementsByTagName(div)0;.body.removeChild(div);function replaceText()創(chuàng)建節(jié)點 function createText()var

41、 div=.createElement(div);/創(chuàng)建一個新的 Divvar text1=.createTextNode(o World);/創(chuàng)建文本節(jié)點 div.appendChild(text1);/將文本節(jié)點追加至 Div 節(jié)點的子節(jié)點中.body.appendChild(div);/將 Div 節(jié)點追加至body 的子節(jié)點中function removeText()var div=.body.geementsByTagName(div)0;.body.removeChild(div);如果需要讓 2 個 Div 一起出現(xiàn)，并且新 Div 出現(xiàn)在舊 Div 之后可以使用ndChild(

42、)方法?？梢允褂靡韵麓a調(diào)用ndChild()方法：如果需要讓新Div 出現(xiàn)在舊Div 之前就需要使用insertBefore()方法。insertBefor()方法具有 2 個參數(shù)：需要添加的節(jié)點和舊的節(jié)點。修改上例的代碼如下： create中經(jīng)常需要Fragment()方法：以上所有的方法都只能操作單個節(jié)點對象，在日后的 Ajax 開發(fā)對象中的節(jié)點。這是需要 createFragment()方大面積修改法創(chuàng)建一個文檔碎片對象（即文檔片段對象）。文檔碎片對象可以作為無數(shù)節(jié)點的容器或父節(jié)點，可以附加很多節(jié)點并添加到中?？梢允褂靡幌麓a創(chuàng)建多個節(jié)點：運行以上代碼，會發(fā)現(xiàn)添加了 7 個節(jié)點。以上實

43、例實現(xiàn)了多個節(jié)點的添加，function createElements()var textArr=一,二,三,四,五,六,天 ; var fragMent=.createFragment();for(var i=0;itextArr.length;i+)var newDiv=.createElement(div);/創(chuàng)建新的 Divvar newText=.createTextNode(textArri);/創(chuàng)建新文本節(jié)點 newDiv.appendChild(newText);/將文本節(jié)點追加至 Div 節(jié)點的子節(jié)點中 fragMent.appendChild(newDiv);.body.a

44、ppendChild(fragMent);var newDiv=.createElement(div);/創(chuàng)建新的 Divvar newText=.createTextNode(o Ajax);/創(chuàng)建新文本節(jié)點 newDiv.appendChild(newText);/將文本節(jié)點追加至 Div 節(jié)點的子節(jié)點中var oldDiv=.body.geementsByTagName(div)0;/得到舊 Div.body.insertBefore(newDiv,oldDiv);/ 在父節(jié)點的子節(jié)點集合中節(jié)點var newDiv=.createElement(div);/創(chuàng)建新的 Divvar new

45、Text=.createTextNode(o Ajax);/創(chuàng)建新文本節(jié)點 newDiv.appendChild(newText);/將文本節(jié)點追加至 Div 節(jié)點的子節(jié)點中 var oldDiv=.body.geementsByTagName(div)0;/得到舊 DivoldDiv.parentNode.appendChild(newDiv);/ 在父節(jié)點的子節(jié)點集合中追加節(jié)點var newDiv=.createElement(div);/創(chuàng)建新的 Divvar newText=.createTextNode(o Ajax);/創(chuàng)建新文本節(jié)點 newDiv.appendChild(newT

46、ext);/將文本節(jié)點追加至 Div 節(jié)點的子節(jié)點中var oldDiv=.body.geementsByTagName(div)0;/找到需要被替換的節(jié)點.body.replaceChild(newDiv,oldDiv);/使用新的 Div 替換舊的 DivcreateFragment()創(chuàng)建的文檔碎片對象可以添加多個節(jié)點。DOM 對象所有的屬性和方法都是通用的，本節(jié)中，DOM 對象的基本操作講解業(yè)已告一段落。在下一節(jié)中將專門講解 HTML DOM 的。4.3HTML DOM本節(jié)中，主要講解如何更好的操作 HTML DOM 對象。本節(jié)首先從 HTML 標(biāo)記的屬性操作入手，然后講解 table

47、 方法。從節(jié)點的屬性到頁面布局詳細講解，讀者一定會對基本的 HTMLDOM 控制有一個深入的了解。HTML DOM 有其特殊性，在本節(jié)中就會為讀者揭示HTMLDOM 操作的各種技巧。4.3.1HTML 屬性在 HTML 代碼編寫中，讀者一定都碼中，有一個水平條標(biāo)記：了使用 HTML 的節(jié)點屬性來控制節(jié)點的行為。在下面的代如果現(xiàn)在需要操作color、size 屬性，那么需要使用 se演示了如何更改 color、size 等屬性：trinute()、getribute()方法。在以下代碼中，還可以對以上代碼進行改良，可以使用HTML DOM 更簡單的方法直接操作屬性。代碼如下：在 HTML DOM

48、 中，基本上所有的 Element 節(jié)點的屬性和節(jié)點的特性名完全一致。只有 class 屬性在HTML DOM 中變成了claame。如果需要操作 Element 節(jié)點的屬性，可以使用以下代碼進行操作。Untitled function modifyClass()var hr=.geementById(hr1);/從界面上獲得 hr 節(jié)點hr.claame=hr1;/設(shè)定 hr 的classfunction anothorModifyAttribute()var hr=.geementById(hr); hr.size=100;hr.color=#0000ff;function modifyA

49、ttribute()var hr=.geementById(hr); alert(hr.getribute(color); alert(hr.getribute(size);hr.setribute(color,#0000ff); hr.setribute(size,100);可以使用這種方式替代 getribute()、setribute()方法，使代碼更簡單、易讀。4.3.2Table 方法在的最重要HTML DOM 過程中，經(jīng)常需要操作 table（表格）。在 Web 開發(fā)中，table 是控制前臺格式。在 HTML DOM 中提供了很多屬性、方法，用以操作 table。caption：

50、即Elemnet 節(jié)點 tBodies： Elemnet 節(jié)點集合。 tFoot：table 標(biāo)記中的 Elemnet 節(jié)點。 tHead：table 標(biāo)記中的Element 節(jié)點。createTHead()：通過 table 調(diào)用，創(chuàng)建節(jié)點。 createTFoot()：通過 table 調(diào)用,創(chuàng)建節(jié)點。 createCaption()：通過 table 調(diào)用，創(chuàng)建節(jié)點 deleteTFoot()：通過 table 調(diào)用，刪除節(jié)點。 deleteTHead()：通過 table 調(diào)用，刪除節(jié)點。deleteCaption()：通過 table 調(diào)用，刪除節(jié)點。insertRow(index)

51、：在指定索引 index 的位置一個新節(jié)點。deleteRow(index)：刪除指定索引 index 的位置的節(jié)點。rows：table 中所有節(jié)點的集合，table 節(jié)點具有 rows 屬性，tbody 節(jié)點也具有 rows 屬性。cells：元素中所有單元格的集合。insertCell(deleteCell(index)：通過節(jié)點調(diào)用，在指定索引 index節(jié)點。index)：通過節(jié)點調(diào)用，刪除指定索引 index 的位置節(jié)點。以上所有的方法在 IE、FireFox 中都得到了很好的支持。但是請注意，在 IE 中動態(tài)添加或等節(jié)點，必須保證這些節(jié)點都必須添加在節(jié)點中，否則不能顯示。在進行

52、Ajax.hrbackground-color:#00ff00; height:10px;.hr1background-color:#ff0000; height:100px;開發(fā)中，經(jīng)常需要動態(tài)修改 table，所以開發(fā)者需要在 table 中添加節(jié)點，以保證在 IE 中可以正確的動態(tài)添加節(jié)點。以下 HTML 代碼，顯示了一個簡單的 table：如果需要動態(tài)生成以上 HTML 中的 table，可以使用以下代碼：function createTable()var table=.createElement(table);/創(chuàng)建 table 節(jié)點table.se tribute(border,1

53、); table.setribute(width,30%);var caption=.createElement(caption);var text=.createTextNode(演示表); caption.appendChild(text); table.appendChild(caption);var tHead=.createElement(tHead); tHead.setribute(bgcolor,#00ff00);table.appendChild(tHead);var row=tHead.insertRow(0); row.insertCell(0);!-向中添加單元格- r

54、ow.insertCell(1);!-向中添加單元格-row.cells0.appendChild(.createTextNode(1);演示表12121212通過以上代碼，演示了如何動態(tài)創(chuàng)建表格、表格中的各種節(jié)點。以上的代碼動態(tài)創(chuàng)建 table，有很好的邏輯性，易讀、易懂。針對 DOM 對象的基本操作，以及 HTML DOM 的操作都已告一段落，在下一節(jié)中將要DOM對象一致性和 DOM 的發(fā)展前瞻，為后期跨瀏覽器開發(fā)掃清。4.4測試 DOM 一致性和 DOM Level 3DOM 對象在使用過程中，需要隨時檢測瀏覽器的支持情況。在實際開發(fā)中，這種檢測非常必要，開發(fā)者必須知道用戶瀏覽器對DOM

55、 對象的支持情況。在 4.4.1 節(jié)中，將詳細講解測試 DOM 一致性。DOM 對象已經(jīng)發(fā)展了多年，但是現(xiàn)在 DOM中，將對DOM 對象的發(fā)展進行一個基本總結(jié)。標(biāo)準(zhǔn)在瀏覽器中并沒有得到完美支持。在 4.4.2 節(jié)4.4.1測試 DOM 一致性DOM 對象的基本操作，讀者肯定都爛熟于心了?，F(xiàn)在需要法確定DOM 文檔到底支持 DOM哪些部分。implemenion 對象可以幫助開發(fā)者了解 DOM 文檔的各項特征，implemenion 是 DOM 文row.cells1.appendChild(.createTextNode(2);var tBody1=.createElement(tBody);

56、 tBody1.setribute(bgcolor,#00ff00);table.appendChild(tBody1); var row=tBody1.insertRow(0); row.insertCell(0); row.insertCell(1);row.cells0.appendChild(.createTextNode(1); row.cells1.appendChild(.createTextNode(2);var tBody2=.createElement(tBody); tBody2.setribute(bgcolor,#00ff00);table.appendChild(tBody2); var row=tBody