1、IT資訊交流網 WWW.IT315.ORGJavaScript基礎和加強(ECMA5核心+設計模式)IT資訊交流網 WWW.IT315.ORGJavaScript簡介javascript誕生于1995年，當時他的主要目的就是處理以前由服務器語言負責的一些輸入驗證操作。在javascript問世之前，必須把表單里的數據發送到服務器才能確定用戶是否沒有填寫某個必填域或者是輸入信息是否正確。IT資訊交流網 WWW.IT315.ORGJavascript課程大綱（一）第一講：初識Javascript javascript的組成部分 如何使用javascript第二講：基本概念 語法 變量 基本數據類型

2、 控制語句等第三講：引用類型 數組 數組ECMA5新特性 Object類型型應用 模擬高級語言對象（java 容器模擬） 數組的技巧（經典數組操作技巧） 其他引用類型（單體類型）IT資訊交流網 WWW.IT315.ORGJavascript課程大綱（二） 第四講：函數 函數概念 定義函數的三種方式 函數參數arguments對象 this對象 call和apply高級函數 執行環境概念 作用域鏈概念 javascript垃圾收集機制 塊級作用域 閉包函數IT資訊交流網 WWW.IT315.ORGJavascript課程大綱（三） 第五講：面向對象程序設計 類的創建 實例對象的三種方式 原型的概

3、念，為什么需要原型 原型常用方法 實現自己的原型擴展方法 簡單原型對象 原型對象的常用開發模式（組合、寄生、動態原型、穩妥對象） 深入繼承的解析（javascript繼承實現的關鍵解析） 常用三種繼承模式（原型繼承、借用構造函數繼承、混合繼承） 模擬extjs4.1底層繼承代碼IT資訊交流網 WWW.IT315.ORG第一講：初識Javascript 學習目標 了解javascript組成部分 認識javascript解析機制 如何使用javascriptIT資訊交流網 WWW.IT315.ORG第一講：1.1 初識Javascript javascript是一種專為與網頁交互兒設計的腳本語言

4、。由三部分組成： ECMAScript (ECMA-262定義) 提供核心語言功能 文檔對象模型（DOM）提供訪問和操作網頁內容的方法和接口 瀏覽器對象模型（BOM）提供與瀏覽器交互的方法和接口Javascript的這三個組成部分在當前五大主流瀏覽器中都得到了不同程度的支持（IE、FireFox、Chrome、Safari、Opera）?；舅械臑g覽器都大體上支持ECMAScript第三版。但是對于DOM和BOM的支持相比較而言則差很多。IT資訊交流網 WWW.IT315.ORG第一講：1.2 初識Javascript對JavaScript是一種可以與HTML標記語言混合使用的腳本語言，其編

5、寫的程序可以直接在瀏覽器中解釋執行。javascript是一種解釋型語言(預編譯、執行) Javascript的國際標準是ECMAScript. 語法、類型、語句、關鍵字、保留字、操作符、對象如何使用javascript？ 在HTML文檔中插入腳本語言可以使用標記 標記可以置于頁面任意位置，一般定義在標簽中標記屬性! type、src、defer、charsetIT資訊交流網 WWW.IT315.ORG第二講：基本概念 學習目標 認識變量（聲明、規則、全局變量、局部變量） 數據類型（基本類型、引用類型） 運算符、表達式、控制語句IT資訊交流網 WWW.IT315.ORG第二講： 2.1變量變量

6、 JavaScript 是一種弱類型的腳本語言 var c = 3；即變量的聲明(變量使用之前必須加var聲明，編程規范) 變量的命名規則! 1.變量命名必須以字母或是下標符號”_”或者”$”為開頭。 2.變量名長度不能超過255個字符。 3.變量名中不允許使用空格。 4.不用使用腳本語言中保留的關鍵字及保留符號作為變量名。 5.變量名區分大小寫。(javascript是區分大小寫的語言) 全局變量 在方法外部聲明的變量 方法內部，沒有加var關鍵字聲明的變量 局部變量 方法內部，使用var聲明的變量IT資訊交流網 WWW.IT315.ORG第二講： 2.2 數據類型ECMAScript中,數

