成都傳智播客 cd.itcast.cn 成都傳智播客-助你成為高薪程序員ppt課件

1、成都傳智播客 cd.itcast成都傳智播客成都傳智播客- -助他成為高薪程序員助他成為高薪程序員1 1、20202020年年7 7月，傳智播客在成都設(shè)立分中心傳智播客成都分中月，傳智播客在成都設(shè)立分中心傳智播客成都分中心，心，EasyJFEasyJF開源開創(chuàng)人蔡世友教師任首席講師，開源開創(chuàng)人蔡世友教師任首席講師，7 7月月8 8日，成都傳日，成都傳智播客智播客JavaEE+3GJavaEE+3G就業(yè)班第一期正式開課。就業(yè)班第一期正式開課。2 2、20202020年年9 9月，成都傳智播客推出先就業(yè)后付款，畢業(yè)后沒有從月，成都傳智播客推出先就業(yè)后付款，畢業(yè)后沒有從事軟件開發(fā)、月薪未達(dá)指定數(shù)額，

2、那么退還全部學(xué)費的優(yōu)惠政策，事軟件開發(fā)、月薪未達(dá)指定數(shù)額，那么退還全部學(xué)費的優(yōu)惠政策，廣受學(xué)員好評。廣受學(xué)員好評。3 3、20202020年年1111月，第一期學(xué)員畢業(yè)，在僅一個月的時間里，全部月，第一期學(xué)員畢業(yè)，在僅一個月的時間里，全部學(xué)員順利就業(yè)任務(wù)地為成都，如愿走上軟件開發(fā)工程師的崗位學(xué)員順利就業(yè)任務(wù)地為成都，如愿走上軟件開發(fā)工程師的崗位，月薪平均，月薪平均30003000以上，有個別學(xué)員甚至拿到以上，有個別學(xué)員甚至拿到4K4K、K K。4 4、20202020年年2 2月，成都傳智攜手月，成都傳智攜手CSDNCSDN推出推出“黑馬訓(xùn)練營課程，并黑馬訓(xùn)練營課程，并作如下承諾：作如下承諾：

3、“不用花一分錢即可入學(xué)、不就業(yè)不還學(xué)費、就業(yè)不做不用花一分錢即可入學(xué)、不就業(yè)不還學(xué)費、就業(yè)不做軟件開發(fā)不還學(xué)費，讓學(xué)員軟件開發(fā)不還學(xué)費，讓學(xué)員“就業(yè)后靠本人的才干逐漸歸還學(xué)費就業(yè)后靠本人的才干逐漸歸還學(xué)費。成都傳智播客 cd.itcastJavascriptJavascript加強加強 講師：蔡世友講師：蔡世友 :caishiyousina 成都傳智播客 cd.itcast閱讀器的對象樹l1. navigatorl 2. Windowdocument文檔對象frame 框架對象location 位置對象history 歷史對象links 鏈接對象archors 錨對象forms 表單對象ima

4、ges 圖片對象成都傳智播客 cd.itcastwindow對象常用方法lalert信息 ： 音訊框lprompt提示信息,默許值： 規(guī)范輸入框lconfirm ： 確認(rèn)框lopen ： 翻開一個新窗口lclose ： 封鎖窗口成都傳智播客 cd.itcastDocument對象Document對象：能反映當(dāng)前頁面的各種屬性。對象：能反映當(dāng)前頁面的各種屬性。Document對象的常用屬性對象的常用屬性 title:顯示文章的標(biāo)題。顯示文章的標(biāo)題。 bgColor:顯示頁面的背風(fēng)光。顯示頁面的背風(fēng)光。 fgColor:顯示頁面的前風(fēng)光。顯示頁面的前風(fēng)光。Document對象的常用方法：對象的常用

5、方法： write:在頁面中輸出文本。在頁面中輸出文本。 writeln:在頁面中輸出文本，并自動換行。在頁面中輸出文本，并自動換行。成都傳智播客 cd.itcastForm表單對象l訪問表單的方式訪問表單的方式:ldocument.formsnl document.表單名字表單名字llll成都傳智播客 cd.itcastForm表單屬性屬屬 性性對應(yīng)的對應(yīng)的HTML標(biāo)記標(biāo)記說說 明明actionactionfrom action= 表單提交的目的地址表單提交的目的地址methodmethodform method= 表單提交方式表單提交方式namenameform name= 表單名稱表單名

