網(wǎng)頁(yè)特效技術(shù)理論部分javascript-t

1、第三章文檔對(duì)象模型(DOM)本章案例遍歷Dom顯示相應(yīng)Dom信息 向文檔中插入新的節(jié)點(diǎn) 本章目標(biāo)了解Dom的含義掌握Dom的操作方法掌握getElementById方法預(yù)習(xí)檢查提問(wèn)什么是DOM？定位指定元素的方法有哪些？什么是DOMDOM是一個(gè)表達(dá)XML文檔的標(biāo)準(zhǔn)(由W3C制定的)。它未必是最快的方式，也未必是最輕量級(jí)的或者最容易使用的，但的確是應(yīng)用最廣泛的，大部分web開(kāi)發(fā)的編程語(yǔ)言如Java、PHP、Python、Ruby和JavaScript等都提供了DOM的實(shí)現(xiàn)。DOM給開(kāi)發(fā)者提供了一種定位XML層級(jí)結(jié)構(gòu)的直觀(guān)方法。主要包括：核心 JavaScript 語(yǔ)言參考（數(shù)據(jù)類(lèi)型、運(yùn)算符、基本

2、語(yǔ)句、函數(shù)等）與數(shù)據(jù)類(lèi)型相關(guān)的核心對(duì)象（String、Array、Math、Date 等數(shù)據(jù)類(lèi)型）瀏覽器對(duì)象（window、location、history、navigator 等）文檔對(duì)象（document、images、form 等） DOM對(duì)象的屬性和方法DOM-一棵枝繁葉茂的“節(jié)點(diǎn)樹(shù)”所謂節(jié)點(diǎn)(node)，表示某個(gè)網(wǎng)絡(luò)中的一個(gè)連接點(diǎn)，換句話(huà)說(shuō)，網(wǎng)絡(luò)是節(jié)點(diǎn)和連線(xiàn)的集合在，W3C DOM 中，每個(gè)容器、獨(dú)立的元素或文本塊都被看成一個(gè)節(jié)點(diǎn)，節(jié)點(diǎn)是DOM的基本構(gòu)建塊。 節(jié)點(diǎn)類(lèi)型DOM 中定義了HTML 文檔中6 種相關(guān)節(jié)點(diǎn)類(lèi)型。 節(jié)點(diǎn)類(lèi)型數(shù)值節(jié)點(diǎn)類(lèi)型附加說(shuō)明實(shí)例1 元素(Element)HTM

3、L標(biāo)記元素2屬性(Attribute)HTML標(biāo)記元素的屬性color=red3文本(Text)被HTML標(biāo)記括起來(lái)的文本段Hello World!8注釋(Comment)HTML注釋段9文檔(Document)HTML文檔根文本對(duì)象10文檔類(lèi)型(DocumentType)文檔類(lèi)型DOM對(duì)象的屬性屬性一般定義對(duì)象的當(dāng)前設(shè)置，反映對(duì)象的可見(jiàn)屬性。節(jié)點(diǎn)屬性附加說(shuō)明nodeName返回當(dāng)前節(jié)點(diǎn)名字nodeValue返回當(dāng)前節(jié)點(diǎn)的值，僅對(duì)文本節(jié)點(diǎn)nodeType返回與節(jié)點(diǎn)類(lèi)型相對(duì)應(yīng)的值parentNode引用當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)，如果存在的話(huà)childNodes訪(fǎng)問(wèn)當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)集合，如果存在的話(huà)fir

4、stChild對(duì)標(biāo)記的子節(jié)點(diǎn)集合中第一個(gè)節(jié)點(diǎn)的引用，如果存在的話(huà)lastChild對(duì)標(biāo)記的子節(jié)點(diǎn)集合中最后一個(gè)節(jié)點(diǎn)的引用，如果存在的話(huà)previousSibling對(duì)同屬一個(gè)父節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)的引用nextSibling對(duì)同屬一個(gè)父節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)的引用attributes返回當(dāng)前節(jié)點(diǎn)（標(biāo)記）屬性的列表ownerDocument指向包含節(jié)點(diǎn)（標(biāo)記）的HTML document對(duì)象DOM對(duì)象的屬性 e to DOM World! 以上代碼可用下圖表示遍歷DOM演示程序示例1.html對(duì)象方法 對(duì)象方法是腳本給該對(duì)象的命令，可以有返回值，也可沒(méi)有，且不是每個(gè)對(duì)象都有方法定義。DOM 中定義

