第4章JavaScript基礎(chǔ)（下）主講人：某某老師本章學(xué)習(xí)目標(biāo)掌握J(rèn)avaScript運(yùn)算符的使用；掌握J(rèn)avaScript條件語句的用法；掌握J(rèn)avaScript函數(shù)的使用；掌握J(rèn)avaScriptDOM的用法。目錄4.5JavaScript運(yùn)算符4.6JavaScript條件語句4.7JavaScript函數(shù)4.8文檔對(duì)象模型DOM4.5.1賦值運(yùn)算符4.5.2算術(shù)運(yùn)算符4.5.3邏輯運(yùn)算符4.5.4關(guān)系運(yùn)算符4.5.5相等性運(yùn)算符4.5JavaScript運(yùn)算符4.5.1賦值運(yùn)算符在JavaScript中，運(yùn)算符=專門用來為變量賦值，因此也稱為賦值運(yùn)算符。在聲明變量時(shí)可以使用賦值運(yùn)算符對(duì)其進(jìn)行初始化，例如：varx1=9;//為變量x1賦值為整數(shù)9varx2="hello";//為變量x2賦值為字符串"hello"4.5.1賦值運(yùn)算符也可以使用賦值運(yùn)算符將已存在的變量值賦值給新的變量，例如：還可以使用賦值運(yùn)算符為多個(gè)變量連續(xù)賦值，例如：賦值運(yùn)算符的右邊還可以接受表達(dá)式，例如：varx1=9;//為變量x1賦值為整數(shù)9varx2=x1;//將變量x1的值賦值給新聲明的變量x2varx=y=z=99;//此時(shí)變量x、y、z的賦值均為整數(shù)99varx=100+20;//此時(shí)變量x將賦值為120這里使用了加法（+）運(yùn)算符形成的表達(dá)式，在運(yùn)行過程中會(huì)優(yōu)先對(duì)表達(dá)式進(jìn)行計(jì)算，然后再對(duì)變量x進(jìn)行賦值。4.5.2算術(shù)運(yùn)算符在JavaScript中所有的基本算術(shù)均可以使用對(duì)應(yīng)的算術(shù)運(yùn)算符完成，包括加減乘除和求余等。算術(shù)運(yùn)算符的常見用法如表4-6所示。4.5.2算術(shù)運(yùn)算符其中加號(hào)還有一個(gè)特殊用法：可用于連接文本內(nèi)容或字符串變量。例如：如果將字符串和數(shù)字用加號(hào)相加，則會(huì)先將數(shù)字轉(zhuǎn)換為字符串，再進(jìn)行連接。例如：vars1="Hello";vars2="JavaScript";vars3=s1+s2;//結(jié)果會(huì)是HelloJavaScriptvars="Hello";varx=2016;varresult=s+x;//結(jié)果會(huì)是Hello20164.5.2算術(shù)運(yùn)算符上述代碼中即使字符串本身也是數(shù)字內(nèi)容，使用加號(hào)連接仍然不會(huì)進(jìn)行數(shù)學(xué)運(yùn)算。例如：vars="2015";varx=2016;varresult=s+x;//結(jié)果會(huì)是20152016，而不是兩個(gè)數(shù)字相加的和4.5.2算術(shù)運(yùn)算符將賦值運(yùn)算符（等號(hào)）和算術(shù)運(yùn)算符（加、減、乘、除、求余數(shù)）結(jié)合使用，可以達(dá)到簡(jiǎn)寫的效果。具體用法如表4-7所示。4.5.3邏輯運(yùn)算符邏輯運(yùn)算符有三種類型：NOT（邏輯非）、AND（邏輯與）和OR（邏輯或）。邏輯運(yùn)算符使用的符號(hào)與對(duì)應(yīng)關(guān)系如表4-8所示。4.5.3邏輯運(yùn)算符在進(jìn)行邏輯運(yùn)算之前，JavaScript中自帶的抽象操作ToBoolean會(huì)將運(yùn)算條件轉(zhuǎn)換為邏輯值。轉(zhuǎn)換規(guī)則如表4-9所示。4.5.3邏輯運(yùn)算符1.邏輯非運(yùn)算符（NOT）在JavaScript中，邏輯非運(yùn)算符號(hào)與C語言和Java語言都相同，使用感嘆號(hào)（?。┎⒎胖迷谶\(yùn)算內(nèi)容左邊表示。邏輯非運(yùn)算符的返回值只能是布爾值，即true或者false。邏輯非的運(yùn)算規(guī)則如表4-10所示。4.5.3邏輯運(yùn)算符2.邏輯與運(yùn)算符（AND）在JavaScript中，邏輯與運(yùn)算符使用雙和符號(hào)（&&）表示，用于連接符號(hào)前后的兩個(gè)條件判斷，表示并列關(guān)系。當(dāng)兩個(gè)條件均為布爾值時(shí)，邏輯與的運(yùn)算結(jié)果也是布爾值（true或者false）。判斷結(jié)果如表4-11所示。4.5.3邏輯運(yùn)算符2.邏輯與運(yùn)算符（AND）還有一種特殊情況：當(dāng)條件1為假（false）時(shí)，無論條件2是任何內(nèi)容（例如null值、undefined、數(shù)字、對(duì)象等），最終返回值都是假（false）。原因是邏輯與有簡(jiǎn)便運(yùn)算的特性，即如果第一個(gè)條件為假（false）的話，直接判斷邏輯與的運(yùn)行結(jié)果為假（false），不再執(zhí)行第二個(gè)條件。例如：varx1=false;varresult=x1&&x2;//因?yàn)閤1為false，可以忽略x2直接判斷最終結(jié)果alert(result);//該語句執(zhí)行結(jié)果為false由于條件1為false，邏輯與會(huì)直接判定最終結(jié)果為false，直接忽略條件2。因此即使本例中條件2的變量未聲明都不影響代碼的運(yùn)行。4.5.3邏輯運(yùn)算符2.邏輯與運(yùn)算符（AND）如果存在某個(gè)條件是數(shù)字類型，則先將其轉(zhuǎn)換為布爾值再繼續(xù)判斷。其中數(shù)字0對(duì)應(yīng)的是假（false），其他非0的數(shù)字對(duì)應(yīng)的都是真（true）。例如：varx1=0;//對(duì)應(yīng)的是falsevarx2=99;//對(duì)應(yīng)的是truevarresult=x1&&x2;//結(jié)果是false邏輯與運(yùn)算符的返回值不一定是布爾值，如果其中某個(gè)條件的返回值不是布爾值，有可能出現(xiàn)其他返回值。邏輯非的運(yùn)算規(guī)則如表4-12所示。4.5.3邏輯運(yùn)算符3.邏輯或運(yùn)算符（OR）在JavaScript中，邏輯或運(yùn)算符使用雙豎線符號(hào)（||）表示，用于連接符號(hào)前后的兩個(gè)條件判斷，表示二選一的關(guān)系。當(dāng)兩個(gè)條件均為布爾值時(shí)，邏輯或的運(yùn)算結(jié)果也是布爾值（true或者false）。判斷結(jié)果如表4-13所示。4.5.3邏輯運(yùn)算符3.邏輯或運(yùn)算符（OR）還有一種特殊情況：當(dāng)條件1為真（true）時(shí)，無論條件2是任何內(nèi)容（例如null值、undefined、數(shù)字、對(duì)象等），最終返回值都是真（true）。原因是邏輯或也具有簡(jiǎn)便運(yùn)算的特性，即如果第一個(gè)條件為真（true）的話，直接判斷邏輯或的運(yùn)行結(jié)果為真（true），不再執(zhí)行第二個(gè)條件。例如：varx1=true;varresult=x1||x2;//因?yàn)閤1為true，可以忽略x2直接判斷最終結(jié)果alert(result);//該語句執(zhí)行結(jié)果為true由于條件1為真（true），邏輯或會(huì)直接判定最終結(jié)果為真（true），直接忽略條件2。因此即使本例中條件2的變量未聲明都不影響代碼的運(yùn)行。4.5.3邏輯運(yùn)算符3.邏輯或運(yùn)算符（OR）和邏輯與運(yùn)算符類似，如果存在某個(gè)條件是數(shù)字類型，則先將其轉(zhuǎn)換為布爾值再繼續(xù)判斷。其中數(shù)字0對(duì)應(yīng)的是假（false），其他非0的數(shù)字對(duì)應(yīng)的都是真（true）。例如：varx1=0;//對(duì)應(yīng)的是falsevarx2=99;//對(duì)應(yīng)的是truevarresult=x1||x2;//結(jié)果是true邏輯或運(yùn)算符的返回值同樣不一定是布爾值，如果其中某個(gè)條件的返回值不是布爾值，有可能出現(xiàn)其他返回值。邏輯非的運(yùn)算規(guī)則如表4-23所示。4.5.4關(guān)系運(yùn)算符在JavaScript中，關(guān)系運(yùn)算符共有四種：大于（>）、小于（<）、大于等于（>=）和小于等于（<=）。用于比較兩個(gè)值的大小，返回值一定是布爾值（true或false）。4.5.4關(guān)系運(yùn)算符1.數(shù)字之間的比較數(shù)字之間的比較完全依據(jù)數(shù)學(xué)中比大小的規(guī)律，當(dāng)條件成立時(shí)返回真（true），否則返回假（false）。例如：varresult1=99>0;//符合數(shù)學(xué)規(guī)律，返回truevarresult2=1>100;//不符合數(shù)學(xué)規(guī)律，返回false此時(shí)只要兩個(gè)運(yùn)算數(shù)都是數(shù)字即可，整數(shù)或小數(shù)都可以依據(jù)此規(guī)律進(jìn)行比較并且返回對(duì)應(yīng)的布爾值。4.5.4關(guān)系運(yùn)算符2.字符串之間的比較當(dāng)兩個(gè)字符串進(jìn)行比大小時(shí)，是按照從左往右的順序依次比較相同位置上的字符，如果字符完全一樣則繼續(xù)比較下一個(gè)。如果兩個(gè)字符串在相同位置上都是數(shù)字則仍然按照數(shù)學(xué)上的大小進(jìn)行比較。例如：varx1="9";varx2="1";varresult=x1>x2;//返回true此時(shí)從數(shù)學(xué)概念上來說，9大于1，因此返回值是真（true）。4.5.4關(guān)系運(yùn)算符2.字符串之間的比較但是如果兩個(gè)數(shù)字的位數(shù)不一樣，仍然只對(duì)相同位置上的數(shù)字進(jìn)行比大小，不按照數(shù)學(xué)概念看整體數(shù)值大小。例如：varx1="9";varx2="10";varresult=x1>x2;//返回true此時(shí)雖然從數(shù)學(xué)概念上來說10應(yīng)該大于9，但是由于字符串同位置比較原則，此時(shí)比較的是變量x1中的9和變量x2中的1，得出結(jié)論9大于1，因此返回值仍然是真（true）。4.5.4關(guān)系運(yùn)算符2.字符串之間的比較由于JavaScript是一種大小寫敏感的程序語言，所以如果相同位置上的字符大小寫不同就可以直接作出判斷，因?yàn)榇髮懽帜傅拇a小于小寫字母的代碼。例如：varx1="hello";varx2="HELLO";varresult=x1>x2;//返回true4.5.4關(guān)系運(yùn)算符2.字符串之間的比較如果大小寫相同，則按照字母表的順序進(jìn)行比較，字母越往后越大。例如：varx1="hello";varx2="world";varresult=x1>x2;//返回false在上述示例中，同樣按照從左往右的順序先比較兩個(gè)字符串的第一個(gè)字符，即變量x1中的h和變量x2中的w。按照字母表的順序h在先w在后。因此返回值是假（false）。此時(shí)已判斷出結(jié)果因此不再繼續(xù)比較后續(xù)的字符。4.5.4關(guān)系運(yùn)算符2.字符串之間的比較如果不希望兩個(gè)字符串之間的比較受到大小寫字母的干擾，而是無論大小寫都按照字母表順序進(jìn)行比大小，可以將所有字母都轉(zhuǎn)換為小寫或大寫的形式，再進(jìn)行大小的比較。使用方法toLowerCase()可以將所有字母轉(zhuǎn)換為小寫形式，例如：varx1="ball";varx2="CAT";varresult1=x1>x2;//返回truevarresult2=x1.toLowerCase()>x2.toLowerCase();//返回false4.5.4關(guān)系運(yùn)算符2.字符串之間的比較使用方法toUpperCase()可以將所有字母轉(zhuǎn)換為大寫形式，例如：varx1="ball";varx2="CAT";varresult1=x1>x2;//返回truevarresult2=x1.toUpperCase()>x2.toUpperCase();//返回false本示例使用了toUpperCase()將所有字母轉(zhuǎn)換為大寫再進(jìn)行比較，效果與之前使用方法toLowerCase()將所有字母轉(zhuǎn)換為小寫的原理相同，不再贅述。4.5.5相等性運(yùn)算符在JavaScript中，相等性運(yùn)算符包括：等于（==）和非等于（!=）。用于判斷兩個(gè)值是否相等，返回值一定是布爾值（true或false）。4.5.5相等性運(yùn)算符在JavaScript中，判斷兩個(gè)數(shù)值是否相等用雙等于符號(hào)（==）表示，只有兩個(gè)數(shù)值完全相等時(shí)返回真（true）；判斷兩個(gè)數(shù)值是否不相等使用感嘆號(hào)加等于號(hào)（!=）表示，在兩個(gè)數(shù)值不一樣的情況下返回真（true）。在使用等于或非等于運(yùn)算符進(jìn)行比較時(shí)，如果兩個(gè)值均為數(shù)字類型，則直接進(jìn)行數(shù)學(xué)邏輯上的比較判斷是否相等。例如：varx1=100;varx2=99;alert(x1==x2);//返回false4.5.5相等性運(yùn)算符若需要進(jìn)行比較的數(shù)據(jù)存在其他數(shù)據(jù)類型（例如字符串、布爾值等），要先將運(yùn)算符前后的內(nèi)容嘗試轉(zhuǎn)換為數(shù)字再進(jìn)行比較判斷。轉(zhuǎn)換規(guī)則如表4-15所示。4.5.5相等性運(yùn)算符在進(jìn)行了數(shù)據(jù)類型轉(zhuǎn)換后仍然不是數(shù)字類型的特殊情況判斷規(guī)則如表4-16所示。4.6.1if語句4.6.2switch語句4.6JavaScript條件語句4.6.1if語句在各類計(jì)算機(jī)程序語言中，最常見的條件語句就是if語句。1.if語句2.ifelse語句3.ifelse-ifelse語句4.6.1if語句1.if語句最簡(jiǎn)單的if語句由單個(gè)條件組成，語法規(guī)則如下：例如判斷成績(jī)等級(jí)，如果高于90分彈出對(duì)話框提示為Excellent，代碼如下：if(條件){

