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

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

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

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

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

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

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

7、TML 文檔更習慣于對、等元素節(jié)點使用name 屬性。此時需要用到文檔對象的getElementsByName( )方法來定位。該方法返回指定名稱name 的節(jié)點序列。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對象方法getAttribute()方法 該方法返回目標對象指定屬性名稱的某個屬性值。語法如下：object.getAttribute(attribute) var objSample=document.getElementsByTagName(p);for(var i=0;iobjSample.length;i+) document.write(objSamplei.getAttribute(title);演示程序示例4.html 課堂練習遍歷下面的html文檔，輸出所有的復選框的值。附加節(jié)點由于文本節(jié)點具有易于操縱、對象明確等特點，

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

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

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

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