7、據類型也分為基本類型和引用類型兩大類.基本數據類型：Number、Boolean、String、Undefined、Null Number：整數和小數(最高精度17位小數)、NaN、Infinity, -Infinity 注意：1.除10進制外，還可通過8進制和16進制的字面值來表示，如 070 表示56、0 xA表示10. 2.小數為浮點類型，if(a+b = 0.3) /不要做這樣的測試，因為 浮點數值最高精度是17位，而是0.300000000000000004. Undefined：表示變量聲明但未賦值. Null:表示一個空的對象引用(也就是賦值為null)引用類型：Object類型

8、 (比如對象、數組、RegExp、Date.)Typeof 操作符基本類型和引用類型的值 基本類型是按照值訪問的，因為可以操作保存在變量中的實際值 引用類型則是按引用去訪問的IT資訊交流網 WWW.IT315.ORG第二講：2.3 運算符運算符與表達式： 加減乘除、遞增(+)、遞減(-)、求余(%)變量的自動轉換 = 等同符：不會發生類型的自動轉化！ = 等值符：會發生類型自動轉化、自動匹配！在程序中還經常使用到擴展賦值運算符，如：+=，-=，*=，/=，%=等IT資訊交流網 WWW.IT315.ORG第二講：2.3 運算符在復雜的表達式中往往會綜合運用各種不同類型的運算符，而表達式的運算順序

9、有一定的規則：首先應按照運算符的優先次序從高到低的順序，其次，優先級相同的運算符按照事先約定的結合方向（從左向右或從右向左）進行。條件表達式的基本的語法是： （條件表達式1）？表達式2：表達式3IT資訊交流網 WWW.IT315.ORG第二講：2.4 控制語句基本上ECMAScript的控制語句和java一致if語句 if(條件)else if(條件).elseswitch 語句：switch (expression) case const1:語句塊1. default:.for (初始化部分；條件部分；更新部分) 語句塊 while(條件) 語句塊 do 語句塊 while(條件)break

10、語句是結束當前的循環，并把程序的控制權交給循環的下一條語句這里是結束循環，循環到此為止continue語句是結束當前的某一次循環，但是并沒有跳出整個的循環。 這里是結束一次循環，整個循環還在進行(label . with)IT資訊交流網 WWW.IT315.ORG第三講：引用類型學習目標 掌握數組的概念、特性、常用方法 掌握Object，學會使用對象 了解其他引用類型對象IT資訊交流網 WWW.IT315.ORG第三講：3.1 數組在ECMAScript中數組是非常常用的引用類型了。ECMAScript所定義的數組和其他語言中的數組有著很大的區別。那么首先要說的就是數組也是一種對象。特點： “

11、數組”即一組數據的集合。 js數組更加類似java的容器。長度可變，元素類型也可以不同！ 數組長度隨時可變！隨時可以修改！（length屬性）常用方法： push、pop shift、unshift splice、slice concat、join、sort、reverse等IT資訊交流網 WWW.IT315.ORG第三講：3.1 數組補充 對于ECMAscript5這個版本的Array新特性補充： 位置方法：indexOf lastIndexOf 迭代方法：every filter forEach some map 縮小方法：reduce reduceRightIT資訊交流網 WWW.IT3

12、15.ORG第三講：3.2 Object 我們目前為止大多數引用類型都是Object類型的實例，Object也是ECMAScript中使用最多的一種類型（就像java.lang.Object一樣，Object類型是所有它的實例的基礎）。 Object類型的創建方式、使用 對于Object類型應用for in 枚舉循環 Object每個實例都會具有下列屬性和方法： Constructor: 保存著用于創建當前對象的函數。（構造函數） hasOwnProperty(propertyName):用于檢測給定的屬性在當前對象實例中(而不是原型中)是否存在。 isPrototypeOf(Object):

