1、高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGJavaScriptJavaScript講師講師:馮威馮威高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGAptana簡(jiǎn)介Aptana是一個(gè)非常強(qiáng)大是一個(gè)非常強(qiáng)大,開(kāi)源開(kāi)源,專(zhuān)注于專(zhuān)注于JavaScript的的Ajax開(kāi)發(fā)開(kāi)發(fā)IDE它的特性包括它的特性包括 1、JavaScript,JavaScript函數(shù),HTML,CSS語(yǔ)言的Code Assist功能 2、Outliner(大綱)：顯示JavaScript,HTML和CSS的代碼結(jié)構(gòu) 3、支持 J

2、avaScript，HTML，CSS代碼提示，包括JavaScript 自定函數(shù) 4、代碼語(yǔ)法錯(cuò)誤提示。 5、支持Aptana UI自定義和擴(kuò)展。 6、調(diào)試JavaScript 7、支持流行AJAX框架的 Code Assist功能:JQuery ext js dwr高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGAptana插件在ecpise中安裝eclipse插件引入方法 1、在eclipse的plugins文件夾的同級(jí)目錄新建文件夾，命名為plugInsNew(自 定義); 2、打開(kāi)plugInsNew，在其中新建一個(gè)你插件容易記的文件夾，

3、比如： aptana_update_024747(自定義) 3、打開(kāi)aptana_update_024747 在其中新建一個(gè)eclipse(名字固定)文件夾； 4、打開(kāi)eclipse文件夾，將你的features和plugins文件夾放入； 5、在plugInsNew同級(jí)目錄新建links文件夾（如有可?。?6、在links文件夾里新建文件( 名字自定義,后綴名是 .link) 如：aptana_update_024747.link文件，并將插件路徑引入： 如 path=E:eclipsepluginsNewaptana_update_024747 重新啟動(dòng)eclipse即可！ 這樣引入插件

4、的好處是可以方便的識(shí)別，加入或刪除你所需要的插件！高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGAptana插件在MyEcpise中安裝myeclipse插件引入方法 1、在D盤(pán)新建文件夾pluginsNew(自定義) 2、打開(kāi)pluginsNew ，在其中新建一個(gè)你插件容易記的文件夾，比如： aptana_update_024747 3、打開(kāi)aptana_update_024747 在其中新建一個(gè)eclipse文件夾； 4、打開(kāi)eclipse文件夾，將你的features和plugins文件夾放入； 5、找到myecplise的安裝目錄D:P

5、rogram FilesMyEclipse 6.5eclipselinks下的links文件夾 6、在links文件夾里新建文件如：aptana_update_024747.link文件，并將 插件路徑引入： 如 path=D:pluginsNewaptana_update_024747 重新啟動(dòng)myeclipse即可！ 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGAptana增加提示功能高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGAptana功能展示高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作

6、培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG回顧回顧javaScriptjavaScript基礎(chǔ)知識(shí)基礎(chǔ)知識(shí)高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG1. navigator 2. Windowdocument（文檔對(duì)象：整個(gè)html就是一個(gè)文檔對(duì)象）文檔對(duì)象有分為以下幾個(gè)部分frame （框架對(duì)象）location （位置對(duì)象）history （歷史對(duì)象）links 鏈接對(duì)象 archors 錨對(duì)象forms 表單對(duì)象images 圖片對(duì)象圖片對(duì)象瀏覽器的對(duì)象樹(shù)瀏覽器的對(duì)象樹(shù)高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家!

7、!IT資訊交流網(wǎng) WWW.IT315.ORGalert(信息) ： 消息框prompt(提示信息,默認(rèn)值)： 標(biāo)準(zhǔn)輸入框confirm( ) ： 確認(rèn)框open( ) ： 打開(kāi)一個(gè)新窗口close( ) ： 關(guān)閉窗口windowwindow對(duì)象常用方法對(duì)象常用方法高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG訪問(wèn)表單的方式訪問(wèn)表單的方式: * document.formsn * document.表單名字l表單對(duì)象常用的屬性action 表單提交的目的地址表單提交的目的地址 method 表單提交方式表單提交方式 name 表單名稱(chēng)表單名稱(chēng)Fo