6、稱成都傳智播客 cd.itcastjavaScript定義函數(shù)的三種方式l正常方法正常方法lfunction printmsgl document.writemsg;l成都傳智播客 cd.itcastjavaScrip定義函數(shù)的三種方式l函數(shù)直接量定義函數(shù)函數(shù)直接量定義函數(shù)l /運用函數(shù)直接量的方式定義函數(shù)運用函數(shù)直接量的方式定義函數(shù)l var result=functiona,breturn a+b;l l /調(diào)用運用函數(shù)直接量定義的函數(shù)調(diào)用運用函數(shù)直接量定義的函數(shù)l var sum=result7,8;l alertsum; l 注注:函數(shù)直接量是一個表達(dá)式，它可以定函數(shù)直接量是一個表達(dá)式

7、，它可以定義匿名函數(shù)義匿名函數(shù) 成都傳智播客 cd.itcastjavaScrip定義函數(shù)的三種方式l構(gòu)造函數(shù)方法構(gòu)造函數(shù)方法 new Function;l /構(gòu)造函數(shù)方式定義構(gòu)造函數(shù)方式定義javascript函數(shù)函數(shù) 留留意意Function中的中的F大寫大寫l var add=new Functiona,b,return a+b;l /調(diào)用上面定義的調(diào)用上面定義的add函數(shù)函數(shù)l var sum=add3,4;l alertsum;l 注注:接受恣意多個字符串參數(shù)，最后一接受恣意多個字符串參數(shù)，最后一個參數(shù)是函數(shù)體。個參數(shù)是函數(shù)體。l 假設(shè)只傳一個字符串，那么其就是假設(shè)只傳一個字符串，那

8、么其就是函數(shù)體。函數(shù)體。成都傳智播客 cd.itcastDOMDOMlDOM ：DOM是是Document Object Model文檔對象模型的縮寫。根據(jù)文檔對象模型的縮寫。根據(jù)W3C DOM規(guī)范規(guī)范,DOM是一種與閱讀器，平臺，言語無關(guān)的接口，使得是一種與閱讀器，平臺，言語無關(guān)的接口，使得他可以訪問頁面其他的規(guī)范組件他可以訪問頁面其他的規(guī)范組件l D：文檔：文檔 html 文檔文檔 或或 xml 文檔文檔l O：對象：對象 document 對象的屬性和方法對象的屬性和方法l M：模型：模型 l l DOM 是針對是針對xmlhtml的基于樹的的基于樹的API。l DOM樹樹:節(jié)點節(jié)點no

9、de的層次。的層次。l DOM 把一個文檔表示為一棵家譜樹父，子，兄弟把一個文檔表示為一棵家譜樹父，子，兄弟l DOM定義了定義了Node的接口以及許多種節(jié)點類型來表示的接口以及許多種節(jié)點類型來表示XML節(jié)點的多個節(jié)點的多個方面方面成都傳智播客 cd.itcastDOM的構(gòu)造成都傳智播客 cd.itcastDOM的構(gòu)造成都傳智播客 cd.itcast節(jié)點及其類型節(jié)點節(jié)點 * 由構(gòu)造圖中我們可以看到，整個文檔就是一個文檔節(jié)點。由構(gòu)造圖中我們可以看到，整個文檔就是一個文檔節(jié)點。 * 而每一個而每一個HMTL標(biāo)簽都是一個元素節(jié)點。標(biāo)簽都是一個元素節(jié)點。 * 標(biāo)簽中的文字那么是文本節(jié)點。標(biāo)簽中的文字那

10、么是文本節(jié)點。 * 標(biāo)簽的屬性是屬性節(jié)點。標(biāo)簽的屬性是屬性節(jié)點。 * 一切都是節(jié)點一切都是節(jié)點節(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)系 北京傳智播客教育 itcastNODE接口的特性和方法特性特性/方法方法類型類型/返回類型返回類型說說 明明nodeNameString節(jié)點