條件為真（true）時(shí)執(zhí)行的代碼}varscore=99;if(score>90){alert("Excellent!");}4.6.1if語句2.ifelse語句當(dāng)判斷條件成立與否都需要有對(duì)應(yīng)的處理時(shí)可以使用if-else語句。其語法格式如下：if(條件){

條件為真（true）時(shí)執(zhí)行的代碼}else{

條件為假（false）時(shí)執(zhí)行的代碼}如果條件成立則執(zhí)行緊跟if語句的代碼部分，否則執(zhí)行跟在else語句后面的代碼部分。這些代碼均可以是單行語句，也可以是一段代碼塊。4.6.1if語句2.ifelse語句例如同樣是判斷成績(jī)等級(jí)，如果大于等于60分則提示彈出對(duì)話框提示“考試通過！”，否則提示“不及格！”。修改后的代碼如下：varscore=99;if(score>=60){alert("考試通過!");}else{alert("不及格!");}4.6.1if語句3.ifelse-ifelse語句當(dāng)有多個(gè)條件分支需要分別判斷時(shí)，可以使用elseif語句。if(條件1){

條件1為真（true）時(shí)執(zhí)行的代碼}elseif(條件2){

條件2為真（true）時(shí)執(zhí)行的代碼}else{

所有條件都為假（false）時(shí)執(zhí)行的代碼}其中的elseif語句可以根據(jù)實(shí)際需要有一個(gè)或多個(gè)。4.6.1if語句【例4-16】JavaScriptif-else語句的簡(jiǎn)單應(yīng)用4.6.2switch語句當(dāng)對(duì)于同一個(gè)變量需要進(jìn)行多次條件判斷時(shí)，也可以使用switch語句代替多重if-elseif-else語句。4.6.2switch語句語法格式如下：switch(變量){case值1：

執(zhí)行代碼塊1break;case值2：

執(zhí)行代碼塊2break;

……case值n：

執(zhí)行代碼塊nbreak;[default：

以上條件均不符合時(shí)的執(zhí)行代碼塊]}4.6.2switch語句【例4-17】JavaScriptswitch語句的簡(jiǎn)單應(yīng)用4.7.1函數(shù)的基本結(jié)構(gòu)4.7.2函數(shù)的調(diào)用4.7.3函數(shù)的返回值4.7JavaScript函數(shù)4.7.1函數(shù)的基本結(jié)構(gòu)函數(shù)是在調(diào)用時(shí)才會(huì)執(zhí)行的一段代碼塊，可以重復(fù)使用。其基本語法結(jié)構(gòu)如下：function函數(shù)名稱(參數(shù)0,參數(shù)1,……參數(shù)N){

待執(zhí)行代碼塊}上述語法結(jié)構(gòu)是由關(guān)鍵詞function、函數(shù)名稱、小括號(hào)內(nèi)的一組可選參數(shù)以及大括號(hào)內(nèi)的待執(zhí)行代碼塊組成的。其中函數(shù)名稱和參數(shù)個(gè)數(shù)均可以自定義，待執(zhí)行的代碼塊可以是一句或多句JavaScript代碼組成。4.7.1函數(shù)的基本結(jié)構(gòu)例如：functionwelcome(){alert("WelcometoJavaScriptWorld");}上述代碼定義了一個(gè)名稱為welcome的函數(shù)，該函數(shù)的參數(shù)個(gè)數(shù)為0。在待執(zhí)行的代碼部分只有一句alert()方法，用于在瀏覽器上彈出對(duì)話框并顯示雙引號(hào)內(nèi)的文本內(nèi)容。4.7.1函數(shù)的基本結(jié)構(gòu)如果需要彈出的對(duì)話框每次顯示的文本內(nèi)容不同，可以使用參數(shù)傳遞的形式：functionwelcome(msg){alert(msg);}此時(shí)為之前的welcome函數(shù)方法傳遞了一個(gè)參數(shù)msg，在待執(zhí)行的代碼部分修改原先的alert()方法，用于在瀏覽器上彈出對(duì)話框并動(dòng)態(tài)顯示msg傳遞的文本內(nèi)容。4.7.2函數(shù)的調(diào)用函數(shù)可以通過使用函數(shù)名稱的方法進(jìn)行調(diào)用。例如：如果該函數(shù)存在參數(shù)，則調(diào)用時(shí)必須在函數(shù)的小括號(hào)內(nèi)傳遞對(duì)應(yīng)的參數(shù)值。welcome();welcome("HelloJavaScript!");4.7.2函數(shù)的調(diào)用函數(shù)可以在JavaScript代碼的任意位置進(jìn)行調(diào)用，也可以在指定的事件發(fā)生時(shí)調(diào)用。例如在按鈕的點(diǎn)擊事件中調(diào)用函數(shù)：【例4-18】JavaScript函數(shù)的簡(jiǎn)單調(diào)用<buttononclick="welcome()">點(diǎn)擊此處調(diào)用函數(shù)</button>上述代碼中的onclick屬性表示元素被鼠標(biāo)點(diǎn)擊的狀態(tài)觸發(fā)等號(hào)右邊的內(nèi)容。4.7.3函數(shù)的返回值相比Java而言，JavaScript函數(shù)更加簡(jiǎn)便，無需特別聲明返回值類型。JavaScript函數(shù)如果存在返回值，直接在大括號(hào)內(nèi)的代碼塊中使用return關(guān)鍵詞后面緊跟需要返回的值即可。4.7.3函數(shù)的返回值例如：functiontotal(num1,num2){returnnum1+num2;}varresult=total(8,10);//返回值是18alert(result);上述代碼對(duì)兩個(gè)數(shù)字進(jìn)行了求和運(yùn)算，使用自定義變量result獲取total函數(shù)的返回值。此時(shí)在total函數(shù)的參數(shù)位置填入了兩個(gè)測(cè)試數(shù)據(jù)，得到了正確的計(jì)算結(jié)果。4.7.3函數(shù)的返回值函數(shù)也可以帶有多個(gè)return語句：functionmaxNum(num1,num2){if(num1>num2)returnnum1;elsereturnnum2;}varresult=maxNum(99,100);//返回值是100alert(result);上述代碼對(duì)兩個(gè)數(shù)字進(jìn)行了比大小運(yùn)算，然后返回其中較大的數(shù)值。使用自定義變量result獲取maxNum函數(shù)的返回值。此時(shí)在maxNum函數(shù)的參數(shù)位置填入了兩個(gè)測(cè)試數(shù)據(jù)，得到了正確的計(jì)算結(jié)果。4.7.3函數(shù)的返回值單獨(dú)使用return語句可隨時(shí)終止函數(shù)代碼的運(yùn)行。例如測(cè)試數(shù)值是否為偶數(shù)，如果是奇數(shù)則不提示，如果是偶數(shù)則彈出對(duì)話框：functiontestEven(num){if(num%2!=0)return;alert(num+"是偶數(shù)！");}testEven(99);//不會(huì)彈出對(duì)話框testEven(100);//會(huì)彈出對(duì)話框顯示"100是偶數(shù)！"函數(shù)在執(zhí)行到return語句時(shí)就直接退出了代碼塊，即使后續(xù)還有代碼也不會(huì)被執(zhí)行。本例中如果參數(shù)為奇數(shù)才能符合if條件然后觸發(fā)return語句，因此后續(xù)的alert()方法不會(huì)被執(zhí)行到，從而做到只有在參數(shù)為偶數(shù)時(shí)才顯示對(duì)話框。4.7.3函數(shù)的返回值【例4-19】JavaScript帶有返回值函數(shù)的應(yīng)用4.8.1查找HTML元素4.8.2DOMHTML4.8.3DOMCSS4.8.4DOM事件4.8.5DOM節(jié)點(diǎn)4.8文檔對(duì)象模型DOM4.8.1查找HTML元素在JavaScript中有三種方式可以查找HTML元素：通過HTML元素的id名稱查找；通過HTML元素的標(biāo)簽名稱查找；通過HTML元素的類名稱查找。4.8.1查找HTML元素1.通過id查找HTML元素一般默認(rèn)不同的HTML元素使用不一樣的id名稱以示區(qū)別，因此通過id名稱找到指定的單個(gè)元素。在JavaScript中語法如下：document.getElementById("id名稱");其中g(shù)etElementById()方法是遵照駝峰命名法，即第一個(gè)單詞全小寫，后面的每一個(gè)單詞首字母大寫的方式。這種命名方法在JavaScript中比較普遍。如果未找到該元素，則返回值為null；如果找到該元素，則會(huì)以對(duì)象的形式返回。4.8.1查找HTML元素1.通過id查找HTML元素例如，查找id="test"的元素，并獲取該元素內(nèi)部的文本內(nèi)容：//根據(jù)id名稱獲取元素對(duì)象vartest=document.getElementById("test");//獲取元素內(nèi)容varresult=test.innerHTML;為簡(jiǎn)便代碼閱讀效果，使用了與id名稱同名的變量test來獲取指定元素，該變量名稱也可以是其他自定義變量名，不影響運(yùn)行效果。innerHTML可以用于獲取元素內(nèi)部的HTML代碼，關(guān)于innerHTML更多用法請(qǐng)參考下一節(jié)4.12.2。4.8.1查找HTML元素2.通過標(biāo)簽名查找HTML元素HTML元素均有固定的標(biāo)簽名稱，因此通過標(biāo)簽名稱可以找到指定的單個(gè)或一系列元素。在JavaScript中語法如下：document.getElementsByTagName("標(biāo)簽名稱");此時(shí)方法中的Elements是復(fù)數(shù)形式，因?yàn)橐紤]到有可能存在多個(gè)元素符合要求。同樣如果未找到符合的元素，則返回值為null；如果有多個(gè)符合條件的元素，則返回值是數(shù)組的形式。4.8.1查找HTML元素2.通過標(biāo)簽名查找HTML元素例如，查找所有的段落元素<p>，并獲取第一個(gè)段落標(biāo)簽內(nèi)部的文本內(nèi)容：vartest=document.getElementByTagName("p");