8、rmForm表單對(duì)象表單對(duì)象高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGjavaScriptjavaScript定義函數(shù)的三種方式定義函數(shù)的三種方式l正常方法正常方法function print(msg) document.write(msg);對(duì)函數(shù)進(jìn)行調(diào)用的幾種方式： l函數(shù)名（傳遞給函數(shù)的參數(shù)1，傳遞給函數(shù)的參數(shù)2，.）l變量 = 函數(shù)名（傳遞給函數(shù)的參數(shù)1，傳遞給函數(shù)的參數(shù)2，.）l對(duì)于有返回值的函數(shù)調(diào)用，也可以在程序中直接使用返回的結(jié)果，例如：alert(sum=“ + square(2,3);l不指定任何函數(shù)值的函數(shù)，返回unde

9、fined。高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGjavaScriptjavaScript定義函數(shù)的三種方式定義函數(shù)的三種方式l構(gòu)造函數(shù)方法構(gòu)造函數(shù)方法 new Function(); /構(gòu)造函數(shù)方式定義構(gòu)造函數(shù)方式定義javascript函數(shù)函數(shù) 注意注意Function中的中的F大寫(xiě)大寫(xiě) var add=new Function(a,b,return a+b;); /調(diào)用上面定義的調(diào)用上面定義的add函數(shù)函數(shù) var sum=add(3,4); alert(sum); 注注:接受任意多個(gè)字符串參數(shù)，最后一個(gè)參數(shù)是函數(shù)體。接受任意多個(gè)

10、字符串參數(shù)，最后一個(gè)參數(shù)是函數(shù)體。 如果只傳一個(gè)字符串，則其就是函數(shù)體。如果只傳一個(gè)字符串，則其就是函數(shù)體。高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGjavaScripjavaScrip定義函數(shù)的三種方式定義函數(shù)的三種方式l函數(shù)直接量函數(shù)直接量定義函數(shù)定義函數(shù) /使用函數(shù)直接量的方式定義函數(shù)使用函數(shù)直接量的方式定義函數(shù) var result=function(a,b)return a+b; /調(diào)用使用函數(shù)直接量定義的函數(shù)調(diào)用使用函數(shù)直接量定義的函數(shù) var sum=result(7,8); alert(sum); 注:函數(shù)直接量是一個(gè)表達(dá)式

11、，它可以定義匿名函數(shù) 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG回顧回顧javaScriptjavaScript基礎(chǔ)知識(shí)完基礎(chǔ)知識(shí)完高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGDOMlDOM ：DOM是是Document Object Model文檔對(duì)象模型的縮寫(xiě)。根據(jù)文檔對(duì)象模型的縮寫(xiě)。根據(jù)W3C DOM規(guī)范規(guī)范,DOM是一種與瀏覽器，平臺(tái)，語(yǔ)言無(wú)關(guān)的接口，使得你可以訪是一種與瀏覽器，平臺(tái)，語(yǔ)言無(wú)關(guān)的接口，使得你可以訪問(wèn)頁(yè)面其他的標(biāo)準(zhǔn)組件問(wèn)頁(yè)面其他的標(biāo)準(zhǔn)組件 D D：文檔：文檔 html

12、 html 文檔文檔 或或 xml xml 文檔文檔 O O：對(duì)象：對(duì)象 document document 對(duì)象的屬性和方法對(duì)象的屬性和方法 M：模型：模型 DOM DOM 是針對(duì)是針對(duì)xml(html)xml(html)的基于樹(shù)的的基于樹(shù)的APIAPI。 DOMDOM樹(shù)樹(shù): :節(jié)點(diǎn)（節(jié)點(diǎn)（nodenode）的層次。）的層次。 DOM DOM 把一個(gè)文檔表示為一棵家譜樹(shù)（父，子，兄弟）把一個(gè)文檔表示為一棵家譜樹(shù)（父，子，兄弟） DOMDOM定義了定義了NodeNode的接口以及許多種節(jié)點(diǎn)類(lèi)型來(lái)表示的接口以及許多種節(jié)點(diǎn)類(lèi)型來(lái)表示XMLXML節(jié)點(diǎn)的多個(gè)方面節(jié)點(diǎn)的多個(gè)方面高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高

13、級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGDOMDOM的結(jié)構(gòu)的結(jié)構(gòu)高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGDOMDOM的結(jié)構(gòu)的結(jié)構(gòu)高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG節(jié)點(diǎn)及其類(lèi)型節(jié)點(diǎn)及其類(lèi)型l節(jié)點(diǎn)節(jié)點(diǎn) * 由結(jié)構(gòu)圖中我們可以看到，整個(gè)文檔就是一個(gè)文檔節(jié)點(diǎn)。由結(jié)構(gòu)圖中我們可以看到，整個(gè)文檔就是一個(gè)文檔節(jié)點(diǎn)。 * 而每一個(gè)而每一個(gè)HMTL標(biāo)簽都是一個(gè)標(biāo)簽都是一個(gè)元素節(jié)點(diǎn)元素節(jié)點(diǎn)。 * 標(biāo)簽中的文字則是標(biāo)簽中的文字則是文本節(jié)點(diǎn)文本節(jié)點(diǎn)。 * 標(biāo)簽的屬性是標(biāo)簽

14、的屬性是屬性節(jié)點(diǎn)屬性節(jié)點(diǎn)。 * 一切都是節(jié)點(diǎn)一切都是節(jié)點(diǎn)l節(jié)點(diǎn)樹(shù)節(jié)點(diǎn)樹(shù) 節(jié)點(diǎn)樹(shù)的概念從圖中一目了然，最上面的就是節(jié)點(diǎn)樹(shù)的概念從圖中一目了然，最上面的就是“樹(shù)根樹(shù)根”了。節(jié)點(diǎn)之間了。節(jié)點(diǎn)之間有父子關(guān)系，祖先與子孫關(guān)系，兄妹關(guān)系。這些關(guān)系從圖中也很好看有父子關(guān)系，祖先與子孫關(guān)系，兄妹關(guān)系。這些關(guān)系從圖中也很好看出來(lái)，直接連線的就是父子關(guān)系了。而有一個(gè)父親的就是兄妹關(guān)出來(lái)，直接連線的就是父子關(guān)系了。而有一個(gè)父親的就是兄妹關(guān)系系 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGNODE接接口口的的特特性性和和方方法法高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)