11、的名字；根據(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é)點就是最后一個兄弟節(jié)點，那么該值為n

12、ullhasChildNodesBoolean當(dāng)childNodes包含一個或多個節(jié)點時，返回真attributesNamedNodeMap包含了代表一個元素的特性的Attr對象；僅用于Element節(jié)點appendChildnodeNode將node添加到childNodes的末尾removeChildnodeNode從childNodes中刪除nodereplaceChildnewnode, oldnodeNode將childNodes中的oldnode交換成newnodeinsertBeforenewnode, refnodeNode在childNodes中的refnode之前插入new

13、node成都傳智播客 cd.itcast查找元素節(jié)點lgetElementByIdgetElementById l 尋覓一個有著給定尋覓一個有著給定 id id 屬性值的元素，前往值是一個有著給定屬性值的元素，前往值是一個有著給定 id id 屬性值的元素節(jié)點。假設(shè)不存在這樣的元素，它前往屬性值的元素節(jié)點。假設(shè)不存在這樣的元素，它前往 null. null.lvar oElement = document.getElementById var oElement = document.getElementById sID sID l 該方法只能用于該方法只能用于 document documen

14、t 對象對象 function test var usernameElement=document.getElementById“tid; /獲取元素的值 alertusernameElement.value: +usernameElement.value /獲取元素的類型 alertusernameElement.type: +usernameElement.type成都傳智播客 cd.itcast查找元素節(jié)點getElementsByName尋覓有著給定尋覓有著給定name屬性的一切元素，這個方法將前往一個節(jié)點集合，這個集合可以屬性的一切元素，這個方法將前往一個節(jié)點集合，這個集合可以當(dāng)作一

15、個數(shù)組來處置。這個集合的當(dāng)作一個數(shù)組來處置。這個集合的 length 屬性等于當(dāng)前文檔里有著給定屬性等于當(dāng)前文檔里有著給定name屬性的一切元素的總個數(shù)。屬性的一切元素的總個數(shù)。 function test var tnameArray=document.getElementsByNametname; alerttnameArray.length; forvar i=0;itnameArray.length;i+ window.alerttnameArrayi.value; 成都傳智播客 cd.itcast查找元素節(jié)點 /該方法前往是數(shù)組類型 var usernameElements=docu

16、ment.getElementsByNameusername; for var i = 0; i usernameElements.length; i+ /獲取元素的類型 /alertusernameElementsi.type /獲取元素value的值 /alertusernameElementsi.value; /采用函數(shù)直接量的方法 usernameElementsi.onchange = function alertthis.value; 成都傳智播客 cd.itcast查找元素節(jié)點lgetElementsByTagNamel尋覓有著給定標(biāo)簽名的一切元素，這個方法將前往一個節(jié)點集合，這

17、個集尋覓有著給定標(biāo)簽名的一切元素，這個方法將前往一個節(jié)點集合，這個集合可以當(dāng)作一個數(shù)組來處置。這個集合的合可以當(dāng)作一個數(shù)組來處置。這個集合的 length 屬性等于當(dāng)前文檔里有屬性等于當(dāng)前文檔里有著給定標(biāo)簽名的一切元素的總個數(shù)。著給定標(biāo)簽名的一切元素的總個數(shù)。l var elements = document.getElementsByTagNametagName;l var elements = element.getElementsByTagNametagName;l該方法不用非得用在整個文檔上。它也可以用來在某個特定元素的子節(jié)點該方法不用非得用在整個文檔上。它也可以用來在某個特定元素的子

18、節(jié)點當(dāng)中尋覓有著給定標(biāo)簽名的元素。當(dāng)中尋覓有著給定標(biāo)簽名的元素。l var container = document.getElementById“sid;l var elements = container.getElementsByTagName“p;l alertelements .length;成都傳智播客 cd.itcast查找元素節(jié)點 var inputElements=document.getElementsByTagNameinput; forvar i=0;iinputElements.length;i+ if inputElements.type != submit inp

19、utElementsi.onchange = function alertthis.value ; var selectElements=document.getElementsByTagNameselect; for var i = 0; i selectElements.length; i+ selectElementsi.onchange=function alertthis.value; 成都傳智播客 cd.itcast查找元素節(jié)點 var inputElements=document.getElementsByTagNameinput; forvar i=0;iinputElemen