5、了操作節(jié)點(diǎn)的一系列行之有效的方法，讓W(xué)eb 應(yīng)用程序開(kāi)發(fā)者真正做到隨心所欲地操作HTML 文檔中各個(gè)元素對(duì)象。 常用對(duì)象方法：getElementById()getElementsByTagName()getElementsByName()getAttribute()對(duì)象方法getElementById()方法 該方法返回與指定id 屬性值的元素節(jié)點(diǎn)相對(duì)應(yīng)的對(duì)象，對(duì)應(yīng)著文檔里一個(gè)特定的元素節(jié)點(diǎn)（元素對(duì)象）。該方法是與document 對(duì)象相關(guān)聯(lián)的函數(shù)，其語(yǔ)法如下：document.getElementById(id) document.write(typeof /typeof document

6、.getElementById(purchases);演示程序示例2.html對(duì)象方法該方法返回文檔里指定標(biāo)簽tag 的元素對(duì)象數(shù)組，與getElementById( )方法返回對(duì)象不同，且返回的對(duì)象數(shù)組中每個(gè)元素分別對(duì)應(yīng)文檔里一個(gè)特定的元素節(jié)點(diǎn)（元素對(duì)象）。 document. getElementsByTagName(tag)var items=document.getElementsByTagName(li);for(var i=0;iitems.length;i+) document.write(typeof itemi);對(duì)象方法getElementsByName()方法 舊版本的H

7、TML 文檔更習(xí)慣于對(duì)、等元素節(jié)點(diǎn)使用name 屬性。此時(shí)需要用到文檔對(duì)象的getElementsByName( )方法來(lái)定位。該方法返回指定名稱(chēng)name 的節(jié)點(diǎn)序列。document. getElementsByName(name)var MyList=document.getElementsByName(MyTag);var temp= ;for(var i=0;iMyList.length;i+) temp+=nodeName: +node.nodeName+n;temp+=nodeType: +node.nodeType+n;temp+=nodeValue: +node.nodeVal

8、ue+n;return temp;演示程序示例3.html對(duì)象方法getAttribute()方法 該方法返回目標(biāo)對(duì)象指定屬性名稱(chēng)的某個(gè)屬性值。語(yǔ)法如下：object.getAttribute(attribute) var objSample=document.getElementsByTagName(p);for(var i=0;iobjSample.length;i+) document.write(objSamplei.getAttribute(title);演示程序示例4.html 課堂練習(xí)遍歷下面的html文檔，輸出所有的復(fù)選框的值。附加節(jié)點(diǎn)由于文本節(jié)點(diǎn)具有易于操縱、對(duì)象明確等特點(diǎn)，

9、DOM 提供了非常豐富的節(jié)點(diǎn)處理方法，如表所示：操作類(lèi)型方法原型附加說(shuō)明生成節(jié)點(diǎn)createElement(tagName)創(chuàng)建由tagName指定類(lèi)型的標(biāo)記CreateTextNode(string)創(chuàng)建包含字符創(chuàng)string的文本節(jié)點(diǎn)createAttribute(name)針對(duì)節(jié)點(diǎn)創(chuàng)建由name指定的屬性，不常用 ment(string)創(chuàng)建由字符串string指定的文本注釋插入和添加節(jié)點(diǎn)appendChild(newChild)添加子節(jié)點(diǎn)newChild到目標(biāo)節(jié)點(diǎn)上insertBefore(newChild,targetChild)將新節(jié)點(diǎn)newChild插入目標(biāo)節(jié)點(diǎn)targetChi

10、ld之前復(fù)制節(jié)點(diǎn)cloneNode(bool)復(fù)制節(jié)點(diǎn)自身，由邏輯量bool確定是否復(fù)制子節(jié)點(diǎn)最常用的兩個(gè)節(jié)點(diǎn)操作方法附加節(jié)點(diǎn)刪除和替換節(jié)點(diǎn)removeChild(childName)刪除由childName指定的節(jié)點(diǎn)replaceChild(newChild,oldChild)用新節(jié)點(diǎn)newChild替換舊節(jié)點(diǎn)oldChild文本節(jié)點(diǎn)操作insertData(offset,string)從由offset指定的位置插入string值appendData(string)將string值插入到文本節(jié)點(diǎn)的末尾處deleteData(offset,count)從由offset指定的位置刪除count個(gè)

11、字符replaceData(offset,count,string)從由offset指定的位置用string代替count個(gè)字符splitText(offset)從由offset指定的位置將文本節(jié)點(diǎn)分成兩個(gè)文本節(jié)點(diǎn)，左邊更新為原始節(jié)點(diǎn)，右邊的返回到新節(jié)點(diǎn)substringData(offset,count)返回從offset指定的位置開(kāi)始的count個(gè)字符最常用的移除節(jié)點(diǎn)的方法生成節(jié)點(diǎn)DOM 中提供的方法生成新節(jié)點(diǎn)的操作非常簡(jiǎn)單，語(yǔ)法分別如下：myElement=document.createElement(h1)myTextNode=document.createTextNode(My Te

12、xt Node!) ment(My Comment!) 如何將新生成的節(jié)點(diǎn)插入到頁(yè)面中？ object.appendChild(newChild) 插入節(jié)點(diǎn)/產(chǎn)生p 元素節(jié)點(diǎn)和新文本節(jié)點(diǎn)var newParagraph = document.createElement(p);var newTextNode= document.createTextNode(document.MyForm.MyField.value);newParagraph.appendChild(newTextNode);創(chuàng)建新節(jié)點(diǎn)創(chuàng)建新文本節(jié)點(diǎn)將文本節(jié)點(diǎn)添加到P節(jié)點(diǎn)內(nèi)部演示程序示例5.html刪除節(jié)點(diǎn)可以在節(jié)點(diǎn)樹(shù)中生成、添加、復(fù)制一個(gè)節(jié)點(diǎn)，當(dāng)然也可以刪除節(jié)點(diǎn)樹(shù)中特定的節(jié)點(diǎn)。DOM 提供removeChild()方法來(lái)進(jìn)行刪除操作，語(yǔ)法如下：removeNode=object.removeChild(name) 刪除節(jié)點(diǎn)var parentElement=document.getElementById(p1);/返回元素節(jié)點(diǎn)P 的最后一個(gè)孩子，即文本節(jié)點(diǎn)“World!”currentElement=par