15、作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG查找元素節(jié)點(diǎn)查找元素節(jié)點(diǎn)lgetElementById()getElementById() 尋找一個(gè)有著給定 id 屬性值的元素，返回值是一個(gè)有著給定 id 屬性值的元素節(jié)點(diǎn)。如果不存在這樣的元素，它返回 null.var oElement = document.getElementById ( sID ) 該方法只能用于 document 對(duì)象l function test()l var usernameElement=document.getElementById(“tid);l /獲取元素的值l alert(usernameEle

16、ment.value: +usernameElement.value)l /獲取元素的類(lèi)型 l alert(usernameElement.type: +usernameElement.type)l高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG查找元素節(jié)點(diǎn)查找元素節(jié)點(diǎn)lgetElementsByName()尋找有著給定name屬性的所有元素，這個(gè)方法將返回一個(gè)節(jié)點(diǎn)集合一個(gè)節(jié)點(diǎn)集合，這個(gè)集合可以當(dāng)作一個(gè)數(shù)組來(lái)處理。這個(gè)集合的 lengthlength 屬性等于當(dāng)前文檔里有著給定name屬性的所有元素的總個(gè)數(shù)。 l l l l lfunction

17、test()l var tnameArray=document.getElementsByName(tname);l alert(tnameArray.length);l for(var i=0;itnameArray.length;i+)l window.alert(tnameArrayi.value);l l 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG查找元素節(jié)點(diǎn)查找元素節(jié)點(diǎn)ll l l l l /該方法返回是數(shù)組類(lèi)型 l var usernameElements=document.getElementsByName(username)

18、;l for (var i = 0; i usernameElements.length; i+) l /獲取元素的類(lèi)型l /alert(usernameElementsi.type)l /獲取元素value的值l /alert(usernameElementsi.value);l /采用函數(shù)直接量的方法l usernameElementsi.onchange = function()l alert(this.value);l ll 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG查找元素節(jié)點(diǎn)查找元素節(jié)點(diǎn)lgetElementsByTagName

19、()尋找有著給定標(biāo)簽名標(biāo)簽名的所有元素，這個(gè)方法將返回一個(gè)節(jié)點(diǎn)集合一個(gè)節(jié)點(diǎn)集合，這個(gè)集合可以當(dāng)作一個(gè)數(shù)組來(lái)處理。這個(gè)集合的 lengthlength 屬性等于當(dāng)前文檔里有著給定標(biāo)簽名的所有元素的總個(gè)數(shù)。 var elements = document.getElementsByTagName(tagName);var elements = document.getElementsByTagName(tagName); var elements = element.getElementsByTagName(tagName);var elements = element.getElementsBy

20、TagName(tagName);該方法不必非得用在整個(gè)文檔上。它也可以用來(lái)在某個(gè)特定元素的子節(jié)點(diǎn)當(dāng)中該方法不必非得用在整個(gè)文檔上。它也可以用來(lái)在某個(gè)特定元素的子節(jié)點(diǎn)當(dāng)中尋找有著給定標(biāo)簽名的元素尋找有著給定標(biāo)簽名的元素。 var container = document.getElementById(“sid”);var container = document.getElementById(“sid”); var elements = container.getElementsByTagName(“p”); var elements = container.getElementsByTagN