20、ts.length;i+ if inputElements.type != submit inputElementsi.onchange = function alertthis.value ; var selectElements=document.getElementsByTagNameselect; for var i = 0; i selectElements.length; i+ selectElementsi.onchange=function alertthis.value; 成都傳智播客 cd.itcast查找元素節(jié)點 var textareaElements=document

21、.getElementsByTagNametextarea; for var i = 0; i textareaElements.length; i+ textareaElementsi.onchange = function alertthis.value; ; 成都傳智播客 cd.itcastDOM 屬性 - nodeNamel文檔里的每個節(jié)點都有以下屬性。lnodeName:一個字符串，其內(nèi)容是給定節(jié)點的名字。l var name = node.nodeName;l * 假設(shè)節(jié)點是元素節(jié)點，nodeName前往這個元素的稱號l * 假設(shè)是屬性節(jié)點，nodeName前往這個屬性的稱號l *

22、 假設(shè)是文本節(jié)點，nodeName前往一個內(nèi)容為#text 的字符串 l注:nodeName 是一個只讀屬性。成都傳智播客 cd.itcastDOM 屬性 - nodeTypelnodeType：前往一個整數(shù)，這個數(shù)值代表著給定節(jié)點的類型。lnodeType 屬性前往的整數(shù)值對應(yīng)著 12 種節(jié)點類型,常用的有三種：lNode.ELEMENT_NODE -1 - 元素節(jié)點lNode.ATTRIBUTE_NODE -2 - 屬性節(jié)點lNode.TEXT_NODE -3 - 文本節(jié)點lnodeType 是個只讀屬性成都傳智播客 cd.itcastDOM 屬性 - nodeValuelnodeValu

23、e：前往給定節(jié)點的當(dāng)前值字符串l 假設(shè)給定節(jié)點是一個屬性節(jié)點，前往值是這個屬性的值。l 假設(shè)給定節(jié)點是一個文本節(jié)點，前往值是這個文本節(jié)點的內(nèi)容。l 假設(shè)給定節(jié)點是一個元素節(jié)點，前往值是 nulll nodeValue 是一個 讀/寫 屬性，但不能對元素節(jié)點的 nodeValue 屬性設(shè)置值，l 但可以為文本節(jié)點的 nodeValue 屬性設(shè)置一個值。l var li = document.getElementById“l(fā)i;l ifli.firstChild.nodeType = 3l li.firstChild.nodeValue = “國慶60年;成都傳智播客 cd.itcast元素節(jié)點/

24、測試元素節(jié)點,輸出節(jié)點稱號,節(jié)點的類型,節(jié)點的值 var liElements=document.getElementsByTagNameli; forvar i=0;iliElements.length;i+ alertliElementsi.nodeName; alertliElementsi.nodeType; aler成都傳智播客 cd.itcast文本節(jié)點 /測試元素節(jié)點,輸出節(jié)點稱號,節(jié)點的類型,節(jié)點的值 var liElements=document.getElementsByTagNameli; forvar i=0;iliElements.length;i+ alertliE

25、lementsi.childNodes0.nodeName; alertliElementsi.childNodes0.nodeType; alertliElementsi.childNodes0.nodeValue; liElementsi.childNodes0.nodeValue=南京; alertliElementsi.childNodes0.nodeValue; /另一種讀取方法 alertliElementsi.firstChild.nodeName; alertliElementsi.firstChild.nodeType; alertliElementsi.firstChild

26、.nodeValue; 成都傳智播客 cd.itcast查看能否存在子節(jié)點lhasChildNodesl該方法用來檢查一個元素能否有子節(jié)點，前往值是 true 或 false.l var booleanValue = element.hasChildNodes;l文本節(jié)點和屬性節(jié)點不能夠再包含任何子節(jié)點，所以對這兩類節(jié)點運用 hasChildNodes 方法的前往值永遠(yuǎn)是 false.l假設(shè) hasChildNodes 方法的前往值是 false，那么 childNodes,firstChild,lastChild 將是空數(shù)組和空字符串。 var selectElements=document