varresult=p[0].innerHTML;因?yàn)橛卸鄠€(gè)段落標(biāo)簽，因此變量返回值是數(shù)組的形式。其中第一個(gè)段落標(biāo)簽對(duì)應(yīng)的是p[0]，以此類推，最后一個(gè)元素對(duì)應(yīng)的索引號(hào)為數(shù)組長(zhǎng)度減1。4.8.1查找HTML元素3.通過類名查找HTML元素document.getElementsByClassName()方法可用于根據(jù)類名稱獲取HTML元素。在JavaScript中語法如下：document.getElementsByClassName("類名稱");此時(shí)方法中的Elements是復(fù)數(shù)形式，因?yàn)橐紤]到有可能存在多個(gè)元素符合要求。同樣如果未找到符合的元素，則返回值為null；如果有多個(gè)符合條件的元素，則返回值是數(shù)組的形式。注：該方法在IE5、6、7、8版本中使用均無效，為考慮各個(gè)版本瀏覽器的兼容性，如果不能保證用戶使用IE5、6、7、8版本以外的瀏覽器則不建議使用此方法來獲取HTML元素。4.8.1查找HTML元素【例4-20】JavaScriptDOM查找元素的應(yīng)用4.8.2DOMHTML1.創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容2.改變HTML元素內(nèi)容3.改變HTML元素屬性4.8.2DOMHTML1.創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容在JavaScript中，使用document.write()方法可以往HTML頁(yè)面動(dòng)態(tài)輸出內(nèi)容。例如：<body><script>document.write("Hello2016");</script></body>上述代碼片段表示將在空白頁(yè)面上動(dòng)態(tài)輸出字符串"Hello2016"。需要注意的是，alert()方法中的換行符\n在這里是無效的，如果需要輸出換行直接使用HTML換行標(biāo)簽<br>即可。4.8.2DOMHTML1.創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容【例4-21】JavaScriptDOM動(dòng)態(tài)生成HTML內(nèi)容注：每次打開生成的時(shí)間都是實(shí)時(shí)更新的。