21、ame(“p”); alert( alert(elements elements .length);.length);高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG查找元素節(jié)點(diǎn)查找元素節(jié)點(diǎn)l/ /處理inputl/ var inputElements=document.getElementsByTagName(input);l/ /輸出input標(biāo)簽的長(zhǎng)度l/ /alert(inputElements.length);l/ for(var i=0;iinputElements.length;i+)l/ if(inputElementsi.typ

22、e!=button)/submitl/ alert(inputElementsi.value);l/ l/ l/處理selectl/ /獲取select標(biāo)簽l/ var selectElements=document.getElementsByTagName(select);l/ /獲取select下的子標(biāo)簽l/ for(var j=0;jselectElements.length;j+)l/ var optionElements=selectElementsj.getElementsByTagName(option);l/ for(var i=0;ioptionElements.length

23、;i+)l/ alert(optionElementsi.value);l/ l/ l l l var textareaElements=document.getElementsByTagName(textarea);l alert(textareaElements0.value);高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG查找元素節(jié)點(diǎn)查找元素節(jié)點(diǎn) var inputElements=document.getElementsByTagName(input); for(var i=0;iinputElements.length;i+) if

24、(inputElements.type != submit) inputElementsi.onchange = function() alert(this.value) ; var selectElements=document.getElementsByTagName(select); for (var i = 0; i selectElements.length; i+) selectElementsi.onchange=function() alert(this.value); 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG查找元素節(jié)點(diǎn)

25、查找元素節(jié)點(diǎn)l var textareaElements=document.getElementsByTagName(textarea);l for (var i = 0; i textareaElements.length; i+) l textareaElementsi.onchange = function()l alert(this.value);l ;l 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG查看是否存在子節(jié)點(diǎn)查看是否存在子節(jié)點(diǎn)lhasChildNodes()該方法用來(lái)檢查一個(gè)元素是否有子節(jié)點(diǎn)，返回值是 true 或 fals

26、e. var booleanValue = element.hasChildNodes();var booleanValue = element.hasChildNodes();文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)不可能再包含任何子節(jié)點(diǎn)文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)不可能再包含任何子節(jié)點(diǎn)，所以對(duì)這兩類(lèi)節(jié)點(diǎn)使用 hasChildNodes 方法的返回值永遠(yuǎn)是 false.如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild childNodes,firstChild,lastChild 將是空數(shù)組和空字符串將是空數(shù)組和空字符串。高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)