27、.getElementsByTagNameselect; alertselectElements0.hasChildNodesvar inputElements=document.getElementsByTagNameinput;forvar i=0;iinputElements.length;i+ alertinputElementsi.hasChildNodes;成都傳智播客 cd.itcast遍歷節(jié)點樹lchildNodes：前往一個數(shù)組，這個數(shù)組由給定元素節(jié)點的子節(jié)點構(gòu)成：lvar nodeList = node.childNodes;l文本節(jié)點和屬性節(jié)點都不能夠再包含任何子節(jié)點，所

28、以它們的 ChildNodes 屬性永遠(yuǎn)會前往一個空數(shù)組。l假想象知道某個元素有沒有子節(jié)點，可以用 hasChildNodes 方法。l假想象知道某個元素有多少個子節(jié)點，可以用 childNodes 數(shù)組的 length 屬性。lchildNodes 屬性是一個只讀屬性。成都傳智播客 cd.itcast獲取第一個子節(jié)點lfirstChild：該屬性前往一個給定元素節(jié)點的第一個子節(jié)點，前往這個節(jié)點對象的指針。l var reference = node.firstChild;l文本節(jié)點和屬性節(jié)點都不能夠包含任何子節(jié)點，所以它們的 firstChild 屬性永遠(yuǎn)會前往 null。l某個元素的 fi

29、rstChild 屬性等價于這個元素的 childNodes 節(jié)點集合中的第一個節(jié)點，即：l var reference = node.ChildNodes0;lfirstChild 屬性是一個只讀屬性。成都傳智播客 cd.itcast獲取最后一個子節(jié)點llastChild：對應(yīng) firstChild 的一個屬性。lnextSibling: 前往一個給定節(jié)點的下一個兄弟節(jié)點。lparentNode：前往一個給定節(jié)點的父節(jié)點。lparentNode 屬性前往的節(jié)點永遠(yuǎn)是一個元素節(jié)點，由于只需元素節(jié)點才有能夠包含子節(jié)點。ldocument 節(jié)點的沒有父節(jié)點。lpreviousSibling：前往一

30、個給定節(jié)點的上一個兄弟節(jié)點成都傳智播客 cd.itcast練習(xí)問題: 打印 明天休憩 利用兩種方法 提示:運用firstChild lastChild childNodes成都傳智播客 cd.itcast練習(xí)問題:打印出 id=“bj 該節(jié)點的一切子節(jié)點的nodeName, nodeType, nodeValue同時打印文本值 北京 海淀 奧運 成都傳智播客 cd.itcast練習(xí)問題: 輸出一切select元素下的一切option元素中對應(yīng)的文本內(nèi)容 例如:中專 輸出-中專成都傳智播客 cd.itcast查找屬性節(jié)點lgetAttribute l前往一個給定元素的一個給定屬性節(jié)點的值lvar

31、 attributeValue = element.getAttributeattributeName;l給定屬性的名字必需以字符串的方式傳送給該方法。l給定屬性的值將以字符串的方式前往，假設(shè)給定屬性不存在，getAttribute 將前往一個空字符串.l經(jīng)過屬性獲取屬性節(jié)點l getAttributeNode屬性的稱號-Nodel l 成都傳智播客 cd.itcast查找屬性節(jié)點 北京 /經(jīng)過屬性名獲取屬性的值 var bjElement=document.getElementByIdbj; var attributeValue=eduElement.getAttributename; al

32、ertattributeValue +attributeValue; /經(jīng)過屬性名獲取屬性的節(jié)點 var bjNode=eduElement.getAttributeNodename; alerteduNode.nodeValue; alerteduNode.nodeType; alerteduNode.nodeName; 成都傳智播客 cd.itcast設(shè)置屬性節(jié)點lsetAttributel將給定元素節(jié)點添加一個新的屬性值或改動它的現(xiàn)有屬性的值。l element.setAttributeattributeName,attributeValue;l屬性的名字和值必需以字符串的方式傳送給此方