13、 用于檢查傳入的對象是否是另外一個對象的原型。 propertyIsEnumerable(propertyName):用于檢查給定的屬性是否能夠使用for-in語句來枚舉。 toLocaleString()：返回對象的字符串表示。該字符串與執行環境的地區對應. toString():返回對象的字符串表示。 valueOf():返回對象的字符串、數值或布爾表示。IT資訊交流網 WWW.IT315.ORG第三講：3.2 Object (應用) 簡單實現JAVA中Map 利用js對象的特性，去掉數組中的重復項IT資訊交流網 WWW.IT315.ORG第三講：3.3 其他引用類型對象單體對象： Glo

14、bal對象（全局）這個對象不存在，無形的對象 其內部定義了一些方法和屬性：encodeURI 、encodeURIComponent、decodeURI、decodeURIComponent、eval、parseInt、parseFloat、isNaN、Escape、 unescape Math對象 內置的Math對象可以用來處理各種數學運算 可以直接調用的方法：Math.數學函數（參數） 求隨機數方法：Math.random(),產生 0，1) 范圍一個任意數Date對象 獲取當前時間的一系列詳細方法基本包裝類型：Boolean、String、Number和java的用法類似Function

15、類型、RegExp類型（以后學習）IT資訊交流網 WWW.IT315.ORG第四講：函數學習目標 了解函數的基本概念 函數的定義方式 函數的參數 this call、apply 執行環境、作用域鏈 垃圾收集、塊級作用域 closureIT資訊交流網 WWW.IT315.ORG第四講：4.1初識函數Function類型，即函數的類型。一個典型的JavaScript函數定義如下：function 函數名稱（參數表）函數執行部分：注意：參數列表直接寫形參名即可，不用寫var!return語句：return返回函數的返回值并結束函數運行 函數也可以看做數據來進行傳遞IT資訊交流網 WWW.IT315.

16、ORG第四講：4.2 定義函數三種定義函數的方式： function語句形式 函數直接量形式 通過Function構造函數形式定義函數比較三種方式定義的區別：IT資訊交流網 WWW.IT315.ORG第四講：4.2 示例1 效率方面 var d1 = new Date();var t1 = d1.getTime();for(var i =0 ; i 100000;i+)/function test1();/var test2 = new Function();var d2 = new Date();var t2 = d2.getTime();alert(t2 -t1); IT資訊交流網 WWW