27、家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGhasChildNodes() var selectElements=document.getElementsByTagName(select); alert(selectElements0.hasChildNodes()var inputElements=document.getElementsByTagName(input);for(var i=0;iinputElements.length;i+) alert(inputElementsi.hasChildNodes();高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)

28、專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGDOM DOM 屬性屬性 - nodeName- nodeNamel文檔里的每個(gè)節(jié)點(diǎn)都有以下屬性。lnodeName:一個(gè)字符串，其內(nèi)容是給定節(jié)點(diǎn)的名字。 var name = node.nodeName;var name = node.nodeName; * 如果節(jié)點(diǎn)是元素節(jié)點(diǎn)，nodeName返回這個(gè)元素的名稱(chēng) * 如果是屬性節(jié)點(diǎn)，nodeName返回這個(gè)屬性的名稱(chēng) * 如果是文本節(jié)點(diǎn)，nodeName返回一個(gè)內(nèi)容為#text 的字符串 注注:nodeName :nodeName 是一個(gè)只讀屬性是一個(gè)只讀屬性。高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)

29、軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGDOM DOM 屬性屬性 - nodeType- nodeTypelnodeType：返回一個(gè)整數(shù)，這個(gè)數(shù)值代表著給定節(jié)點(diǎn)的類(lèi)型。nodeType 屬性返回的整數(shù)值對(duì)應(yīng)著 12 種節(jié)點(diǎn)類(lèi)型,常用的有三種：Node.ELEMENT_NODE -1 - 元素節(jié)點(diǎn)Node.ATTRIBUTE_NODE -2 - 屬性節(jié)點(diǎn)Node.TEXT_NODE -3 - 文本節(jié)點(diǎn)nodeType nodeType 是個(gè)只讀屬性是個(gè)只讀屬性高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORGDOM DO

30、M 屬性屬性 - nodeValue- nodeValuelnodeValue：返回給定節(jié)點(diǎn)的當(dāng)前值（字符串） 如果給定節(jié)點(diǎn)是一個(gè)屬性節(jié)點(diǎn)屬性節(jié)點(diǎn)，返回值是這個(gè)屬性的值屬性的值。 如果給定節(jié)點(diǎn)是一個(gè)文本節(jié)點(diǎn)，返回值是這個(gè)文本節(jié)點(diǎn)的內(nèi)容。如果給定節(jié)點(diǎn)是一個(gè)文本節(jié)點(diǎn)，返回值是這個(gè)文本節(jié)點(diǎn)的內(nèi)容。 如果給定節(jié)點(diǎn)是一個(gè)元素節(jié)點(diǎn)元素節(jié)點(diǎn)，返回值是 nullnull nodeValue 是一個(gè) 讀讀/ /寫(xiě)寫(xiě) 屬性，但不能對(duì)元素節(jié)點(diǎn)的 nodeValue 屬性設(shè)置值， 但可以為文本節(jié)點(diǎn)的可以為文本節(jié)點(diǎn)的 nodeValue nodeValue 屬性設(shè)置一個(gè)值屬性設(shè)置一個(gè)值。 var li = docume

31、nt.getElementById(“l(fā)i”);var li = document.getElementById(“l(fā)i”); if(li.firstChild.nodeType = 3) if(li.firstChild.nodeType = 3) li.firstChild.nodeValue = “ li.firstChild.nodeValue = “傳智播客傳智播客”; ;高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG練習(xí)練習(xí)問(wèn)題: 打印 ”明天休息” (利用兩種方法) 提示:使用(firstChild lastChild child

32、Nodes)高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG練習(xí)練習(xí)問(wèn)題:打印出 id=“bj” 該節(jié)點(diǎn)的所有子節(jié)點(diǎn)的(nodeName, nodeType, nodeValue)同時(shí)打印文本值 北京 海淀 奧運(yùn) 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG練習(xí)練習(xí)問(wèn)題: 輸出所有select元素下的所有option元素中對(duì)應(yīng)的文本內(nèi)容 例如:中專(zhuān) 輸出-中專(zhuān)高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG元素節(jié)點(diǎn)元素節(jié)點(diǎn)l/測(cè)試元素節(jié)點(diǎn),輸出節(jié)點(diǎn)

33、名稱(chēng),節(jié)點(diǎn)的類(lèi)型,節(jié)點(diǎn)的值l var liElements=document.getElementsByTagName(li);l for(var i=0;iliElements.length;i+)l alert(liElementsi.nodeName);l alert(liElementsi.nodeType);l alert(liElementsi.nodeValue);l 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG屬性節(jié)點(diǎn)屬性節(jié)點(diǎn)l/測(cè)試屬性節(jié)點(diǎn),輸出屬性節(jié)點(diǎn)名稱(chēng),節(jié)點(diǎn)的類(lèi)型,節(jié)點(diǎn)的值l var liElements=docume

34、nt.getElementsByTagName(li);l for(var i=0;iliElements.length;i+)l var attrElement=liElementsi.getAttributeNode(value)l alert(attrElement.nodeName +attrElement.nodeName);l alert(attrElement.nodeType +attrElement.nodeType);l alert(attrElement.nodeValue +liElementsi.getAttribute(value);l 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)

35、軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG文本節(jié)點(diǎn)文本節(jié)點(diǎn) /測(cè)試元素節(jié)點(diǎn),輸出節(jié)點(diǎn)名稱(chēng),節(jié)點(diǎn)的類(lèi)型,節(jié)點(diǎn)的值 var liElements=document.getElementsByTagName(li); for(var i=0;iliElements.length;i+) alert(liElementsi.childNodes0.nodeName); alert(liElementsi.childNodes0.nodeType); alert(liElementsi.childNodes0.nodeValue); liElementsi.childNodes

36、0.nodeValue=南京; alert(liElementsi.childNodes0.nodeValue); /另一種讀取方法 alert(liElementsi.firstChild.nodeName); alert(liElementsi.firstChild.nodeType); alert(liElementsi.firstChild.nodeValue); 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG替換節(jié)點(diǎn)替換節(jié)點(diǎn)lreplaceChild()把一個(gè)給定父元素父元素里的一個(gè)子節(jié)點(diǎn)替換為另外一個(gè)子節(jié)點(diǎn)var reference

37、 = element.replaceChild(newChild,oldChild);var reference = element.replaceChild(newChild,oldChild);返回值是一個(gè)指向已被替換的那個(gè)子節(jié)點(diǎn)的引用指針?lè)祷刂凳且粋€(gè)指向已被替換的那個(gè)子節(jié)點(diǎn)的引用指針。如果被插入的子節(jié)點(diǎn)還有子節(jié)點(diǎn)，則那些子節(jié)點(diǎn)也被插入到目標(biāo)節(jié)點(diǎn)中 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG練習(xí)練習(xí)l問(wèn)題:當(dāng)單擊”北京”這個(gè)節(jié)點(diǎn)時(shí),北京這個(gè)節(jié)點(diǎn)被 ”反恐精英”替換高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WW