33、法l假設(shè)這個屬性曾經(jīng)存在，它的值將被刷新；l假設(shè)不存在，setAttribute方法將先創(chuàng)建它再為其賦值。l l 成都傳智播客 cd.itcast設(shè)置屬性節(jié)點 北京 /獲取元素的援用 var bjElement=document.getElementByIdbj; /設(shè)置屬性值 bjElement.setAttributename,; /獲取設(shè)置的屬性值 var nameValue=bjElement.getAttributename; alertnameValue +nameValue;成都傳智播客 cd.itcast創(chuàng)建新元素節(jié)點創(chuàng)建新元素節(jié)點lcreateElementcreateEle

34、mentl按照給定的標(biāo)簽名創(chuàng)建一個新的元素節(jié)點。方法按照給定的標(biāo)簽名創(chuàng)建一個新的元素節(jié)點。方法只需一個參數(shù)：將被創(chuàng)建的元素的名字，是一個只需一個參數(shù)：將被創(chuàng)建的元素的名字，是一個字符串字符串. .l var reference = document.createElement var reference = document.createElementelementelement; ;l方法的前往值：是一個指向新建節(jié)點的援用指針方法的前往值：是一個指向新建節(jié)點的援用指針。前往值是一個元素節(jié)點，所以它的。前往值是一個元素節(jié)點，所以它的 nodeType nodeType 屬性值等于屬性值等于 1

35、 1。l新元素節(jié)點不會自動添加到文檔里，新節(jié)點沒有新元素節(jié)點不會自動添加到文檔里，新節(jié)點沒有 nodeParent nodeParent 屬性，它只是一個存在于屬性，它只是一個存在于 JavaScript JavaScript 上下文的對象上下文的對象. .lvar pElement = document.createElementvar pElement = document.createElementpp; ;l l 成都傳智播客 cd.itcast設(shè)置屬性節(jié)點 /創(chuàng)建一個新的元素 var pElement=document.createElementli; /設(shè)置屬性值 pElement

36、.setAttributeid,pid; /獲取父元素 var loveElement=document.getElementByIdlove; /在父元素中添加子元素loveElement.appendChildpElement; /經(jīng)過id獲取剛創(chuàng)建的元素 var pidElement=document.getElementByIdpid; alertpidElement.getAttributeid;成都傳智播客 cd.itcast創(chuàng)建新文本節(jié)點lcreateTextNodecreateTextNodel創(chuàng)建一個包含著給定文本的新文本節(jié)點創(chuàng)建一個包含著給定文本的新文本節(jié)點。這個方法的前往

37、值是一個指向新建文。這個方法的前往值是一個指向新建文本節(jié)點援用指針。本節(jié)點援用指針。l var textNode = var textNode = document.createTextNodedocument.createTextNodetexttext; ;l方法只需一個參數(shù)：新建文本節(jié)點所包方法只需一個參數(shù)：新建文本節(jié)點所包含的文本字符串含的文本字符串l方法的前往值：是一個指向新建節(jié)點的方法的前往值：是一個指向新建節(jié)點的援用指針。它是一個文本節(jié)點，所以它援用指針。它是一個文本節(jié)點，所以它的的 nodeType nodeType 屬性等于屬性等于 3. 3.l新元素節(jié)點不會自動添加到文檔里

38、，新新元素節(jié)點不會自動添加到文檔里，新節(jié)點沒有節(jié)點沒有 nodeParent nodeParent 屬性屬性l l var var pElementText=document.createElementpElementText=document.createElementlili; ;l var var textElement=document.createTextNodetextElement=document.createTextNode 南京南京 ; ;l pElementText.appendChild pElementText.appendChildtextElementtextEl

39、ement; ;成都傳智播客 cd.itcast插入節(jié)點1lappendChildl為給定元素添加一個子節(jié)點： l var newreference = element.appendChildnewChild. l 給定子節(jié)點 newChild 將成為給定元素節(jié)點 element 的最后一個子節(jié)點。l方法的前往值是一個指向新增子節(jié)點的援用指針。l該方法通常與 createElement createTextNode 配合運用l新節(jié)點可以被追加給文檔中的任何一個元素 var newliElement=document.createElementli; var textNode=document.

40、createTextNode北京北京; newliElement.appendChildtextNode; document.body.appendChildnewliElement; var liElement=document.getElementsByTagNameli; var textValue=liElement0.firstChild.nodeValue; alerttextValue;成都傳智播客 cd.itcast練習(xí)l問題: 在id=edu下添加大專成都傳智播客 cd.itcast插入節(jié)點2linsertBeforeinsertBeforel把一個給定節(jié)點插入到一個給定元素