17、.IT315.ORG第四講：4.2 示例2 解析順序 function f()return 1; / 函數1 alert(f();/返回值為4 說明第1個函數被第4個函數覆蓋var f = new Function(return 2;);/ 函數2 alert(f();/返回值為2 說明第4個函數被第2個函數覆蓋var f = function()return 3;/ 函數3 alert(f(); /返回值為3 說明第2個函數被第3個函數覆蓋function f()return 4; / 函數4 alert(f();/返回值為3 說明第4個函數被第3個函數覆蓋var f = new Funct

18、ion(return 5); / 函數5 alert(f();/返回值為5 說明第3個函數被第5個函數覆蓋var f = function()return 6 ;/ 函數6 alert(f();/返回值為6 說明第5個函數被第6個函數覆蓋IT資訊交流網 WWW.IT315.ORG第四講：4.2 示例3 作用域方面 var k = 1 ; function t1()var k = 2 ; /function test()return k ; /var test = function() return k;/var test = new Function(return k;);alert(test

19、();t1();IT資訊交流網 WWW.IT315.ORG第四講：4.3 函數的參數 函數的參數：arguments對象 arguments是表示函數的實際參數(與形參無關)callee函數（回調函數屬性）arguments對象的秘密屬性 callee屬性：這個屬性比較奇怪，他能返回arguments對象所屬的函數的引用，這相當于在自己的內部調用自己。用法：例如檢測函數傳遞的參數正確與否IT資訊交流網 WWW.IT315.ORG第四講：4.3 示例 關于程序的嚴謹性 function fact(num) if(num =1) return 1 ; else return num*fact(nu

20、m-1); 注 這是一個典型的遞歸實現階乘函數，雖然表面上看起來沒什么問題 是如果采用下面代碼就會導致程序錯誤var anotherFact = fact; fact = null; alert(anotherFact(4); /出錯！IT資訊交流網 WWW.IT315.ORG第四講：4.4 this this對象是在運行時基于函數的執行環境綁定的。在全局函數中，this等于window，而當函數被作為某個對象的方法調用時，this等于那個對象。 也就是說this關鍵字總是指代調用者。IT資訊交流網 WWW.IT315.ORG第四講：4.5 call、apply 每一個函數都包含兩個非繼承而來

21、的方法：call、apply。這倆個方法的用途都是在特定的作用域中調用函數，實際上等于設置函數體內this對象的值。 call、apply的用途之一就是傳遞參數，但事實上，它們真正強大的地方式能夠擴充函數賴以運行的作用域。 使用call（）、aplly（）來擴充作用域的最大好處就是對象不需要與方法有任何耦合關系。 call方法簡單的實現。IT資訊交流網 WWW.IT315.ORG第四講：4.6 執行環境、作用域鏈執行環境（execution context）是javascript中最為重要的一個概念。執行環境定義了變量或函數有權訪問的其他數據，決定了它們各自的行為。每一個執行環境都有一個與之關

22、聯的變量對象，環境中定義的所有變量和函數都保存在這個對象中。雖然我們的代碼無法訪問這個對象，但是解析器在處理數據時會在后臺執行它。全局執行環境是最外圍的一個執行環境。根據ECMScript實現所在的宿主環境不同，表示執行環境的對象也不一樣。每一個函數都有自己的執行環境。當執行流進一個函數時，函數的環境就會被推入一個環境棧中。而在函數執行之后，棧將其環境彈出，把控制權返還給之前的執行環境。當代碼在一個環境中執行時，會創建變量對象的一個作用域鏈（scope chain）。作用域鏈的用途，是保證對執行環境有權訪問的所有變量和函數的有序訪問。IT資訊交流網 WWW.IT315.ORG第四講：作用域鏈示

23、例var color1 = blue;function changeColor()var color2 = red;function swapColor()var color3 = color2; color2 = color1;color1 = color3;/這里可以訪問：color1、2、3/這里可以訪問color1、color2、但不能訪問color3swapColor();/這里只能訪問color1changeColor();IT資訊交流網 WWW.IT315.ORG第四講：4.7 垃圾收集、塊級作用域javascript是一門具有自動垃圾收集機制的編程語言。開發人員不必關心內存分配

24、和回收問題。 離開作用域的值將被自動標記為可以回收，因此將在垃圾收集期間被刪除。標記清除是目前主流的垃圾收集算法。這種算法的思想是給當前不使用的值加上標記，然后回收其內存。javascript里面沒有塊級作用域的概念，和C、JAVA等高級語言不同。所以在使用if、for時候要格外的小心。javascript模擬塊級作用域IT資訊交流網 WWW.IT315.ORGAptana簡介Aptana是一個非常強大是一個非常強大,開源開源,專注于專注于JavaScript的的Ajax開發開發IDE它的特性包括它的特性包括 1、JavaScript,JavaScript函數,HTML,CSS語言的Code

25、Assist功能 2、Outliner(大綱)：顯示JavaScript,HTML和CSS的代碼結構 3、支持 JavaScript，HTML，CSS代碼提示，包括JavaScript 自定函數 4、代碼語法錯誤提示。 5、支持Aptana UI自定義和擴展。 6、調試JavaScript 7、支持流行AJAX框架的 Code Assist功能:JQuery ext js dwrIT資訊交流網 WWW.IT315.ORGAptana插件在ecpise中安裝eclipse插件引入方法 1、在eclipse的plugins文件夾的同級目錄新建文件夾，命名為plugInsNew(自 定義); 2、打

26、開plugInsNew，在其中新建一個你插件容易記的文件夾，比如： aptana_update_024747(自定義) 3、打開aptana_update_024747 在其中新建一個eclipse(名字固定)文件夾； 4、打開eclipse文件夾，將你的features和plugins文件夾放入； 5、在plugInsNew同級目錄新建links文件夾（如有可省）； 6、在links文件夾里新建文件( 名字自定義,后綴名是 .link) 如：aptana_update_024747.link文件，并將插件路徑引入： 如 path=E:eclipsepluginsNewaptana_updat

27、e_024747 重新啟動eclipse即可！ 這樣引入插件的好處是可以方便的識別，加入或刪除你所需要的插件！IT資訊交流網 WWW.IT315.ORGAptana插件在MyEcpise中安裝myeclipse插件引入方法 1、在D盤新建文件夾pluginsNew(自定義) 2、打開pluginsNew ，在其中新建一個你插件容易記的文件夾，比如： aptana_update_024747 3、打開aptana_update_024747 在其中新建一個eclipse文件夾； 4、打開eclipse文件夾，將你的features和plugins文件夾放入； 5、找到myecplise的安裝目錄

28、D:Program FilesMyEclipse 6.5eclipselinks下的links文件夾 6、在links文件夾里新建文件如：aptana_update_024747.link文件，并將 插件路徑引入： 如 path=D:pluginsNewaptana_update_024747 重新啟動myeclipse即可！ IT資訊交流網 WWW.IT315.ORGAptana增加提示功能IT資訊交流網 WWW.IT315.ORGAptana功能展示IT資訊交流網 WWW.IT315.ORG回顧javaScript基礎知識IT資訊交流網 WWW.IT315.ORG1. navigator

29、2. Windowdocument（文檔對象）frame （框架對象）location （位置對象）history （歷史對象)links 鏈接對象 archors 錨對象forms 表單對象images 圖片對象圖片對象瀏覽器的對象樹IT資訊交流網 WWW.IT315.ORGalert(信息) ： 消息框prompt(提示信息,默認值)： 標準輸入框confirm( ) ： 確認框open( ) ： 打開一個新窗口close( ) ： 關閉窗口window對象常用方法IT資訊交流網 WWW.IT315.ORG訪問表單的方式訪問表單的方式: * document.formsn * docume

30、nt.表單名字l表單對象常用的屬性action 表單提交的目的地址表單提交的目的地址 method 表單提交方式表單提交方式 name 表單名稱表單名稱Form表單對象IT資訊交流網 WWW.IT315.ORGjavaScript定義函數的三種方式正常方法function print(msg) document.write(msg);對函數進行調用的幾種方式： 函數名（傳遞給函數的參數1，傳遞給函數的參數2，.）變量 = 函數名（傳遞給函數的參數1，傳遞給函數的參數2，.）對于有返回值的函數調用，也可以在程序中直接使用返回的結果，例如：alert(sum=“ + square(2,3);不指定

31、任何函數值的函數，返回undefined。IT資訊交流網 WWW.IT315.ORGjavaScript定義函數的三種方式 構造函數方法 new Function(); /構造函數方式定義javascript函數 注意Function中的F大寫 var add=new Function(a,b,return a+b;); /調用上面定義的add函數 var sum=add(3,4); alert(sum); 注:接受任意多個字符串參數，最后一個參數是函數體。 如果只傳一個字符串，則其就是函數體。IT資訊交流網 WWW.IT315.ORGjavaScrip定義函數的三種方式 函數直接量定義函數

32、/使用函數直接量的方式定義函數 var result=function(a,b)return a+b; /調用使用函數直接量定義的函數 var sum=result(7,8); alert(sum); 注:函數直接量是一個表達式，它可以定義匿名函數 IT資訊交流網 WWW.IT315.ORG回顧javaScript基礎知識完IT資訊交流網 WWW.IT315.ORGDOMDOM ：DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規范,DOM是一種與瀏覽器，平臺，語言無關的接口，使得你可以訪問頁面其他的標準組件 D：文檔 html 文檔 或 xml 文檔

33、O：對象 document 對象的屬性和方法 M：模型 DOM 是針對xml(html)的基于樹的API。 DOM樹:節點（node）的層次。 DOM 把一個文檔表示為一棵家譜樹（父，子，兄弟） DOM定義了Node的接口以及許多種節點類型來表示XML節點的多個方面IT資訊交流網 WWW.IT315.ORGDOM的結構IT資訊交流網 WWW.IT315.ORGDOM的結構IT資訊交流網 WWW.IT315.ORG節點及其類型l節點節點 * 由結構圖中我們可以看到，整個文檔就是一個文檔節點。由結構圖中我們可以看到，整個文檔就是一個文檔節點。 * 而每一個而每一個HMTL標簽都是一個標簽都是一個元

34、素節點元素節點。 * 標簽中的文字則是標簽中的文字則是文本節點文本節點。 * 標簽的屬性是標簽的屬性是屬性節點屬性節點。 * 一切都是節點一切都是節點l節點樹節點樹 節點樹的概念從圖中一目了然，最上面的就是節點樹的概念從圖中一目了然，最上面的就是“樹根樹根”了。節點之間了。節點之間有父子關系，祖先與子孫關系，兄妹關系。這些關系從圖中也很好看有父子關系，祖先與子孫關系，兄妹關系。這些關系從圖中也很好看出來，直接連線的就是父子關系了。而有一個父親的就是兄妹關出來，直接連線的就是父子關系了。而有一個父親的就是兄妹關系系 IT資訊交流網 WWW.IT315.ORGNODE接接口口的的特特性性和和方方法

35、法IT資訊交流網 WWW.IT315.ORG查找元素節點getElementById() 尋找一個有著給定 id 屬性值的元素，返回值是一個有著給定 id 屬性值的元素節點。如果不存在這樣的元素，它返回 null.var oElement = document.getElementById ( sID ) 該方法只能用于 document 對象l function test()l var usernameElement=document.getElementById(“tid);l /獲取元素的值l alert(usernameElement.value: +usernameElement.v

36、alue)l /獲取元素的類型 l alert(usernameElement.type: +usernameElement.type)lIT資訊交流網 WWW.IT315.ORG查找元素節點getElementsByName() 尋找有著給定name屬性的所有元素，這個方法將返回一個節點集合，這個集合可以當作一個數組來處理。這個集合的 length 屬性等于當前文檔里有著給定name屬性的所有元素的總個數。 l l l l lfunction test()l var tnameArray=document.getElementsByName(tname);l alert(tnameArray

37、.length);l for(var i=0;itnameArray.length;i+)l window.alert(tnameArrayi.value);l l IT資訊交流網 WWW.IT315.ORG查找元素節點ll l l l l /該方法返回是數組類型 l var usernameElements=document.getElementsByName(username);l for (var i = 0; i usernameElements.length; i+) l /獲取元素的類型l /alert(usernameElementsi.type)l /獲取元素value的值l

38、/alert(usernameElementsi.value);l /采用函數直接量的方法l usernameElementsi.onchange = function()l alert(this.value);l ll IT資訊交流網 WWW.IT315.ORG查找元素節點getElementsByTagName() 尋找有著給定標簽名的所有元素，這個方法將返回一個節點集合，這個集合可以當作一個數組來處理。這個集合的 length 屬性等于當前文檔里有著給定標簽名的所有元素的總個數。 var elements = document.getElementsByTagName(tagName);

39、 var elements = element.getElementsByTagName(tagName); 該方法不必非得用在整個文檔上。它也可以用來在某個特定元素的子節點當中尋找有著給定標簽名的元素。 var container = document.getElementById(“sid”); var elements = container.getElementsByTagName(“p”); alert(elements .length);IT資訊交流網 WWW.IT315.ORG查找元素節點l/ /處理inputl/ var inputElements=document.getEl

40、ementsByTagName(input);l/ /輸出input標簽的長度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標簽l/ var selectElements=document.getElementsByTagName(select);l/ /獲取select下的子標簽l/ for(var

41、 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);IT資訊交流網 WWW.IT315.ORG查找

42、元素節點 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+) selectE

43、lementsi.onchange=function() alert(this.value); IT資訊交流網 WWW.IT315.ORG查找元素節點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 IT資訊交流網 WWW.IT315.ORG查看是否存在子節點hasChildNodes() 該

44、方法用來檢查一個元素是否有子節點，返回值是 true 或 false. var booleanValue = element.hasChildNodes(); 文本節點和屬性節點不可能再包含任何子節點，所以對這兩類節點使用 hasChildNodes 方法的返回值永遠是 false. 如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild 將是空數組和空字符串。IT資訊交流網 WWW.IT315.ORGhasChildNodes() var selectElements=document.getElementsByTag

45、Name(select); alert(selectElements0.hasChildNodes()var inputElements=document.getElementsByTagName(input);for(var i=0;iinputElements.length;i+) alert(inputElementsi.hasChildNodes();IT資訊交流網 WWW.IT315.ORGDOM 屬性 - nodeName 文檔里的每個節點都有以下屬性。 nodeName:一個字符串，其內容是給定節點的名字。 var name = node.nodeName; * 如果節點是元素節

46、點，nodeName返回這個元素的名稱 * 如果是屬性節點，nodeName返回這個屬性的名稱 * 如果是文本節點，nodeName返回一個內容為#text 的字符串 注:nodeName 是一個只讀屬性。IT資訊交流網 WWW.IT315.ORGDOM 屬性 - nodeTypenodeType：返回一個整數，這個數值代表著給定節點的類型。nodeType 屬性返回的整數值對應著 12 種節點類型,常用的有三種： Node.ELEMENT_NODE -1 - 元素節點 Node.ATTRIBUTE_NODE -2 - 屬性節點 Node.TEXT_NODE -3 - 文本節點nodeType

47、 是個只讀屬性IT資訊交流網 WWW.IT315.ORGDOM 屬性 - nodeValue nodeValue：返回給定節點的當前值（字符串） 如果給定節點是一個屬性節點，返回值是這個屬性的值。 如果給定節點是一個文本節點，返回值是這個文本節點的內容。 如果給定節點是一個元素節點，返回值是 null nodeValue 是一個 讀/寫 屬性，但不能對元素節點的 nodeValue 屬性設置值， 但可以為文本節點的 nodeValue 屬性設置一個值。 var li = document.getElementById(“li”); if(li.firstChild.nodeType = 3)

48、li.firstChild.nodeValue = “傳智播客”;IT資訊交流網 WWW.IT315.ORG練習問題: 打印 ”明天休息” (利用兩種方法) 提示:使用(firstChild lastChild childNodes)IT資訊交流網 WWW.IT315.ORG練習問題:打印出 id=“bj” 該節點的所有子節點的(nodeName, nodeType, nodeValue)同時打印文本值 北京 海淀 奧運 IT資訊交流網 WWW.IT315.ORG練習問題: 輸出所有select元素下的所有option元素中對應的文本內容 例如:中專 輸出-中專IT資訊交流網 WWW.IT31

49、5.ORG元素節點l/測試元素節點,輸出節點名稱,節點的類型,節點的值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 IT資訊交流網 WWW.IT315.ORG屬性節點l/測試屬性節點,輸出屬性節點名稱,節點的類型,節點的值l var liElements=document.getEle

50、mentsByTagName(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 IT資訊交流網 WWW.IT315.ORG文本

51、節點 /測試元素節點,輸出節點名稱,節點的類型,節點的值 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.childNodes0.nodeValue=南京; alert(liElementsi.childN

52、odes0.nodeValue); /另一種讀取方法 alert(liElementsi.firstChild.nodeName); alert(liElementsi.firstChild.nodeType); alert(liElementsi.firstChild.nodeValue); IT資訊交流網 WWW.IT315.ORG替換節點 replaceChild() 把一個給定父元素里的一個子節點替換為另外一個子節點var reference = element.replaceChild(newChild,oldChild); 返回值是一個指向已被替換的那個子節點的引用指針。 如果被插

53、入的子節點還有子節點，則那些子節點也被插入到目標節點中 IT資訊交流網 WWW.IT315.ORG練習 問題:當單擊”北京”這個節點時,北京這個節點被 ”反恐精英”替換IT資訊交流網 WWW.IT315.ORG替換節點例子 /方法一/ var cityElement=document.getElementById(city);/ var loveElement=document.getElementById(love);/ var cityChildElement=document.getElementById(beijing);/ var loveChildElement=document.

54、getElementById(fankong);/ var oldElement=cityElement.replaceChild(loveChildElement,cityChildElement);/ loveElement.appendChild(oldElement);/ alert(oldElement.getAttribute(id); var cityElement=document.getElementById(city); cityElement.onclick=function() var cityChildElement=document.getElementById(b

55、eijing); var loveChildElement=document.getElementById(fankong); var oldElement=cityElement.replaceChild(loveChildElement,cityChildElement); loveElement.appendChild(oldElement); alert(oldElement.getAttribute(id); IT資訊交流網 WWW.IT315.ORG查找屬性節點 getAttribute() 返回一個給定元素的一個給定屬性節點的值var attributeValue = eleme

56、nt.getAttribute(attributeName); 給定屬性的名字必須以字符串的形式傳遞給該方法。 給定屬性的值將以字符串的形式返回，如果給定屬性不存在，getAttribute() 將返回一個空字符串.通過屬性獲取屬性節點 getAttributeNode(屬性的名稱)-NodeIT資訊交流網 WWW.IT315.ORG查找屬性節點 北京 /通過屬性名獲取屬性的值 var bjElement=document.getElementById(bj); var attributeValue=eduElement.getAttribute(name); alert(attributeV

57、alue +attributeValue); /通過屬性名獲取屬性的節點 var bjNode=eduElement.getAttributeNode(name); alert(eduNode.nodeValue); alert(eduNode.nodeType); alert(eduNode.nodeName);IT資訊交流網 WWW.IT315.ORG設置屬性節點 setAttribute() 將給定元素節點添加一個新的屬性值或改變它的現有屬性的值。 element.setAttribute(attributeName,attributeValue); 屬性的名字和值必須以字符串的形式傳遞

58、給此方法 如果這個屬性已經存在，它的值將被刷新； 如果不存在，setAttribute()方法將先創建它再為其賦值。 IT資訊交流網 WWW.IT315.ORG設置屬性節點 北京 /獲取元素的引用 var bjElement=document.getElementById(bj); /設置屬性值 bjElement.setAttribute(name,beijing); /獲取設置的屬性值 var nameValue=bjElement.getAttribute(name); alert(nameValue +nameValue);IT資訊交流網 WWW.IT315.ORG創建新元素節點 cr

59、eateElement() 按照給定的標簽名創建一個新的元素節點。方法只有一個參數：將被創建的元素的名字，是一個字符串. var reference = document.createElement(element); 方法的返回值：是一個指向新建節點的引用指針。返回值是一個元素節點，所以它的 nodeType 屬性值等于 1。 新元素節點不會自動添加到文檔里，新節點沒有 nodeParent 屬性，它只是一個存在于 JavaScript 上下文的對象.var pElement = document.createElement(p);IT資訊交流網 WWW.IT315.ORG設置屬性節點l /

60、創建一個新的元素l var pElement=document.createElement(li);l /設置屬性值l pElement.setAttribute(id,pid);l l /獲取父元素l var loveElement=document.getElementById(love);l /在父元素中增加子元素lloveElement.appendChild(pElement);l /通過id獲取剛創建的元素l var pidElement=document.getElementById(pid);l alert(pidElement.getAttribute(id);IT資訊交流網