JavaScrip基礎(chǔ)和t加強(qiáng)

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

2、 控制語句等第三講：引用類型 數(shù)組 數(shù)組ECMA5新特性 Object類型型應(yīng)用 模擬高級語言對象（java 容器模擬） 數(shù)組的技巧（經(jīng)典數(shù)組操作技巧） 其他引用類型（單體類型）IT資訊交流網(wǎng) WWW.IT315.ORGJavascript課程大綱（二） 第四講：函數(shù) 函數(shù)概念 定義函數(shù)的三種方式 函數(shù)參數(shù)arguments對象 this對象 call和apply高級函數(shù) 執(zhí)行環(huán)境概念 作用域鏈概念 javascript垃圾收集機(jī)制 塊級作用域 閉包函數(shù)IT資訊交流網(wǎng) WWW.IT315.ORGJavascript課程大綱（三） 第五講：面向?qū)ο蟪绦蛟O(shè)計 類的創(chuàng)建 實例對象的三種方式 原型的概

3、念，為什么需要原型 原型常用方法 實現(xiàn)自己的原型擴(kuò)展方法 簡單原型對象 原型對象的常用開發(fā)模式（組合、寄生、動態(tài)原型、穩(wěn)妥對象） 深入繼承的解析（javascript繼承實現(xiàn)的關(guān)鍵解析） 常用三種繼承模式（原型繼承、借用構(gòu)造函數(shù)繼承、混合繼承） 模擬extjs4.1底層繼承代碼IT資訊交流網(wǎng) WWW.IT315.ORG第一講：初識Javascript 學(xué)習(xí)目標(biāo) 了解javascript組成部分 認(rèn)識javascript解析機(jī)制 如何使用javascriptIT資訊交流網(wǎng) WWW.IT315.ORG第一講：1.1 初識Javascript javascript是一種專為與網(wǎng)頁交互兒設(shè)計的腳本語言

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

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

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

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

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

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

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

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

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

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

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

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

16、ORG第四講：4.2 定義函數(shù)三種定義函數(shù)的方式： function語句形式 函數(shù)直接量形式 通過Function構(gòu)造函數(shù)形式定義函數(shù)比較三種方式定義的區(qū)別：IT資訊交流網(wǎng) 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資訊交流網(wǎng) WWW

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

18、ion(return 5); / 函數(shù)5 alert(f();/返回值為5 說明第3個函數(shù)被第5個函數(shù)覆蓋var f = function()return 6 ;/ 函數(shù)6 alert(f();/返回值為6 說明第5個函數(shù)被第6個函數(shù)覆蓋IT資訊交流網(wǎng) 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資訊交流網(wǎng) WWW.IT315.ORG第四講：4.3 函數(shù)的參數(shù) 函數(shù)的參數(shù)：arguments對象 arguments是表示函數(shù)的實際參數(shù)(與形參無關(guān))callee函數(shù)（回調(diào)函數(shù)屬性）arguments對象的秘密屬性 callee屬性：這個屬性比較奇怪，他能返回arguments對象所屬的函數(shù)的引用，這相當(dāng)于在自己的內(nèi)部調(diào)用自己。用法：例如檢測函數(shù)傳遞的參數(shù)正確與否IT資訊交流網(wǎng) WWW.IT315.ORG第四講：4.3 示例 關(guān)于程序的嚴(yán)謹(jǐn)性 function fact(num) if(num =1) return 1 ; else return num*fact(nu

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

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

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

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資訊交流網(wǎng) WWW.IT315.ORG第四講：4.7 垃圾收集、塊級作用域javascript是一門具有自動垃圾收集機(jī)制的編程語言。開發(fā)人員不必關(guān)心內(nèi)存分配

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

25、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功能:JQuery ext js dwrIT資訊交流網(wǎng) 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資訊交流網(wǎng) 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資訊交流網(wǎng) WWW.IT315.ORGAptana增加提示功能IT資訊交流網(wǎng) WWW.IT315.ORGAptana功能展示IT資訊交流網(wǎng) WWW.IT315.ORG回顧javaScript基礎(chǔ)知識IT資訊交流網(wǎng) WWW.IT315.ORG1. navigator

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

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

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

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

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

34、素節(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)系系 IT資訊交流網(wǎng) WWW.IT315.ORGNODE接接口口的的特特性性和和方方法

35、法IT資訊交流網(wǎng) WWW.IT315.ORG查找元素節(jié)點getElementById() 尋找一個有著給定 id 屬性值的元素，返回值是一個有著給定 id 屬性值的元素節(jié)點。如果不存在這樣的元素，它返回 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資訊交流網(wǎng) WWW.IT315.ORG查找元素節(jié)點getElementsByName() 尋找有著給定name屬性的所有元素，這個方法將返回一個節(jié)點集合，這個集合可以當(dāng)作一個數(shù)組來處理。這個集合的 length 屬性等于當(dāng)前文檔里有著給定name屬性的所有元素的總個數(shù)。 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資訊交流網(wǎng) WWW.IT315.ORG查找元素節(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(usernameElementsi.type)l /獲取元素value的值l

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

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

40、ementsByTagName(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/ 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資訊交流網(wǎng) WWW.IT315.ORG查找

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

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

44、方法用來檢查一個元素是否有子節(jié)點，返回值是 true 或 false. var booleanValue = element.hasChildNodes(); 文本節(jié)點和屬性節(jié)點不可能再包含任何子節(jié)點，所以對這兩類節(jié)點使用 hasChildNodes 方法的返回值永遠(yuǎn)是 false. 如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild 將是空數(shù)組和空字符串。IT資訊交流網(wǎng) 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資訊交流網(wǎng) WWW.IT315.ORGDOM 屬性 - nodeName 文檔里的每個節(jié)點都有以下屬性。 nodeName:一個字符串，其內(nèi)容是給定節(jié)點的名字。 var name = node.nodeName; * 如果節(jié)點是元素節(jié)

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

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

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

49、5.ORG元素節(jié)點l/測試元素節(jié)點,輸出節(jié)點名稱,節(jié)點的類型,節(jié)點的值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資訊交流網(wǎng) WWW.IT315.ORG屬性節(jié)點l/測試屬性節(jié)點,輸出屬性節(jié)點名稱,節(jié)點的類型,節(jié)點的值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資訊交流網(wǎng) WWW.IT315.ORG文本

51、節(jié)點 /測試元素節(jié)點,輸出節(jié)點名稱,節(jié)點的類型,節(jié)點的值 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資訊交流網(wǎng) WWW.IT315.ORG替換節(jié)點 replaceChild() 把一個給定父元素里的一個子節(jié)點替換為另外一個子節(jié)點var reference = element.replaceChild(newChild,oldChild); 返回值是一個指向已被替換的那個子節(jié)點的引用指針。 如果被插

53、入的子節(jié)點還有子節(jié)點，則那些子節(jié)點也被插入到目標(biāo)節(jié)點中 IT資訊交流網(wǎng) WWW.IT315.ORG練習(xí) 問題:當(dāng)單擊”北京”這個節(jié)點時,北京這個節(jié)點被 ”反恐精英”替換IT資訊交流網(wǎng) WWW.IT315.ORG替換節(jié)點例子 /方法一/ 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資訊交流網(wǎng) WWW.IT315.ORG查找屬性節(jié)點 getAttribute() 返回一個給定元素的一個給定屬性節(jié)點的值var attributeValue = eleme

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

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

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

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

60、創(chuàng)建一個新的元素l var pElement=document.createElement(li);l /設(shè)置屬性值l pElement.setAttribute(id,pid);l l /獲取父元素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);IT資訊交流網(wǎng)