41、節(jié)點的給定子節(jié)點的前面把一個給定節(jié)點插入到一個給定元素節(jié)點的給定子節(jié)點的前面l var reference = element.insertBeforevar reference = element.insertBeforenewNode,targetNodenewNode,targetNode; ;l 節(jié)點節(jié)點 newNode newNode 將被插入到元素節(jié)點將被插入到元素節(jié)點 element element 中并出如今節(jié)點中并出如今節(jié)點 targetNode targetNode 的前面的前面. .l節(jié)點節(jié)點 targetNode targetNode 必需是必需是 element el

42、ement 元素的一個子節(jié)點。元素的一個子節(jié)點。l該方法通常與該方法通常與 createElementcreateElement 和和 createTextNodecreateTextNode 配合配合運用運用 北京北京 上海上海 /獲取父節(jié)點獲取父節(jié)點 var parentCityNode=document.getElementByIdcity; /獲取子節(jié)點獲取子節(jié)點 var beijingNode=document.getElementById; var shanghaiNode=document.getElementByIdshanghai; /插入插入 parentCityNode.

43、insertBeforeshanghaiNode,beijingNode;成都傳智播客 cd.itcast插入節(jié)點2 北京 /獲取父節(jié)點 var parentCityNode=document.getElementByIdcity; /獲取子節(jié)點 var beijingNode=document.getElementById; /創(chuàng)建節(jié)點newShanghaiNode var newShanghaiNode=document.createElementli; /創(chuàng)建newShanghaiNode節(jié)點的文本節(jié)點 var newTextNode=document.createTextNode上海;

44、/在創(chuàng)建的節(jié)點上添加文本 newShanghaiNode.appendChildnewTextNode; /插入節(jié)點 parentCityNode.insertBeforenewShanghaiNode,beijingNode;成都傳智播客 cd.itcast插入節(jié)點3lDOM 沒有提供 insertAfter 方法function insertAfternewElement,targetElement /獲取目的元素的父節(jié)點獲取目的元素的父節(jié)點var parentElement=targetElement.parentNode; /假設(shè)目的元素是最后一個元素假設(shè)目的元素是最后一個元素,那么新

45、元素插入到目的元素的后面那么新元素插入到目的元素的后面ifparentElement.lastChild=targetElement parentElement.appendChildnewElement;else/假設(shè)目的元素不是最后一個元素假設(shè)目的元素不是最后一個元素,那么新元素插入到目的元素的的那么新元素插入到目的元素的的 /下一個兄弟節(jié)點的前面下一個兄弟節(jié)點的前面,即目的元素的后面即目的元素的后面 parentElement.insertBeforenewElement,targetElement.nextSibling; 成都傳智播客 cd.itcast刪除節(jié)點lremoveChil

46、dl從一個給定元素里刪除一個子節(jié)點l var reference = element.removeChildnode;l前往值是一個指向已被刪除的子節(jié)點的援用指針。l某個節(jié)點被removeChild方法刪除時,這個節(jié)點所包含的一切子節(jié)點將同時被刪除。 北京北京 var ulElement=document.getElementByIdcity; var liElement=document.getElementById; ulElement.removeChildliElement;l假想象刪除某個節(jié)點，但不知道它的父節(jié)點是哪一個，假想象刪除某個節(jié)點，但不知道它的父節(jié)點是哪一個，parentN

47、ode parentNode 屬性可以協(xié)助。屬性可以協(xié)助。 北京北京 var liElement=document.getElementById; var parentElement=liElement.parentNode; parentElement.removeChildliElement;成都傳智播客 cd.itcast交換節(jié)點lreplaceChildl把一個給定父元素里的一個子節(jié)點交換為另外一個子節(jié)點lvar reference = element.replaceChildnewChild,oldChild;l前往值是一個指向已被交換的那個子節(jié)點的援用指針。l假設(shè)被插入的子節(jié)點還有