38、W.IT315.ORG替換節(jié)點(diǎn)替換節(jié)點(diǎn)例子例子 /方法一/ var cityElement=document.getElementById(city);/ var loveElement=document.getElementById(love);/ var cityChildElement=document.getElementById(beijing);/ var loveChildElement=document.getElementById(fankong);/ var oldElement=cityElement.replaceChild(loveChildElement,cityC

39、hildElement);/ loveElement.appendChild(oldElement);/ alert(oldElement.getAttribute(id); var cityElement=document.getElementById(city); cityElement.onclick=function() var cityChildElement=document.getElementById(beijing); var loveChildElement=document.getElementById(fankong); var oldElement=cityEleme

40、nt.replaceChild(loveChildElement,cityChildElement); loveElement.appendChild(oldElement); alert(oldElement.getAttribute(id); 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG查找屬性節(jié)點(diǎn)查找屬性節(jié)點(diǎn)lgetAttribute() 返回一個(gè)給定元素的一個(gè)給定屬性節(jié)點(diǎn)的值給定屬性節(jié)點(diǎn)的值var attributeValue = element.getAttribute(attributeName);var attributeVal

41、ue = element.getAttribute(attributeName);給定屬性的名字必須以字符串的形式傳遞給該方法。給定屬性的值將以字符串的形式返回，如果給定屬性不存在，getAttribute() 將返回一個(gè)空字符串.通過(guò)屬性獲取屬性節(jié)點(diǎn) getAttributeNode(屬性的名稱(chēng))-Node高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG查找屬性節(jié)點(diǎn)查找屬性節(jié)點(diǎn) 北京 /通過(guò)屬性名獲取屬性的值 var bjElement=document.getElementById(bj); var attributeValue=eduEle

42、ment.getAttribute(name); alert(attributeValue +attributeValue); /通過(guò)屬性名獲取屬性的節(jié)點(diǎn) var bjNode=eduElement.getAttributeNode(name); alert(eduNode.nodeValue); alert(eduNode.nodeType); alert(eduNode.nodeName);高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG設(shè)置屬性節(jié)點(diǎn)設(shè)置屬性節(jié)點(diǎn)lsetAttribute()將給定元素節(jié)點(diǎn)添加一個(gè)新的屬性值或改變它的現(xiàn)有屬性的

43、值添加一個(gè)新的屬性值或改變它的現(xiàn)有屬性的值。 element.setAttribute(attributeName,attributeValue);element.setAttribute(attributeName,attributeValue);屬性的名字和值必須以字符串的形式傳遞給此方法如果這個(gè)屬性已經(jīng)存在，它的值將被刷新；如果這個(gè)屬性已經(jīng)存在，它的值將被刷新；如果不存在，如果不存在，setAttribute()setAttribute()方法將先創(chuàng)建它再為其賦值方法將先創(chuàng)建它再為其賦值。 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG設(shè)

44、置屬性節(jié)點(diǎn)設(shè)置屬性節(jié)點(diǎn) 北京 /獲取元素的引用 var bjElement=document.getElementById(bj); /設(shè)置屬性值 bjElement.setAttribute(name,beijing); /獲取設(shè)置的屬性值 var nameValue=bjElement.getAttribute(name); alert(nameValue +nameValue);高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG創(chuàng)建新元素節(jié)點(diǎn)lcreateElement()createElement()按照給定的標(biāo)簽名創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)元素

45、節(jié)點(diǎn)。方法只有一個(gè)參數(shù)：將被創(chuàng)建的元素的名字，是一個(gè)字符串. var reference = document.createElement(element);var reference = document.createElement(element);方法的返回值：是一個(gè)指向新建節(jié)點(diǎn)的引用指針是一個(gè)指向新建節(jié)點(diǎn)的引用指針。返回值是一個(gè)元返回值是一個(gè)元素節(jié)點(diǎn)素節(jié)點(diǎn)，所以它的 nodeType 屬性值等于 1。新元素節(jié)點(diǎn)不會(huì)自動(dòng)添加到文檔里新元素節(jié)點(diǎn)不會(huì)自動(dòng)添加到文檔里，新節(jié)點(diǎn)沒(méi)有 nodeParent 屬性，它只是一個(gè)存在于 JavaScript 上下文的對(duì)象.var pElement = d

46、ocument.createElement(p);var pElement = document.createElement(p);高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG設(shè)置屬性節(jié)點(diǎn)設(shè)置屬性節(jié)點(diǎn)l /創(chuàng)建一個(gè)新的元素l var pElement=document.createElement(li);l /設(shè)置屬性值l pElement.setAttribute(id,pid);l l /獲取父元素l var loveElement=document.getElementById(love);l /在父元素中增加子元素lloveEleme

47、nt.appendChild(pElement);l /通過(guò)id獲取剛創(chuàng)建的元素l var pidElement=document.getElementById(pid);l alert(pidElement.getAttribute(id);高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG創(chuàng)建新文本節(jié)點(diǎn)創(chuàng)建新文本節(jié)點(diǎn) lcreateTextNode()createTextNode()創(chuàng)建一個(gè)包含著給定文本的新文本節(jié)點(diǎn)。這個(gè)方法的返回值是一個(gè)指向新建文本節(jié)點(diǎn)引用指針。 var textNode = document.createTextNode(

48、text);var textNode = document.createTextNode(text);方法只有一個(gè)參數(shù)：新建文本節(jié)點(diǎn)所包含的文本字符串方法的返回值：是一個(gè)指向新建節(jié)點(diǎn)的引用指針。它是一個(gè)一個(gè)文本節(jié)點(diǎn)文本節(jié)點(diǎn)，所以它的 nodeType 屬性等于 3.新元素節(jié)點(diǎn)不會(huì)自動(dòng)添加到文檔里，新節(jié)點(diǎn)沒(méi)有 nodeParent 屬性 var pElementText=document.createElement(li); var textElement=document.createTextNode(南京); pElementText.appendChild(textElement);高級(jí)軟

49、件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG插入節(jié)點(diǎn)插入節(jié)點(diǎn)(1)(1)lappendChild()為給定元素增加一個(gè)子節(jié)點(diǎn)： var newreference = element.appendChild(newChild).var newreference = element.appendChild(newChild). 給定子節(jié)點(diǎn) newChild 將成為給定元素節(jié)點(diǎn) element 的最后一個(gè)子節(jié)點(diǎn)最后一個(gè)子節(jié)點(diǎn)。方法的返回值是一個(gè)指向新增子節(jié)點(diǎn)的引用指針。該方法通常與通常與 createElement() createTextNode()

50、createElement() createTextNode() 配合使用配合使用新節(jié)點(diǎn)可以被追加給文檔中的任何一個(gè)元素 var newliElement=document.createElement(li); var textNode=document.createTextNode(北京北京); newliElement.appendChild(textNode); document.body.appendChild(newliElement); var liElement=document.getElementsByTagName(li); var textValue=liElement0

51、.firstChild.nodeValue; alert(textValue);高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG練習(xí)練習(xí)問(wèn)題: 在id=edu下增加大專(zhuān)高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG插入節(jié)點(diǎn)插入節(jié)點(diǎn)(2)(2)linsertBefore()insertBefore()把一個(gè)給定節(jié)點(diǎn)插入到一個(gè)給定元素節(jié)點(diǎn)的給定子節(jié)點(diǎn)的前面前面 var reference = var reference = elementelement.insertBefore(newNode,tar

52、getNode);.insertBefore(newNode,targetNode); 節(jié)點(diǎn) newNode 將被插入到元素節(jié)點(diǎn) element 中并出現(xiàn)在節(jié)點(diǎn) targetNode 的前面.節(jié)點(diǎn)節(jié)點(diǎn) targetNode targetNode 必須是必須是 element element 元素的一個(gè)子節(jié)點(diǎn)元素的一個(gè)子節(jié)點(diǎn)。該方法通常與 createElement() 和 createTextNode() 配合使用 北京北京 上海上海 /獲取父節(jié)點(diǎn)獲取父節(jié)點(diǎn) var parentCityNode=document.getElementById(city); /獲取子節(jié)點(diǎn)獲取子節(jié)點(diǎn) var be

53、ijingNode=document.getElementById(beijing); var shanghaiNode=document.getElementById(shanghai); /插入插入 parentCityNode.insertBefore(shanghaiNode,beijingNode);高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG插入節(jié)點(diǎn)插入節(jié)點(diǎn)(2)(2) 北京北京 /獲取父節(jié)點(diǎn)獲取父節(jié)點(diǎn) var parentCityNode=document.getElementById(city); /獲取子節(jié)點(diǎn)獲取子節(jié)點(diǎn) va

54、r beijingNode=document.getElementById(beijing); /創(chuàng)建節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)newShanghaiNode var newShanghaiNode=document.createElement(li); /創(chuàng)建創(chuàng)建newShanghaiNode節(jié)點(diǎn)的文本節(jié)點(diǎn)節(jié)點(diǎn)的文本節(jié)點(diǎn) var newTextNode=document.createTextNode(上海上海);/在創(chuàng)建的節(jié)點(diǎn)上增加文本在創(chuàng)建的節(jié)點(diǎn)上增加文本 newShanghaiNode.appendChild(newTextNode); /插入節(jié)點(diǎn)插入節(jié)點(diǎn) parentCityNode.insertB

55、efore(newShanghaiNode,beijingNode);高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG插入節(jié)點(diǎn)插入節(jié)點(diǎn)(3)(3)lDOM 沒(méi)有提供 insertAfter() 方法function insertAfter(newElement,targetElement) /獲取目標(biāo)元素的父節(jié)點(diǎn)獲取目標(biāo)元素的父節(jié)點(diǎn)var parentElement=targetElement.parentNode; /如果目標(biāo)元素是最后一個(gè)元素如果目標(biāo)元素是最后一個(gè)元素,則新元素插入到目標(biāo)元素的后面則新元素插入到目標(biāo)元素的后面if(parent

56、Element.lastChild=targetElement) parentElement.appendChild(newElement);else/如果目標(biāo)元素不是最后一個(gè)元素如果目標(biāo)元素不是最后一個(gè)元素,則新元素插入到目標(biāo)元素的的則新元素插入到目標(biāo)元素的的 /下一個(gè)兄弟節(jié)點(diǎn)的前面下一個(gè)兄弟節(jié)點(diǎn)的前面,即目標(biāo)元素的后面即目標(biāo)元素的后面 parentElement.insertBefore(newElement,targetElement.nextSibling); 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG刪除節(jié)點(diǎn)刪除節(jié)點(diǎn)lremove

57、Child()從一個(gè)給定元素里刪除一個(gè)子節(jié)點(diǎn) var reference = element.removeChild(node);var reference = element.removeChild(node);返回值是一個(gè)指向已被刪除的子節(jié)點(diǎn)的引用指針。某個(gè)節(jié)點(diǎn)被某個(gè)節(jié)點(diǎn)被removeChild()removeChild()方法刪除時(shí)方法刪除時(shí), ,這個(gè)節(jié)點(diǎn)所包含的所有子節(jié)點(diǎn)將同時(shí)被刪除這個(gè)節(jié)點(diǎn)所包含的所有子節(jié)點(diǎn)將同時(shí)被刪除。如果想刪除某個(gè)節(jié)點(diǎn)，但不知道它的父節(jié)點(diǎn)是哪一個(gè)，如果想刪除某個(gè)節(jié)點(diǎn)，但不知道它的父節(jié)點(diǎn)是哪一個(gè)，parentNode parentNode 屬性可以幫忙。屬性可以幫忙

58、。 北京北京 var ulElement=document.getElementById(city); var liElement=document.getElementById(beijing); ulElement.removeChild(liElement); 北京北京 var liElement=document.getElementById(beijing); var parentElement=liElement.parentNode; parentElement.removeChild(liElement);高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) W

