JavaScript加強(qiáng)(黑馬程序員馮威AJAX視頻教程)

1、杭州華育Aptana簡介Aptana是一個非常強(qiáng)大是一個非常強(qiáng)大,開源開源,專注于專注于JavaScript的的Ajax開發(fā)開發(fā)IDE它的特性包括它的特性包括 1、JavaScript,JavaScript函數(shù),HTML,CSS語言的Code Assist功能 2、Outliner(大綱)：顯示JavaScript,HTML和CSS的代碼結(jié)構(gòu) 3、支持 JavaScript，HTML，CSS代碼提示，包括JavaScript 自定函數(shù) 4、代碼語法錯誤提示。 5、支持Aptana UI自定義和擴(kuò)展。 6、調(diào)試JavaScript 7、支持流行AJAX框架的 Code Assist功能:JQue

2、ry ext js dwr杭州華育Aptana插件在ecpise中安裝eclipse插件引入方法 1、在eclipse的plugins文件夾的同級目錄新建文件夾，命名為plugInsNew(自 定義); 2、打開plugInsNew，在其中新建一個你插件容易記的文件夾，比如： aptana_update_024747(自定義) 3、打開aptana_update_024747 在其中新建一個eclipse(名字固定)文件夾； 4、打開eclipse文件夾，將你的features和plugins文件夾放入； 5、在plugInsNew同級目錄新建links文件夾（如有可省）； 6、在links文

3、件夾里新建文件( 名字自定義,后綴名是 .link) 如：aptana_update_024747.link文件，并將插件路徑引入： 如 path=E:eclipsepluginsNewaptana_update_024747 重新啟動eclipse即可！ 這樣引入插件的好處是可以方便的識別，加入或刪除你所需要的插件！杭州華育Aptana增加提示功能杭州華育Aptana插件在MyEcpise中安裝myeclipse插件引入方法 1、在D盤新建文件夾pluginsNew(自定義) 2、打開pluginsNew ，在其中新建一個你插件容易記的文件夾，比如： aptana_update_024747

4、 3、打開aptana_update_024747 在其中新建一個eclipse文件夾； 4、打開eclipse文件夾，將你的features和plugins文件夾放入； 5、找到myecplise的安裝目錄D:Program FilesMyEclipse 6.5eclipselinks下的links文件夾 6、在links文件夾里新建文件如：aptana_update_024747.link文件，并將 插件路徑引入： 如 path=D:pluginsNewaptana_update_024747 重新啟動myeclipse即可！ 杭州華育Aptana功能展示杭州華育回顧回顧javaScrip

5、tjavaScript基基礎(chǔ)知識礎(chǔ)知識杭州華育1. navigator 2. Windowdocument（文檔對象）frame （框架對象）location （位置對象）history （歷史對象）links 鏈接對象 archors 錨對象forms 表單對象images 圖片對象圖片對象瀏覽器的對象樹瀏覽器的對象樹杭州華育lalert(信息) ： 消息框lprompt(提示信息,默認(rèn)值)： 標(biāo)準(zhǔn)輸入框lconfirm( ) ： 確認(rèn)框lopen( ) ： 打開一個新窗口lclose( ) ： 關(guān)閉窗口windowwindow對象常用方法對象常用方法杭州華育訪問表單的方式訪問表單的方式:

6、* document.formsn * document.表單名字l表單對象常用的屬性action 表單提交的目的地址表單提交的目的地址 method表單提交方式表單提交方式 name 表單名稱表單名稱FormForm表單對象表單對象杭州華育javaScriptjavaScript定義函數(shù)的三種方式定義函數(shù)的三種方式l正常方法正常方法function print(msg) document.write(msg);對函數(shù)進(jìn)行調(diào)用的幾種方式： l函數(shù)名（傳遞給函數(shù)的參數(shù)1，傳遞給函數(shù)的參數(shù)2，.）l變量 = 函數(shù)名（傳遞給函數(shù)的參數(shù)1，傳遞給函數(shù)的參數(shù)2，.）l對于有返回值的函數(shù)調(diào)用，也可以在程序