4.8.2DOMHTML2.改變HTML元素內(nèi)容innerHTML可以用于獲取元素內(nèi)容，也可以改變?cè)貎?nèi)容。使用innerHTML屬性獲取或更改的元素內(nèi)容可以包括HTML標(biāo)簽本身。獲取元素內(nèi)容的語法結(jié)構(gòu)如下：更改元素內(nèi)容的語法結(jié)構(gòu)如下：var變量名=元素對(duì)象.innerHTML;元素對(duì)象.innerHTML=新的內(nèi)容;這里的元素對(duì)象可以使用document對(duì)象的getElementById("id名稱")方法獲取。4.8.2DOMHTML2.改變HTML元素內(nèi)容【例4-22】JavaScriptDOM修改元素內(nèi)容4.8.2DOMHTML3.改變HTML元素屬性在JavaScript還可以根據(jù)屬性名稱動(dòng)態(tài)地修改元素屬性。其語法結(jié)構(gòu)如下：例如，更改id="image"的圖片地址src屬性：元素對(duì)象.attribute=新的屬性值;varimg=document.getElementById("image");img.src="image/newpic.jpg";4.8.2DOMHTML3.改變HTML元素屬性也可以使用setAttribute()方法達(dá)到同樣的效果。其語法格式如下：例如，更改id="image"的圖片地址src屬性的代碼修改后如下：元素對(duì)象.setAttribute("屬性名稱","新的屬性值");varimg=document.getElementById("image");img.setAttribute("src","image/newpic.jpg");4.8.2DOMHTML3.改變HTML元素屬性【例4-23】JavaScriptDOM修改元素屬性4.8.3DOMCSSJavaScript還可以改變HTML元素的CSS樣式。其語法結(jié)構(gòu)如下：元素對(duì)象.style.屬性=新的值;這里的元素對(duì)象可以使用document對(duì)象的getElementById("id名稱")方法獲取。屬性指的是在CSS樣式中的屬性名稱，等號(hào)右邊填寫該屬性更改后的樣式值。4.8.3DOMCSS例如，更改id="test"的元素背景顏色為藍(lán)色：上述代碼也可以連成一句，寫法如下：vartest=document.getElementById("test");test.style.backgroundColor="blue";需要注意的是，這里元素CSS屬性名稱需要修改成符合camel標(biāo)記法的規(guī)則的寫法，即首個(gè)單詞全小寫，后面的每個(gè)單詞均首字母大寫。而屬性值在定義時(shí)需要加上雙引號(hào)。vartest=document.getElementById("test").style.backgroundColor="blue";4.8.3DOMCSS【例4-24】JavaScriptDOM修改元素CSS樣式4.8.4DOM事件JavaScript還可以在HTML頁(yè)面狀態(tài)發(fā)生變化時(shí)執(zhí)行代碼，這種狀態(tài)的變化稱為DOM事件（Event）。4.8.4DOM事件例如用戶點(diǎn)擊元素會(huì)觸發(fā)點(diǎn)擊事件，使用事件屬性onclick就可以捕獲這一事件。為元素的onclick屬性添加需要的JavaScript代碼，即可做到用戶點(diǎn)擊元素時(shí)觸發(fā)動(dòng)作。<buttononclick="alert('hi')">點(diǎn)我會(huì)彈出對(duì)話框</button>常見事件如表4-26所示。4.8.4DOM事件JavaScript代碼可以直接在onclick屬性的雙引號(hào)中添加，也可以寫到JavaScript函數(shù)中，在onclick屬性的雙引號(hào)中調(diào)用函數(shù)名稱。例如上述代碼可以改寫為：<buttononclick="test()">點(diǎn)我會(huì)彈出對(duì)話框</button><script>functiontest(){alert("hi");}</script>以上兩種方法效果完全相同，可根據(jù)代碼量決定采用其中哪種方式，假如點(diǎn)擊事件觸發(fā)后需要執(zhí)行的代碼較多，建議使用函數(shù)調(diào)用的方式。4.8.4DOM事件【例4-25】DOM事件的簡(jiǎn)單應(yīng)用

4.8.5DOM節(jié)點(diǎn)使用JavaScript也可以為HTML頁(yè)面動(dòng)態(tài)地添加和刪除HTML元素。4.8.5DOM節(jié)點(diǎn)1.添加HTML元素添加HTML元素有兩個(gè)步驟，先要?jiǎng)?chuàng)建需要添加的HTML元素，然后將其追加在一個(gè)已存在的元素中去。使用document對(duì)象的createElement()方法可以創(chuàng)建新的元素，其語法結(jié)構(gòu)如下：例如，創(chuàng)建一個(gè)新的段落標(biāo)簽<p>：document.createElement("元素標(biāo)簽名");document.createElem