59、WW.IT315.ORG遍歷節(jié)點(diǎn)樹(shù)遍歷節(jié)點(diǎn)樹(shù)lChildNodes：返回一個(gè)數(shù)組，這個(gè)數(shù)組由給定元素節(jié)點(diǎn)的子節(jié)點(diǎn)構(gòu)成：var nodeList = node.childNodes;var nodeList = node.childNodes;文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)都不可能再包含任何子節(jié)點(diǎn)文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)都不可能再包含任何子節(jié)點(diǎn)，所以它們的 ChildNodes 屬性永遠(yuǎn)會(huì)返回一個(gè)空數(shù)組。如果想知道某個(gè)元素有沒(méi)有子節(jié)點(diǎn)，可以用 hasChildNodes 方法。如果想知道某個(gè)元素有多少個(gè)子節(jié)點(diǎn)，可以用 childNodes 數(shù)組的 length 屬性。childNodes childNodes 屬

60、性是一個(gè)只讀屬性屬性是一個(gè)只讀屬性。高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !IT資訊交流網(wǎng) WWW.IT315.ORG獲取第一個(gè)子節(jié)點(diǎn)獲取第一個(gè)子節(jié)點(diǎn)lfirstChild：該屬性返回一個(gè)給定元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，返回這個(gè)節(jié)點(diǎn)對(duì)象的指針。 var reference = node.firstChild;var reference = node.firstChild;文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)都不可能包含任何子節(jié)點(diǎn)，所以它們的 firstChild 屬性永遠(yuǎn)會(huì)返回 null。某個(gè)元素的 firstChild 屬性等價(jià)于這個(gè)元素的 childNodes 節(jié)點(diǎn)集合中的第一個(gè)節(jié)點(diǎn)，即： var