7、中直接使用返回的結(jié)果，例如：alert(sum=“ + square(2,3);l不指定任何函數(shù)值的函數(shù)，返回undefined。杭州華育javaScriptjavaScript定義函數(shù)的三種方式定義函數(shù)的三種方式l構(gòu)造函數(shù)方法構(gòu)造函數(shù)方法 new Function(); /構(gòu)造函數(shù)方式定義構(gòu)造函數(shù)方式定義javascript函數(shù)函數(shù) 注意注意Function中的中的F大寫大寫 var add=new Function(a,b,return a+b;); /調(diào)用上面定義的調(diào)用上面定義的add函數(shù)函數(shù) var sum=add(3,4); alert(sum); 注注:接受任意多個字符串參數(shù)，最后

8、一個參數(shù)是函數(shù)體。接受任意多個字符串參數(shù)，最后一個參數(shù)是函數(shù)體。 如果只傳一個字符串，則其就是函數(shù)體。如果只傳一個字符串，則其就是函數(shù)體。杭州華育javaScripjavaScrip定義函數(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ù)直接量是一個表達(dá)式，它可以定義匿名函數(shù) 杭州華育回顧回顧javaScript

9、javaScript基礎(chǔ)基礎(chǔ)知識完知識完杭州華育DOMlDOM ：DOM是是Document Object Model文檔對象模型的縮寫。根據(jù)文檔對象模型的縮寫。根據(jù)W3C DOM規(guī)范規(guī)范,DOM是一種與瀏覽器，平臺，語言無關(guān)的接口，使得你可以訪是一種與瀏覽器，平臺，語言無關(guān)的接口，使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件問頁面其他的標(biāo)準(zhǔn)組件 D D：文檔：文檔 html html 文檔文檔 或或 xml xml 文檔文檔 O O：對象：對象 document document 對象的屬性和方法對象的屬性和方法 M：模型：模型 DOM DOM 是針對是針對xml(html)xml(html)的基于樹的

10、的基于樹的APIAPI。 DOMDOM樹樹: :節(jié)點（節(jié)點（nodenode）的層次。）的層次。 DOM DOM 把一個文檔表示為一棵家譜樹（父，子，兄弟）把一個文檔表示為一棵家譜樹（父，子，兄弟） DOMDOM定義了定義了NodeNode的接口以及許多種節(jié)點類型來表示的接口以及許多種節(jié)點類型來表示XMLXML節(jié)點的多個方面節(jié)點的多個方面杭州華育DOMDOM的結(jié)構(gòu)的結(jié)構(gòu)杭州華育DOMDOM的結(jié)構(gòu)的結(jié)構(gòu)杭州華育節(jié)點及其類型節(jié)點及其類型l節(jié)點節(jié)點 * 由結(jié)構(gòu)圖中我們可以看到，整個文檔就是一個文檔節(jié)點。由結(jié)構(gòu)圖中我們可以看到，整個文檔就是一個文檔節(jié)點。 * 而每一個而每一個HMTL標(biāo)簽都是一個標(biāo)簽都

11、是一個元素節(jié)點元素節(jié)點。 * 標(biāo)簽中的文字則是標(biāo)簽中的文字則是文本節(jié)點文本節(jié)點。 * 標(biāo)簽的屬性是標(biāo)簽的屬性是屬性節(jié)點屬性節(jié)點。 * 一切都是節(jié)點一切都是節(jié)點l節(jié)點樹節(jié)點樹 節(jié)點樹的概念從圖中一目了然，最上面的就是節(jié)點樹的概念從圖中一目了然，最上面的就是“樹根樹根”了。節(jié)了。節(jié)點之間有父子關(guān)系，祖先與子孫關(guān)系，兄妹關(guān)系。這些關(guān)系從點之間有父子關(guān)系，祖先與子孫關(guān)系，兄妹關(guān)系。這些關(guān)系從圖中也很好看出來，直接連線的就是父子關(guān)系了。而有一個父圖中也很好看出來，直接連線的就是父子關(guān)系了。而有一個父親的就是兄妹關(guān)系親的就是兄妹關(guān)系 杭州華育特性特性/方法方法類型類型/返回類型返回類型說說 明明nodeN

12、ameString節(jié)點的名字；根據(jù)節(jié)點的類型而定義nodeValueString節(jié)點的值；根據(jù)節(jié)點的類型而定義nodeTypeNumber節(jié)點的類型常量值之一ownerDocumentDocument指向這個節(jié)點所屬的文檔firstChildNode指向在childNodes列表中的第一個節(jié)點lastChildNode指向在childNodes列表中的最后一個節(jié)點childNodesNodeList所有子節(jié)點的列表previousSiblingNode指向前一個兄弟節(jié)點；如果這個節(jié)點就是第一個兄弟節(jié)點，那么該值為nullnextSiblingNode指向后一個兄弟節(jié)點；如果這個節(jié)點就是最后一個

13、兄弟節(jié)點，那么該值為nullhasChildNodes()Boolean當(dāng)childNodes包含一個或多個節(jié)點時，返回真attributesNamedNodeMap包含了代表一個元素的特性的Attr對象；僅用于Element節(jié)點appendChild(node)Node將node添加到childNodes的末尾removeChild(node)Node從childNodes中刪除nodereplaceChild(newnode, oldnode)Node將childNodes中的oldnode替換成newnodeinsertBefore(newnode, refnode)Node在child

14、Nodes中的refnode之前插入newnodeNODE接接口口的的特特性性和和方方法法杭州華育查找元素節(jié)點查找元素節(jié)點lgetElementById()getElementById() 尋找一個有著給定 id 屬性值的元素，返回值是一個有著給定 id 屬性值的元素節(jié)點。如果不存在這樣的元素，它返回 null.var oElement = document.getElementById ( sID ) 該方法只能用于 document 對象l function test()l var usernameElement=document.getElementById(“tid);l /獲取元素的

15、值l alert(usernameElement.value: +usernameElement.value)l /獲取元素的類型 l alert(usernameElement.type: +usernameElement.type)l杭州華育查找元素節(jié)點查找元素節(jié)點lgetElementsByName()尋找有著給定name屬性的所有元素，這個方法將返回一個節(jié)點集合一個節(jié)點集合，這個集合可以當(dāng)作一個數(shù)組來處理。這個集合的 lengthlength 屬性等于當(dāng)前文檔里有著給定name屬性的所有元素的總個數(shù)。 l l l l lfunction test()l var tnameArray=d

16、ocument.getElementsByName(tname);l alert(tnameArray.length);l for(var i=0;itnameArray.length;i+)l window.alert(tnameArrayi.value);l l 杭州華育查找元素節(jié)點查找元素節(jié)點ll l l l l /該方法返回是數(shù)組類型 l var usernameElements=document.getElementsByName(username);l for (var i = 0; i usernameElements.length; i+) l /獲取元素的類型l /alert

17、(usernameElementsi.type)l /獲取元素value的值l /alert(usernameElementsi.value);l /采用函數(shù)直接量的方法l usernameElementsi.onchange = function()l alert(this.value);l ll 杭州華育查找元素節(jié)點查找元素節(jié)點lgetElementsByTagName()尋找有著給定標(biāo)簽名標(biāo)簽名的所有元素，這個方法將返回一個節(jié)點集合一個節(jié)點集合，這個集合可以當(dāng)作一個數(shù)組來處理。這個集合的 lengthlength 屬性等于當(dāng)前文檔里有著給定標(biāo)簽名的所有元素的總個數(shù)。 var elemen

18、ts = document.getElementsByTagName(tagName);var elements = document.getElementsByTagName(tagName); var elements = element.getElementsByTagName(tagName);var elements = element.getElementsByTagName(tagName);該方法不必非得用在整個文檔上。它也可以用來在某個特定元素的子節(jié)點該方法不必非得用在整個文檔上。它也可以用來在某個特定元素的子節(jié)點當(dāng)中尋找有著給定標(biāo)簽名的元素當(dāng)中尋找有著給定標(biāo)簽名的元素。 v

19、ar container = document.getElementById(“sid”);var container = document.getElementById(“sid”); var elements = container.getElementsByTagName(“p”); var elements = container.getElementsByTagName(“p”); alert( alert(elements elements .length);.length);杭州華育查找元素節(jié)點查找元素節(jié)點l/ /處理inputl/ var inputElements=docum

20、ent.getElementsByTagName(input);l/ /輸出input標(biāo)簽的長度l/ /alert(inputElements.length);l/ for(var i=0;iinputElements.length;i+)l/ if(inputElementsi.type!=button)/submitl/ alert(inputElementsi.value);l/ l/ l/處理selectl/ /獲取select標(biāo)簽l/ var selectElements=document.getElementsByTagName(select);l/ /獲取select下的子標(biāo)簽l

21、/ for(var j=0;jselectElements.length;j+)l/ var optionElements=selectElementsj.getElementsByTagName(option);l/ for(var i=0;ioptionElements.length;i+)l/ alert(optionElementsi.value);l/ l/ l l l var textareaElements=document.getElementsByTagName(textarea);l alert(textareaElements0.value);杭州華育查找元素節(jié)點查找元素

22、節(jié)點 var inputElements=document.getElementsByTagName(input); for(var i=0;iinputElements.length;i+) if (inputElements.type != submit) inputElementsi.onchange = function() alert(this.value) ; var selectElements=document.getElementsByTagName(select); for (var i = 0; i selectElements.length; i+) selectEle

23、mentsi.onchange=function() alert(this.value); 杭州華育查找元素節(jié)點查找元素節(jié)點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 杭州華育查看是否存在子節(jié)點查看是否存在子節(jié)點lhasChildNodes()該方法用來檢查一個元素是否有子節(jié)點，返回值是

24、 true 或 false. var booleanValue = element.hasChildNodes();var booleanValue = element.hasChildNodes();文本節(jié)點和屬性節(jié)點不可能再包含任何子節(jié)點文本節(jié)點和屬性節(jié)點不可能再包含任何子節(jié)點，所以對這兩類節(jié)點使用 hasChildNodes 方法的返回值永遠(yuǎn)是 false.如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild childNodes,firstChild,lastChild 將是空數(shù)組和空字符串將是空數(shù)組和空字符串

25、。杭州華育hasChildNodes() var selectElements=document.getElementsByTagName(select); alert(selectElements0.hasChildNodes()var inputElements=document.getElementsByTagName(input);for(var i=0;iinputElements.length;i+) alert(inputElementsi.hasChildNodes();杭州華育DOM DOM 屬性屬性 - nodeName- nodeNamel文檔里的每個節(jié)點都有以下屬性。l

26、nodeName:一個字符串，其內(nèi)容是給定節(jié)點的名字。 var name = node.nodeName;var name = node.nodeName; * 如果節(jié)點是元素節(jié)點，nodeName返回這個元素的名稱 * 如果是屬性節(jié)點，nodeName返回這個屬性的名稱 * 如果是文本節(jié)點，nodeName返回一個內(nèi)容為#text 的字符串 注注:nodeName :nodeName 是一個只讀屬性是一個只讀屬性。杭州華育DOM DOM 屬性屬性 - nodeType- nodeTypelnodeType：返回一個整數(shù)，這個數(shù)值代表著給定節(jié)點的類型。nodeType 屬性返回的整數(shù)值對應(yīng)著

27、12 種節(jié)點類型,常用的有三種：Node.ELEMENT_NODE -1 - 元素節(jié)點Node.ATTRIBUTE_NODE -2 - 屬性節(jié)點Node.TEXT_NODE -3 - 文本節(jié)點nodeType nodeType 是個只讀屬性是個只讀屬性杭州華育DOM DOM 屬性屬性 - nodeValue- nodeValuelnodeValue：返回給定節(jié)點的當(dāng)前值（字符串） 如果給定節(jié)點是一個屬性節(jié)點屬性節(jié)點，返回值是這個屬性的值屬性的值。 如果給定節(jié)點是一個文本節(jié)點，返回值是這個文本節(jié)點的內(nèi)容。如果給定節(jié)點是一個文本節(jié)點，返回值是這個文本節(jié)點的內(nèi)容。 如果給定節(jié)點是一個元素節(jié)點元素節(jié)點

28、，返回值是 nullnull nodeValue 是一個 讀讀/ /寫寫 屬性，但不能對元素節(jié)點的 nodeValue 屬性設(shè)置值， 但可以為文本節(jié)點的可以為文本節(jié)點的 nodeValue nodeValue 屬性設(shè)置一個值屬性設(shè)置一個值。 var li = document.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.firstCh

29、ild.nodeValue = “傳智播客傳智播客”; ;杭州華育練習(xí)練習(xí)問題: 打印 ”明天休息” (利用兩種方法) 提示:使用(firstChild lastChild childNodes)杭州華育練習(xí)練習(xí)問題:打印出 id=“bj” 該節(jié)點的所有子節(jié)點的(nodeName, nodeType, nodeValue)同時打印文本值 北京 海淀 奧運(yùn) 杭州華育練習(xí)練習(xí)問題: 輸出所有select元素下的所有option元素中對應(yīng)的文本內(nèi)容 例如:中專 輸出-中專杭州華育元素節(jié)點元素節(jié)點l/測試元素節(jié)點,輸出節(jié)點名稱,節(jié)點的類型,節(jié)點的值l var liElements=document.g

30、etElementsByTagName(li);l for(var i=0;iliElements.length;i+)l alert(liElementsi.nodeName);l alert(liElementsi.nodeType);l alert(liElementsi.nodeValue);l 杭州華育屬性節(jié)點屬性節(jié)點l/測試屬性節(jié)點,輸出屬性節(jié)點名稱,節(jié)點的類型,節(jié)點的值l var liElements=document.getElementsByTagName(li);l for(var i=0;iliElements.length;i+)l var attrElement=li

31、Elementsi.getAttributeNode(value)l alert(attrElement.nodeName +attrElement.nodeName);l alert(attrElement.nodeType +attrElement.nodeType);l alert(attrElement.nodeValue +liElementsi.getAttribute(value);l 杭州華育文本節(jié)點文本節(jié)點 /測試元素節(jié)點,輸出節(jié)點名稱,節(jié)點的類型,節(jié)點的值 var liElements=document.getElementsByTagName(li); for(var i

32、=0;iliElements.length;i+) alert(liElementsi.childNodes0.nodeName); alert(liElementsi.childNodes0.nodeType); alert(liElementsi.childNodes0.nodeValue); liElementsi.childNodes0.nodeValue=南京; alert(liElementsi.childNodes0.nodeValue); /另一種讀取方法 alert(liElementsi.firstChild.nodeName); alert(liElementsi.fir

33、stChild.nodeType); alert(liElementsi.firstChild.nodeValue); 杭州華育替換節(jié)點替換節(jié)點lreplaceChild()把一個給定父元素父元素里的一個子節(jié)點替換為另外一個子節(jié)點var reference = element.replaceChild(newChild,oldChild);var reference = element.replaceChild(newChild,oldChild);返回值是一個指向已被替換的那個子節(jié)點的引用指針返回值是一個指向已被替換的那個子節(jié)點的引用指針。如果被插入的子節(jié)點還有子節(jié)點，則那些子節(jié)點也被插入到

34、目標(biāo)節(jié)點中 杭州華育練習(xí)練習(xí)l問題:當(dāng)單擊”北京”這個節(jié)點時,北京這個節(jié)點被 ”反恐精英”替換杭州華育替換節(jié)點替換節(jié)點例子例子 /方法一/ var cityElement=document.getElementById(city);/ var loveElement=document.getElementById(love);/ var cityChildElement=document.getElementById(beijing);/ var loveChildElement=document.getElementById(fankong);/ var oldElement=cityEle

35、ment.replaceChild(loveChildElement,cityChildElement);/ loveElement.appendChild(oldElement);/ alert(oldElement.getAttribute(id); var cityElement=document.getElementById(city); cityElement.onclick=function() var cityChildElement=document.getElementById(beijing); var loveChildElement=document.getElemen

36、tById(fankong); var oldElement=cityElement.replaceChild(loveChildElement,cityChildElement); loveElement.appendChild(oldElement); alert(oldElement.getAttribute(id); 杭州華育查找屬性節(jié)點查找屬性節(jié)點lgetAttribute() 返回一個給定元素的一個給定屬性節(jié)點的值給定屬性節(jié)點的值var attributeValue = element.getAttribute(attributeName);var attributeValue =

37、 element.getAttribute(attributeName);給定屬性的名字必須以字符串的形式傳遞給該方法。給定屬性的值將以字符串的形式返回，如果給定屬性不存在，getAttribute() 將返回一個空字符串.通過屬性獲取屬性節(jié)點 getAttributeNode(屬性的名稱)-Node杭州華育查找屬性節(jié)點查找屬性節(jié)點 北京 /通過屬性名獲取屬性的值 var bjElement=document.getElementById(bj); var attributeValue=eduElement.getAttribute(name); alert(attributeValue +a

38、ttributeValue); /通過屬性名獲取屬性的節(jié)點 var bjNode=eduElement.getAttributeNode(name); alert(eduNode.nodeValue); alert(eduNode.nodeType); alert(eduNode.nodeName);杭州華育設(shè)置屬性節(jié)點設(shè)置屬性節(jié)點lsetAttribute()將給定元素節(jié)點添加一個新的屬性值或改變它的現(xiàn)有屬性的值添加一個新的屬性值或改變它的現(xiàn)有屬性的值。 element.setAttribute(attributeName,attributeValue);element.setAttribu

39、te(attributeName,attributeValue);屬性的名字和值必須以字符串的形式傳遞給此方法如果這個屬性已經(jīng)存在，它的值將被刷新；如果這個屬性已經(jīng)存在，它的值將被刷新；如果不存在，如果不存在，setAttribute()setAttribute()方法將先創(chuàng)建它再為其賦值方法將先創(chuàng)建它再為其賦值。 杭州華育設(shè)置屬性節(jié)點設(shè)置屬性節(jié)點 北京 /獲取元素的引用 var bjElement=document.getElementById(bj); /設(shè)置屬性值 bjElement.setAttribute(name,beijing); /獲取設(shè)置的屬性值 var nameValue=

40、bjElement.getAttribute(name); alert(nameValue +nameValue);杭州華育創(chuàng)建新元素節(jié)點lcreateElement()createElement()按照給定的標(biāo)簽名創(chuàng)建一個新的元素節(jié)點元素節(jié)點。方法只有一個參數(shù)：將被創(chuàng)建的元素的名字，是一個字符串. var reference = document.createElement(element);var reference = document.createElement(element);方法的返回值：是一個指向新建節(jié)點的引用指針是一個指向新建節(jié)點的引用指針。返回值是一個元返回值是一個元素節(jié)點

41、素節(jié)點，所以它的 nodeType 屬性值等于 1。新元素節(jié)點不會自動添加到文檔里新元素節(jié)點不會自動添加到文檔里，新節(jié)點沒有 nodeParent 屬性，它只是一個存在于 JavaScript 上下文的對象.var pElement = document.createElement(p);var pElement = document.createElement(p);杭州華育設(shè)置屬性節(jié)點設(shè)置屬性節(jié)點l /創(chuàng)建一個新的元素l var pElement=document.createElement(li);l /設(shè)置屬性值l pElement.setAttribute(id,pid);l l /

42、獲取父元素l var loveElement=document.getElementById(love);l /在父元素中增加子元素lloveElement.appendChild(pElement);l /通過id獲取剛創(chuàng)建的元素l var pidElement=document.getElementById(pid);l alert(pidElement.getAttribute(id);杭州華育創(chuàng)建新文本節(jié)點創(chuàng)建新文本節(jié)點 lcreateTextNode()createTextNode()創(chuàng)建一個包含著給定文本的新文本節(jié)點。這個方法的返回值是一個指向新建文本節(jié)點引用指針。 var tex

43、tNode = document.createTextNode(text);var textNode = document.createTextNode(text);方法只有一個參數(shù)：新建文本節(jié)點所包含的文本字符串方法的返回值：是一個指向新建節(jié)點的引用指針。它是一個文本節(jié)點一個文本節(jié)點，所以它的 nodeType 屬性等于 3.新元素節(jié)點不會自動添加到文檔里，新節(jié)點沒有 nodeParent 屬性 var pElementText=document.createElement(li); var textElement=document.createTextNode(南京); pElementT

44、ext.appendChild(textElement);杭州華育插入節(jié)點插入節(jié)點(1)(1)lappendChild()為給定元素增加一個子節(jié)點： var newreference = element.appendChild(newChild).var newreference = element.appendChild(newChild). 給定子節(jié)點 newChild 將成為給定元素節(jié)點 element 的最后一個子節(jié)點最后一個子節(jié)點。方法的返回值是一個指向新增子節(jié)點的引用指針。該方法通常與通常與 createElement() createTextNode() createElemen

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

46、nodeValue; alert(textValue);杭州華育練習(xí)練習(xí)問題: 在id=edu下增加大專杭州華育插入節(jié)點插入節(jié)點(2)(2)linsertBefore()insertBefore()把一個給定節(jié)點插入到一個給定元素節(jié)點的給定子節(jié)點的前面前面 var reference = var reference = elementelement.insertBefore(newNode,targetNode);.insertBefore(newNode,targetNode); 節(jié)點 newNode 將被插入到元素節(jié)點 element 中并出現(xiàn)在節(jié)點 targetNode 的前面.節(jié)點節(jié)點

47、 targetNode targetNode 必須是必須是 element element 元素的一個子節(jié)點元素的一個子節(jié)點。該方法通常與 createElement() 和 createTextNode() 配合使用 北京北京 上海上海 /獲取父節(jié)點獲取父節(jié)點 var parentCityNode=document.getElementById(city); /獲取子節(jié)點獲取子節(jié)點 var beijingNode=document.getElementById(beijing); var shanghaiNode=document.getElementById(shanghai); /插入插

48、入 parentCityNode.insertBefore(shanghaiNode,beijingNode);杭州華育插入節(jié)點插入節(jié)點(2)(2) 北京北京 /獲取父節(jié)點獲取父節(jié)點 var parentCityNode=document.getElementById(city); /獲取子節(jié)點獲取子節(jié)點 var beijingNode=document.getElementById(beijing); /創(chuàng)建節(jié)點創(chuàng)建節(jié)點newShanghaiNode var newShanghaiNode=document.createElement(li); /創(chuàng)建創(chuàng)建newShanghaiNode節(jié)點的

49、文本節(jié)點節(jié)點的文本節(jié)點 var newTextNode=document.createTextNode(上海上海);/在創(chuàng)建的節(jié)點上增加文本在創(chuàng)建的節(jié)點上增加文本 newShanghaiNode.appendChild(newTextNode); /插入節(jié)點插入節(jié)點 parentCityNode.insertBefore(newShanghaiNode,beijingNode);杭州華育插入節(jié)點插入節(jié)點(3)(3)lDOM 沒有提供 insertAfter() 方法function insertAfter(newElement,targetElement) /獲取目標(biāo)元素的父節(jié)點獲取目標(biāo)元素的

50、父節(jié)點var parentElement=targetElement.parentNode; /如果目標(biāo)元素是最后一個元素如果目標(biāo)元素是最后一個元素,則新元素插入到目標(biāo)元素的后面則新元素插入到目標(biāo)元素的后面if(parentElement.lastChild=targetElement) parentElement.appendChild(newElement);else/如果目標(biāo)元素不是最后一個元素如果目標(biāo)元素不是最后一個元素,則新元素插入到目標(biāo)元素的的則新元素插入到目標(biāo)元素的的 /下一個兄弟節(jié)點的前面下一個兄弟節(jié)點的前面,即目標(biāo)元素的后面即目標(biāo)元素的后面 parentElement.ins

51、ertBefore(newElement,targetElement.nextSibling); 杭州華育刪除節(jié)點刪除節(jié)點lremoveChild()從一個給定元素里刪除一個子節(jié)點 var reference = element.removeChild(node);var reference = element.removeChild(node);返回值是一個指向已被刪除的子節(jié)點的引用指針。某個節(jié)點被某個節(jié)點被removeChild()removeChild()方法刪除時方法刪除時, ,這個節(jié)點所包含的所有子節(jié)點將同時被刪除這個節(jié)點所包含的所有子節(jié)點將同時被刪除。如果想刪除某個節(jié)點，但不知道它

52、的父節(jié)點是哪一個，如果想刪除某個節(jié)點，但不知道它的父節(jié)點是哪一個，parentNode parentNode 屬性可以幫忙。屬性可以幫忙。 北京北京 var ulElement=document.getElementById(city); var liElement=document.getElementById(beijing); ulElement.removeChild(liElement); 北京北京 var liElement=document.getElementById(beijing); var parentElement=liElement.parentNode; paren

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

54、。childNodes childNodes 屬性是一個只讀屬性屬性是一個只讀屬性。杭州華育獲取第一個子節(jié)點獲取第一個子節(jié)點lfirstChild：該屬性返回一個給定元素節(jié)點的第一個子節(jié)點，返回這個節(jié)點對象的指針。 var reference = node.firstChild;var reference = node.firstChild;文本節(jié)點和屬性節(jié)點都不可能包含任何子節(jié)點，所以它們的 firstChild 屬性永遠(yuǎn)會返回 null。某個元素的 firstChild 屬性等價于這個元素的 childNodes 節(jié)點集合中的第一個節(jié)點，即： var reference = node.ChildNodes0;firstChild 屬性是一個只讀屬性只讀屬性。杭州華育獲取最后一個子節(jié)點獲取最后一個子節(jié)點llastChild：對應(yīng) firstChild 的一個屬性。lnextSibling: 返回一個給定節(jié)點的下一個兄弟節(jié)點