48、子節(jié)點，那么那些子節(jié)點也被插入到目的節(jié)點中l(wèi) l 成都傳智播客 cd.itcast練習(xí)l問題:當(dāng)單擊北京這個節(jié)點時,北京這個節(jié)點被l 反恐精英交換成都傳智播客 cd.itcast交換節(jié)點的例子 /方法一/ var cityElement=document.getElementByIdcity;/ var loveElement=document.getElementByIdlove;/ var cityChildElement=document.getElementById;/ var loveChildElement=document.getElementByIdfankong;/ var

49、oldElement=cityElement.replaceChildloveChildElement,cityChildElement;/ loveElement.appendChildoldElement;/ alertoldElement.getAttributeid; var cityElement=document.getElementByIdcity; cityElement.onclick=function var cityChildElement=document.getElementById; var loveChildElement=document.getElementB

50、yIdfankong; var oldElement=cityElement.replaceChildloveChildElement,cityChildElement; loveElement.appendChildoldElement; alertoldElement.getAttributeid; 成都傳智播客 cd.itcastinnerHTML屬性l閱讀器幾乎都支持該屬性，但不是 DOM 規(guī)范的組成部分。linnerHTML 屬性可以用來讀，寫某給定元素里的 HTML 內(nèi)容。 var divElement=document.getElementByIdcity; divElement

51、.innerHTML=北京北京;成都傳智播客 cd.itcast顯示彈出窗口方案一l語法：語法：lvReturnValue = window . showModalDialog sURL,l vArguments , sFeatures l參數(shù)闡明：參數(shù)闡明： lsURL-必選參數(shù)必選參數(shù),用來指定對話框要顯示的文檔的用來指定對話框要顯示的文檔的URL。 lvArguments-可選參數(shù)，用來向?qū)υ捒騻魉蛥?shù)。傳可選參數(shù)，用來向?qū)υ捒騻魉蛥?shù)。傳送的參數(shù)類型不限，包括數(shù)組等。對話框經(jīng)過送的參數(shù)類型不限，包括數(shù)組等。對話框經(jīng)過window.dialogArguments來獲得傳送進(jìn)來的參數(shù)。來獲

52、得傳送進(jìn)來的參數(shù)。 lsFeatures-可選參數(shù)，用來描畫對話框的外觀等信息可選參數(shù)，用來描畫對話框的外觀等信息，可以運用一個或幾個，用分號，可以運用一個或幾個，用分號“;隔開。隔開。成都傳智播客 cd.itcast顯示彈出窗口方案二window.open window.opener 的用法的用法 window.opener 前往的是創(chuàng)建當(dāng)前窗口的那個窗口的前往的是創(chuàng)建當(dāng)前窗口的那個窗口的援用，比如點擊了援用，比如點擊了a.htm上的一個鏈接而翻開了上的一個鏈接而翻開了b.htm，然后我們計劃在然后我們計劃在b.htm上輸入一個值然后賦予上輸入一個值然后賦予a.htm上的上的一個一個id為為

53、“name的的text中，就可以寫為：中，就可以寫為： window.opener.document.getElementByIdname.value = 輸入的數(shù)據(jù)輸入的數(shù)據(jù);成都傳智播客 cd.itcast練習(xí)練習(xí)1 1：成都傳智播客 cd.itcast練習(xí)練習(xí)2 2：l當(dāng) checkbox 節(jié)點有 checked 屬性時, 在 HTML 頁面上即表現(xiàn)為 被選中l(wèi)利用 setAttributechecked, checked; 實現(xiàn)選中, setAttributechecked,null; 實現(xiàn)不被選中l(wèi)也可以利用 document.getElementByIdcheckedAll_2.c

54、hecked = checked; 實現(xiàn)選中, l利用 document.getElementByIdcheckedAll_2.checked = null; 實現(xiàn)不被選中成都傳智播客 cd.itcast練習(xí)練習(xí)3 3：成都傳智播客 cd.itcast練習(xí)練習(xí)4 4：成都傳智播客 cd.itcast解析xml function parseXMLfilename var xmlDoc; try /Internet Explorer xmlDoc = new ActiveXObjectMicrosoft.XMLDOM; catch e try /Firefox, Mozilla, Opera, etc. xmlDoc = document.i