網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件

第7章JavaScript基礎(chǔ)應(yīng)用7.1JavaScript基礎(chǔ)語(yǔ)法7.2DOM基礎(chǔ)操作7.3實(shí)現(xiàn)定時(shí)器7.4

使用數(shù)組熟悉JavaScript基礎(chǔ)語(yǔ)法了解定時(shí)器的使用掌握DOM基本操作掌握J(rèn)avaScript的基礎(chǔ)應(yīng)用引言JavaScript在網(wǎng)頁(yè)開(kāi)發(fā)中的應(yīng)用是十分廣泛的，網(wǎng)頁(yè)中的許多動(dòng)態(tài)功能都可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)，為用戶(hù)呈現(xiàn)出簡(jiǎn)潔美觀的網(wǎng)頁(yè)效果，極大地提升了用戶(hù)的瀏覽體驗(yàn)感。7.1JavaScript基礎(chǔ)語(yǔ)法創(chuàng)建對(duì)象案例—選取圖書(shū)列表DOM獲取元素節(jié)點(diǎn)JavaScript函數(shù)流程控制7.1JavaScript基礎(chǔ)語(yǔ)法JavaScript是一個(gè)無(wú)序集合，所有事物都是對(duì)象，比如字符串、數(shù)值、數(shù)組、函數(shù)等。每個(gè)對(duì)象帶有屬性和方法。對(duì)象的屬性反映事物的特征，比如年齡、身高等。對(duì)象的方法反映事物的行為，比如吃飯、睡覺(jué)等。對(duì)象有4種創(chuàng)建方式，分別為字面量方式創(chuàng)建對(duì)象、newObject()創(chuàng)建對(duì)象、工廠函數(shù)創(chuàng)建對(duì)象和自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象。7.1.1

創(chuàng)建對(duì)象7.1JavaScript基礎(chǔ)語(yǔ)法7.1.1創(chuàng)建對(duì)象字面量創(chuàng)建對(duì)象是一種簡(jiǎn)便的方式，具體用法如下所示。varstudent={name:'張三',age:15,play:function(){console.log('籃球，排球，足球');}}值得注意的是，以字面量的方式創(chuàng)建對(duì)象，屬性名和屬性值（鍵值對(duì)）之間用冒號(hào)（:）進(jìn)行分隔，而屬性與屬性之間用逗號(hào)（,）進(jìn)行分隔，最后一個(gè)屬性末尾不需要逗號(hào)。7.1JavaScript基礎(chǔ)語(yǔ)法7.1.1創(chuàng)建對(duì)象newObject()方式創(chuàng)建對(duì)象，先通過(guò)object構(gòu)造器new一個(gè)對(duì)象，再往里豐富成員信息，具體用法如下所示。varstudent=newObject();='張三';student.age=15;student.play=function(){console.log('籃球，排球，足球');}字面量和newObject()這2種方式創(chuàng)建的的對(duì)象本質(zhì)上沒(méi)有任何區(qū)別，都是在內(nèi)存中創(chuàng)建出一個(gè)對(duì)象，并能夠綁定屬性和方法。它們的不足之處是，每創(chuàng)建一個(gè)對(duì)象，屬性和方法都需要重新綁定一份，會(huì)產(chǎn)生大量重復(fù)的代碼。7.1JavaScript基礎(chǔ)語(yǔ)法7.1.1創(chuàng)建對(duì)象工廠函數(shù)方式創(chuàng)建對(duì)象是使用函數(shù)來(lái)創(chuàng)建對(duì)象，類(lèi)似于一個(gè)“工廠模式”，可以大批量地創(chuàng)建同種類(lèi)型的對(duì)象，具體用法如下所示。functioncreateStudent(name,age){varstudent=newObject();=nane;student.age=age;student.play=function(){console.log('籃球，排球，足球');工廠函數(shù)方式雖然解決了重復(fù)實(shí)例化多個(gè)對(duì)象的問(wèn)題，同時(shí)減少重復(fù)代碼率，但沒(méi)有解決對(duì)象識(shí)別的問(wèn)題，導(dǎo)致對(duì)象類(lèi)型不明確。}returnstudent;}varstu1=createStudent('張三',15);varstu2=createStudent('李四',16);stu1.play();7.1JavaScript基礎(chǔ)語(yǔ)法7.1.1創(chuàng)建對(duì)象自定義構(gòu)造函數(shù)方式是通過(guò)給構(gòu)造函數(shù)傳遞不同的參數(shù)，然后調(diào)用構(gòu)造函數(shù)來(lái)創(chuàng)建不同對(duì)象，具體用法如下所示。functionStudent(name,age){=name;this.age=age;

任何函數(shù)，只要通過(guò)new操作符來(lái)調(diào)用，它就可以作為構(gòu)造函數(shù)；如果不用new操作符來(lái)調(diào)用，它就是一個(gè)普通函數(shù)的調(diào)用。構(gòu)造函數(shù)是一種特殊的函數(shù)，主要用來(lái)初始化對(duì)象，即為對(duì)象成員變量賦初始值，構(gòu)造函數(shù)要和new操作符一同使用才有意義。構(gòu)造函數(shù)是用于創(chuàng)建一類(lèi)對(duì)象，與普通函數(shù)進(jìn)行區(qū)分，首字母需要大寫(xiě)。this.play=function(){console.log('籃球，排球，足球');}}varstu1=createStudent('張三',15);7.1JavaScript基礎(chǔ)語(yǔ)法7.1.1創(chuàng)建對(duì)象new操作符的4個(gè)作用說(shuō)明如下。開(kāi)辟內(nèi)存空間，存儲(chǔ)新創(chuàng)建的對(duì)象。new操作符會(huì)讓this指向這個(gè)新的對(duì)象執(zhí)行構(gòu)造函數(shù)為新對(duì)象添加屬性和方法new操作符會(huì)返回新創(chuàng)建的對(duì)象。7.1JavaScript基礎(chǔ)語(yǔ)法7.1.1創(chuàng)建對(duì)象構(gòu)造函數(shù)中this的4個(gè)特點(diǎn)說(shuō)明如下。在定義函數(shù)的時(shí)候this是不確定的，只有在調(diào)用的時(shí)候才能明確其指向。一般函數(shù)直接執(zhí)行，內(nèi)部this指向全局window對(duì)象。函數(shù)作為一個(gè)對(duì)象的方法，被該對(duì)象所調(diào)用，那么this指向的是該對(duì)象。構(gòu)造函數(shù)中的this其實(shí)是一個(gè)隱式對(duì)象，類(lèi)似一個(gè)初始化的模型，所有方法和屬性都掛載到了這個(gè)隱式對(duì)象身上，后續(xù)通過(guò)new操作符來(lái)調(diào)用，從而實(shí)現(xiàn)實(shí)例化對(duì)象的使用。7.1JavaScript基礎(chǔ)語(yǔ)法7.1.2

JavaScript函數(shù)函數(shù)是指一組針對(duì)處理某一邏輯的代碼集合，當(dāng)被調(diào)用時(shí)可以重復(fù)執(zhí)行，是計(jì)算機(jī)編程中非常重要的語(yǔ)法結(jié)構(gòu)。function函數(shù)名(參數(shù)1,參數(shù)2,...){函數(shù)體}//定義函數(shù)函數(shù)名(參數(shù)1,參數(shù)2,...)//調(diào)用函數(shù)語(yǔ)法格式定義函數(shù)的基本語(yǔ)法格式如下所示。7.1JavaScript基礎(chǔ)語(yǔ)法7.1.2

JavaScript函數(shù)在函數(shù)的基本語(yǔ)法中，function為固定語(yǔ)法格式，函數(shù)名為自定義字符，中間用空格隔開(kāi)。小括號(hào)與大括號(hào)也為固定寫(xiě)法，小括號(hào)中的是參數(shù)，大括號(hào)中的是函數(shù)體，即一個(gè)代碼集合，用于實(shí)現(xiàn)函數(shù)功能的語(yǔ)句。通常，在函數(shù)中可以不添加參數(shù)，也可以添加多個(gè)參數(shù)，一個(gè)函數(shù)最多可以有255個(gè)參數(shù)。在定義函數(shù)中添加的參數(shù)稱(chēng)為形式參數(shù)，簡(jiǎn)稱(chēng)形參；而在調(diào)用函數(shù)中添加的參數(shù)稱(chēng)為實(shí)際參數(shù)，簡(jiǎn)稱(chēng)實(shí)參。當(dāng)函數(shù)調(diào)用時(shí)，即是實(shí)參賦值給形參的過(guò)程。7.1JavaScript基礎(chǔ)語(yǔ)法在JavaScript中，DOM獲取元素節(jié)點(diǎn)的方法有6種，分別為通過(guò)ID獲取元素（getElementById）、通過(guò)name屬性獲取元素（getElementsByName）、通過(guò)標(biāo)簽名獲取元素（getElementsByTagName）、通過(guò)類(lèi)名獲取元素（getElementsByClassName）、通過(guò)選擇器獲取一個(gè)元素（querySelector）、通過(guò)選擇器獲取一組元素（querySelectorAll），接下來(lái)將具體介紹這6種方法。7.1.3

DOM獲取元素節(jié)點(diǎn)7.1JavaScript基礎(chǔ)語(yǔ)法7.1.3

DOM獲取元素節(jié)點(diǎn)通過(guò)元素的ID名，使用getElementById()方法可以獲取指定元素，具體用法如下所示。通過(guò)ID獲取元素（getElementById）document.getElementById("ID名")例varbox=document.getElementById("main")7.1JavaScript基礎(chǔ)語(yǔ)法7.1.3

DOM獲取元素節(jié)點(diǎn)通過(guò)元素的name屬性，使用getElementsByName()方法可以獲取指定元素?cái)?shù)組，具體用法如下所示。通過(guò)name屬性獲取元素（getElementsByName）document.getElementsByName("name屬性名")例varinput1=document.getElementsByName("user")getElementsByName()方法僅用于Input、Radio、Checkbox等元素對(duì)象。7.1JavaScript基礎(chǔ)語(yǔ)法7.1.3

DOM獲取元素節(jié)點(diǎn)通過(guò)元素的標(biāo)簽名，使用getElementsByTagName()方法可以獲取指定標(biāo)簽名稱(chēng)的所有元素，具體用法如下所示。通過(guò)標(biāo)簽名獲取元素（getElementsByTagName）document.getElementsByTagName("標(biāo)簽名")例varbox1=document.getElementsByTagName("p")7.1JavaScript基礎(chǔ)語(yǔ)法7.1.3

DOM獲取元素節(jié)點(diǎn)通過(guò)元素的class類(lèi)名，使用getElementsByClassName()方法可以獲取指定class類(lèi)名的所有元素，具體用法如下所示。通過(guò)class類(lèi)名獲取元素（getElementsByClassName）document.getElementsByClassName("class類(lèi)名")例varbox2=document.getElementsByClassName("info")7.1JavaScript基礎(chǔ)語(yǔ)法7.1.3

DOM獲取元素節(jié)點(diǎn)通過(guò)元素的選擇器，使用querySelector()方法可以獲取指定選擇器的一個(gè)元素，具體用法如下所示。通過(guò)選擇器獲取一個(gè)元素（querySelector）document.querySelector("選擇器")例varbox3=document.querySelector("#main")7.1JavaScript基礎(chǔ)語(yǔ)法7.1.3

DOM獲取元素節(jié)點(diǎn)通過(guò)元素的選擇器，使用querySelectorAll()方法可以獲取指定選擇器的多個(gè)元素，具體用法如下所示。通過(guò)選擇器獲取一組元素（querySelectorAll）document.querySelectorAll("選擇器")例varbox4=document.querySelectorAll(".info")除了上述獲取元素的6種方法，DOM還有獲取html和body的方法。7.1JavaScript基礎(chǔ)語(yǔ)法7.1.3

DOM獲取元素節(jié)點(diǎn)DOM獲取HTML元素的具體用法如下所示。DOM獲取HTML元素（documentElement）document.documentElement例varh1=document.documentElement7.1JavaScript基礎(chǔ)語(yǔ)法7.1.3

DOM獲取元素節(jié)點(diǎn)DOM獲取body元素的具體用法如下所示。DOM獲取body元素document.body例varb1=document.body7.1JavaScript基礎(chǔ)語(yǔ)法JavaScript中的流程控制語(yǔ)句與其他語(yǔ)言相似，一般可分為順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)3種。順序結(jié)構(gòu)是程序從上到下、從左到右依次執(zhí)行。選擇結(jié)構(gòu)是按照給定的邏輯條件決定執(zhí)行順序，比如if語(yǔ)句和switch語(yǔ)句。循環(huán)結(jié)構(gòu)是根據(jù)代碼的邏輯條件來(lái)判斷是否重復(fù)執(zhí)行某一段程序，比如for循環(huán)、while循環(huán)和do...while循環(huán)。7.1.4

流程控制7.1JavaScript基礎(chǔ)語(yǔ)法7.1.4

流程控制單向選擇只有1條選擇語(yǔ)句，符合條件即選擇，不符合條件即不選擇，其語(yǔ)法格式如下所示。if語(yǔ)句1.單向選擇if語(yǔ)句是選擇結(jié)構(gòu)中運(yùn)用最廣泛的語(yǔ)句，一般可分為單向選擇、雙向選擇和多向選擇3種形式。if（邏輯條件）{語(yǔ)句1;}語(yǔ)句2;在單向選擇的語(yǔ)法格式中，如果if語(yǔ)句的邏輯條件返回true，則執(zhí)行語(yǔ)句1和語(yǔ)句2；如果if語(yǔ)句的循環(huán)條件返回false，則只執(zhí)行語(yǔ)句2。7.1JavaScript基礎(chǔ)語(yǔ)法7.1.4

流程控制雙向選擇有2條選擇語(yǔ)句，符合條件選擇1條語(yǔ)句，不符合條件即選擇另1條語(yǔ)句，其語(yǔ)法格式如下所示。if語(yǔ)句2.雙向選擇if（邏輯條件）{語(yǔ)句1;}else{語(yǔ)句2;}在雙向選擇的語(yǔ)法格式中，如果if語(yǔ)句的邏輯條件返回true，則執(zhí)行語(yǔ)句1；如果if語(yǔ)句的邏輯條件返回false，則執(zhí)行else內(nèi)的語(yǔ)句2。7.1JavaScript基礎(chǔ)語(yǔ)法7.1.4

流程控制多向選擇有多條選擇語(yǔ)句，進(jìn)行多條判斷，根據(jù)判斷結(jié)構(gòu)執(zhí)行相應(yīng)的語(yǔ)句，其語(yǔ)法格式如下所示。if語(yǔ)句3.多向選擇if（邏輯條件1）{語(yǔ)句1;}elseif（邏輯條件2）{語(yǔ)句2;}在多向選擇的語(yǔ)法格式中，如果if語(yǔ)句的邏輯條件1返回true，則執(zhí)行語(yǔ)句1,。如果if語(yǔ)句的邏輯條件1返回false，則執(zhí)行elseif中的邏輯條件2，如果邏輯條件2返回true，則執(zhí)行語(yǔ)句2。以此類(lèi)推，如果上面的所有邏輯條件都返回false，則執(zhí)行else內(nèi)的語(yǔ)句n。......else{語(yǔ)句n;}7.1JavaScript基礎(chǔ)語(yǔ)法7.1.4

流程控制for循環(huán)是循環(huán)結(jié)構(gòu)中常見(jiàn)的語(yǔ)句，同時(shí)也是使用最為廣泛的循環(huán)語(yǔ)句，能夠反復(fù)執(zhí)行一段代碼，提高代碼的復(fù)用率，其語(yǔ)法格式如下所示。for循環(huán)for（初始化語(yǔ)句;循環(huán)條件;控制條件）{循環(huán)體語(yǔ)句;}在上述語(yǔ)法格式中，for循環(huán)先執(zhí)行初始化語(yǔ)句，再判斷循環(huán)條件，如果循環(huán)條件返回true，則執(zhí)行循環(huán)體語(yǔ)句，否則直接退出循環(huán)，然后執(zhí)行迭代語(yǔ)句，改變循環(huán)變量的值，完成1次循環(huán)。接著又進(jìn)入下一次循環(huán)，直到循環(huán)條件返回false，結(jié)束循環(huán)。7.1JavaScript基礎(chǔ)語(yǔ)法7.1.4流程控制break語(yǔ)句用于跳出整體循環(huán)，停止后續(xù)循環(huán)操作。用break語(yǔ)句計(jì)算出1~10之間，截止到能被7整除的整數(shù)，之前所有整數(shù)的和。具體代碼如下。break語(yǔ)句

演示說(shuō)明<body><script>vars=0;

for(vari=1;i<10;i++){

if(i%7==0){//判斷條件為能被7整除

break;//終止當(dāng)前循環(huán)，順序執(zhí)行循環(huán)后面的語(yǔ)句}

s+=i;//循環(huán)累加console.log("本次循環(huán)數(shù)值為"+i);//依次列出執(zhí)行哪一個(gè)循環(huán)}console.log(s);//計(jì)算整數(shù)的和</script></body>主體代碼

例7.17.1JavaScript基礎(chǔ)語(yǔ)法7.1.4流程控制break語(yǔ)句用于跳出整體循環(huán)，停止后續(xù)循環(huán)操作。用break語(yǔ)句計(jì)算出1~10之間，截止到能被7整除的整數(shù)，之前所有整數(shù)的和。運(yùn)行效果如下。break語(yǔ)句

演示說(shuō)明7.1JavaScript基礎(chǔ)語(yǔ)法7.1.4流程控制continue語(yǔ)句與break語(yǔ)句類(lèi)似，但continue語(yǔ)句只跳出本次循環(huán)，不影響后續(xù)循環(huán)。計(jì)算出1~10之間所有不能被7整除的整數(shù)的和。具體代碼如下所示。continue語(yǔ)句

演示說(shuō)明<body><script>vars=0;

for(vari=1;i<10;i++){

if(i%7==0){//判斷條件為能被7整除continue;//跳出本次循環(huán)，進(jìn)入下一次循環(huán)}

s+=i;//循環(huán)累加console.log("本次循環(huán)數(shù)值為"+i);//依次列出執(zhí)行哪一個(gè)循環(huán)}console.log(s);//計(jì)算整數(shù)的和</script></body>主體代碼

例7.27.1JavaScript基礎(chǔ)語(yǔ)法7.1.4流程控制continue語(yǔ)句與break語(yǔ)句類(lèi)似，但continue語(yǔ)句只跳出本次循環(huán)，不影響后續(xù)循環(huán)。計(jì)算出1~10之間所有不能被7整除的整數(shù)的和。運(yùn)行效果如下。continue語(yǔ)句

演示說(shuō)明由以上2個(gè)示例可知，相似的循環(huán)體系，break語(yǔ)句和continue語(yǔ)句的不同運(yùn)用，會(huì)達(dá)到不同的效果，break語(yǔ)句可用于終止后面不必要的循環(huán)，continue語(yǔ)句可用于篩選出不需要的循環(huán)，要根據(jù)實(shí)際情況進(jìn)行合理選擇，才能達(dá)到好的效果。7.1JavaScript基礎(chǔ)語(yǔ)法7.1.5

案例-選取圖書(shū)列表本實(shí)例是一個(gè)選取圖書(shū)列表的頁(yè)面。該頁(yè)面主要由表格的<table>標(biāo)簽、<th>標(biāo)簽、<tr>標(biāo)簽、<td>標(biāo)簽以及<h3>標(biāo)題標(biāo)簽構(gòu)成，選取圖書(shū)列表的頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如圖所示。<head><title>選取圖書(shū)列表</title>

<linktype="text/css"rel="stylesheet"href="choose.css"></head><body><h3>選取圖書(shū)列表</h3><table><thead><tr>

<th><inputtype="checkbox"id="all">(全選)</th><th>書(shū)名</th><!--此處省略雷同代碼--></tr></thead><tbodyid="main"><tr>

<td><inputtype="checkbox"></td><td>基督山伯爵</td><!--此處省略雷同代碼--></tr>

<!--此處省略雷同代碼--></tbody></table><scripttype="text/javascript"src="select.js"></script></body>代碼實(shí)現(xiàn)7.1JavaScript基礎(chǔ)語(yǔ)法7.1.5

案例-選取圖書(shū)列表主體代碼

例7.3/*清除頁(yè)面默認(rèn)邊距*/*{margin:0;padding:0;}/*設(shè)置標(biāo)題*/h3{text-align:center;margin:20pxauto;}/*為表格標(biāo)題和單元格添加邊框*/td,th{

border:1pxsolid#cccccc;}/*設(shè)置整個(gè)表格*/table{width:600px;height:250px;

text-align:center;/*文本居中對(duì)齊*/border:1pxsolid#cccccc;/*添加邊框樣式*/border-collapse:collapse;/*合并表格*/margin:20pxauto;/*設(shè)置外邊距*/}代碼實(shí)現(xiàn)7.1JavaScript基礎(chǔ)語(yǔ)法7.1.5

案例-選取圖書(shū)列表CSS部分代碼

例7.3/*設(shè)置表格標(biāo)題*/th{height:40px;background-color:#0099cc;color:white;}/*為表格單元格添加內(nèi)邊距*/td{padding:10px;}/*設(shè)置表格行*/tr{background-color:#eee;

cursor:pointer;/*改變鼠標(biāo)形狀*/}/*當(dāng)鼠標(biāo)放至表格行上時(shí)*/tr:hover{background-color:#CC9999;/*表格行改變背景顏色*/}7.1JavaScript基礎(chǔ)語(yǔ)法7.1.5

案例-選取圖書(shū)列表代碼實(shí)現(xiàn)在上述CSS代碼中，首先為表格的標(biāo)題和單元格添加邊框，再設(shè)置整個(gè)表格，使用border-collapse屬性將表格的邊框合并，并使用text-align屬性將表格中的文本居中對(duì)齊，然后使用CSS屬性設(shè)計(jì)表格樣式，最后當(dāng)鼠標(biāo)放至表格的每一行時(shí)，改變表格行的背景顏色。//1.獲取元素varthAll=document.getElementById("all")//獲取全選復(fù)選框vartrArr=document.querySelectorAll("#maininput")//獲取表格主體部分的所有復(fù)選框//2.為全選復(fù)選框#all添加點(diǎn)擊事件thAll.onclick=function(){//3.遍歷下面的每一個(gè)復(fù)選框for(vari=0;i<trArr.length;i++){

trArr[i].checked=this.checked;//this.checked為當(dāng)前全選復(fù)選框的狀態(tài)}}//4.為每個(gè)復(fù)選框添加點(diǎn)擊事件for(vari=0;i<trArr.length;i++){trArr[i].onclick=function(){//5.點(diǎn)擊下面的每一個(gè)復(fù)選框都要判斷是否5個(gè)都選中了for(vari=0;i<trArr.length;i++){

//如果下面的復(fù)選框沒(méi)全選中，則上面不選中

if(trArr[i].checked==false){

thAll.checked=false;return}}

//如果下面的復(fù)選框全部被選中，則全選復(fù)選框也被選中thAll.checked=true;}}代碼實(shí)現(xiàn)7.1JavaScript基礎(chǔ)語(yǔ)法7.1.5

案例-選取圖書(shū)列表JS代碼

例7.37.1JavaScript基礎(chǔ)語(yǔ)法7.1.5

案例-選取圖書(shū)列表代碼實(shí)現(xiàn)在上述JS代碼中，首先為全選復(fù)選框添加點(diǎn)擊事件，如果它被選中，則其它復(fù)選框是被選中的狀態(tài)；若未被選中，則其它復(fù)選框是未被選中狀態(tài)。然后再給每個(gè)復(fù)選框綁定事件，在該復(fù)選框被點(diǎn)擊后，則遍歷所有的復(fù)選框是否全都被選中或全都未被選中，再把狀態(tài)賦給全選復(fù)選框。本節(jié)小結(jié)本節(jié)內(nèi)容主要講解了JavaScript創(chuàng)建對(duì)象的4種方式，JavaScript函數(shù)，通過(guò)DOM操作獲取元素節(jié)點(diǎn)，JavaScript的流程控制語(yǔ)句。通過(guò)本節(jié)的學(xué)習(xí)，希望讀者可以掌握J(rèn)avaScript的基礎(chǔ)語(yǔ)法，為后面學(xué)習(xí)JavaScript語(yǔ)言奠定基礎(chǔ)。7.2DOM基礎(chǔ)操作DOM操作文本內(nèi)容案例—點(diǎn)擊按鈕切換圖片DOM的增刪改換DOM節(jié)點(diǎn)DOM操作樣式DOM操作屬性7.2DOM基礎(chǔ)操作DOM（DocumentObjectModel，文檔對(duì)象模型）是JavaScript操作網(wǎng)頁(yè)的接口。它的作用是將網(wǎng)頁(yè)轉(zhuǎn)為JavaScript對(duì)象，從而可以用腳本進(jìn)行各種操作，如對(duì)內(nèi)容進(jìn)行增加或刪除。瀏覽器會(huì)根據(jù)DOM模型，將結(jié)構(gòu)化文檔(如HTML和XML)解析成一系列的節(jié)點(diǎn)，然后將節(jié)點(diǎn)組成一個(gè)樹(shù)狀結(jié)構(gòu)（DOMTee）。所有的節(jié)點(diǎn)和最終的樹(shù)狀結(jié)構(gòu)，都有規(guī)范的對(duì)外接口。因此，DOM可以理解成網(wǎng)頁(yè)的編程接口。7.2DOM基礎(chǔ)操作在JavaScript中，需要通過(guò)DOM的操作才能在網(wǎng)頁(yè)上顯示文本內(nèi)容。innerHTML方法可獲取或修改指定標(biāo)簽的信息，包括標(biāo)簽本身和標(biāo)簽的文本內(nèi)容等信息。通過(guò)<divclass="box"><p>這是標(biāo)題</p></div>這個(gè)例子，其具體用法如下所示。7.2.1

DOM操作文本內(nèi)容innerHTMLbox.innerHTML='<h1>這是標(biāo)題</h1>';7.2DOM基礎(chǔ)操作innerText方法只獲取或修改指定標(biāo)簽內(nèi)的具體信息，不包括包括標(biāo)簽本身。通過(guò)<divclass="box"><p>這是標(biāo)題</p></div>這個(gè)例子，其具體用法如下所示。7.2.1

DOM操作文本內(nèi)容innerTextbox.innerText='標(biāo)題';innerHTML和innerText的使用范圍如圖所示。7.2DOM基礎(chǔ)操作HTML文檔中的所有內(nèi)容都是節(jié)點(diǎn)，在DOM節(jié)點(diǎn)中，不同的節(jié)點(diǎn)對(duì)應(yīng)的節(jié)點(diǎn)類(lèi)型可能不一樣，主要有元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)、文檔節(jié)點(diǎn)等節(jié)點(diǎn)類(lèi)型。整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)，每個(gè)HTML元素是元素節(jié)點(diǎn)，HTML元素內(nèi)的文本是文本節(jié)點(diǎn)，每個(gè)HTML屬性是屬性節(jié)點(diǎn)，注釋是注釋節(jié)點(diǎn)。這些不同的節(jié)點(diǎn)類(lèi)型，返回的常數(shù)值是不一樣的。7.2.2

DOM節(jié)點(diǎn)節(jié)點(diǎn)類(lèi)型7.2DOM基礎(chǔ)操作7.2.2DOM節(jié)點(diǎn)在DOM中，通過(guò)nodeType屬性返回節(jié)點(diǎn)類(lèi)型的常數(shù)值，nodeName屬性返回節(jié)點(diǎn)名稱(chēng)，nodeValue屬性返回節(jié)點(diǎn)文本值，節(jié)點(diǎn)類(lèi)型的對(duì)應(yīng)值如表所示。節(jié)點(diǎn)類(lèi)型對(duì)應(yīng)值節(jié)點(diǎn)類(lèi)型nodeTypenodeNamenodeValue元素節(jié)點(diǎn)1大寫(xiě)的HTML元素名Undefined或null屬性節(jié)點(diǎn)2元素屬性名屬性值文本節(jié)點(diǎn)3#text#text的文本值注釋節(jié)點(diǎn)8#comment#comment的文本值文檔節(jié)點(diǎn)9#documentnull<body><divid="box"

title="一個(gè)box盒子">

<p>一個(gè)標(biāo)題</p></div></body>演示說(shuō)明7.2DOM基礎(chǔ)操作7.2.2DOM節(jié)點(diǎn)主體代碼

例7.4<script>

varbox1=document.getElementById("box");console.log("元素節(jié)點(diǎn)的nodeType:"+box1.nodeType)console.log("元素節(jié)點(diǎn)的nodeName:"+box1.nodeName)console.log("元素節(jié)點(diǎn)的nodeValue:"+box1.nodeValue)

varatt=box1.getAttributeNode("title");console.log("屬性節(jié)點(diǎn)的nodeType:"+att.nodeType)console.log("屬性節(jié)點(diǎn)的nodeName:"+att.nodeName)console.log("屬性節(jié)點(diǎn)的nodeValue:"+att.nodeValue)

vartxt=box1.firstChild;console.log("文本節(jié)點(diǎn)的nodeType:"+txt.nodeType)console.log("文本節(jié)點(diǎn)的nodeName:"+txt.nodeName)console.log("文本節(jié)點(diǎn)的nodeValue:"+txt.nodeValue)</script>利用一個(gè)小案例說(shuō)明nodeType屬性、nodeName屬性和nodeValue屬性的使用。具體代碼如下。演示說(shuō)明7.2DOM基礎(chǔ)操作7.2.2DOM節(jié)點(diǎn)利用一個(gè)小案例說(shuō)明nodeType屬性、nodeName屬性和nodeValue屬性的使用。運(yùn)行結(jié)果如下。7.2DOM基礎(chǔ)操作在DOM中，可以將HTML文檔描繪成一個(gè)由多層節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)，而其中的節(jié)點(diǎn)關(guān)系類(lèi)似于傳統(tǒng)的家族關(guān)系，可分為父節(jié)點(diǎn)、子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)。例如，在<html>元素中內(nèi)嵌了<head>與<body>元素，因此，<html>元素為<head>和<body>元素的父節(jié)點(diǎn)，<head>和<body>元素為<html>元素的子節(jié)點(diǎn)，又因?yàn)?lt;head>與<body>元素?fù)碛泄餐母冈毓?jié)點(diǎn)，所以它們彼此間互為兄弟節(jié)點(diǎn)。7.2.2

DOM節(jié)點(diǎn)節(jié)點(diǎn)關(guān)系7.2DOM基礎(chǔ)操作父節(jié)點(diǎn)、子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的具體說(shuō)明，以及獲取節(jié)點(diǎn)的方法如表所示。7.2.2

DOM節(jié)點(diǎn)節(jié)點(diǎn)關(guān)系節(jié)點(diǎn)分類(lèi)說(shuō)明獲取節(jié)點(diǎn)方法父節(jié)點(diǎn)parentNode父節(jié)點(diǎn)元素的父節(jié)點(diǎn)var父節(jié)點(diǎn)=節(jié)點(diǎn)對(duì)象.parentNode子節(jié)點(diǎn)firstChild第一個(gè)子節(jié)點(diǎn)指向在子節(jié)點(diǎn)列表中的第一個(gè)節(jié)點(diǎn)。包含元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)var第一個(gè)子節(jié)點(diǎn)=父節(jié)點(diǎn).firstChildfirstElementChild第一個(gè)子節(jié)點(diǎn)指向在子節(jié)點(diǎn)列表中的第一個(gè)節(jié)點(diǎn)。只包含元素節(jié)點(diǎn)var第一個(gè)子節(jié)點(diǎn)=父節(jié)點(diǎn).firstElementChildlastChild最后一個(gè)子節(jié)點(diǎn)指向在子節(jié)點(diǎn)列表中的最后一個(gè)節(jié)點(diǎn)。包含元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)var最后一個(gè)子節(jié)點(diǎn)=父節(jié)點(diǎn).lastChildlastElementChild最后一個(gè)子節(jié)點(diǎn)指向在子節(jié)點(diǎn)列表中的最后一個(gè)節(jié)點(diǎn)。只包含元素節(jié)點(diǎn)var最后一個(gè)子節(jié)點(diǎn)=父節(jié)點(diǎn).lastElementChildchildNodes所有子節(jié)點(diǎn)所有子節(jié)點(diǎn)的列表var偽數(shù)組=父節(jié)點(diǎn).childNodes7.2DOM基礎(chǔ)操作續(xù)表。7.2.2

DOM節(jié)點(diǎn)節(jié)點(diǎn)關(guān)系節(jié)點(diǎn)分類(lèi)說(shuō)明獲取節(jié)點(diǎn)方法兄弟節(jié)點(diǎn)previousSibling上一個(gè)兄弟節(jié)點(diǎn)指向前一個(gè)兄弟節(jié)點(diǎn),如果這個(gè)節(jié)點(diǎn)就是第一個(gè),那么該值為null。包含元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)var上一個(gè)兄弟節(jié)點(diǎn)=節(jié)點(diǎn)對(duì)象.previousSiblingpreviousElementSibling上一個(gè)兄弟節(jié)點(diǎn)指向前一個(gè)兄弟節(jié)點(diǎn),如果這個(gè)節(jié)點(diǎn)就是第一個(gè),那么該值為null。只包含元素節(jié)點(diǎn)var上一個(gè)兄弟節(jié)點(diǎn)=節(jié)點(diǎn)對(duì)象.previousElementSiblingnextSibling下一個(gè)兄弟節(jié)點(diǎn)指向后一個(gè)兄弟節(jié)點(diǎn),如果這個(gè)節(jié)點(diǎn)就是最后一個(gè),那么該值為null。包含元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)var下一個(gè)兄弟節(jié)點(diǎn)=節(jié)點(diǎn)對(duì)象.nextSiblingnextElementSibling下一個(gè)兄弟節(jié)點(diǎn)指向后一個(gè)兄弟節(jié)點(diǎn),如果這個(gè)節(jié)點(diǎn)就是最后一個(gè),那么該值為null。只包含元素節(jié)點(diǎn)var下一個(gè)兄弟節(jié)點(diǎn)=節(jié)點(diǎn)對(duì)象.nextElementSibling7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換創(chuàng)建節(jié)點(diǎn)在DOM中，createElement()方法通過(guò)傳入指定的一個(gè)標(biāo)簽名可創(chuàng)建一個(gè)元素節(jié)點(diǎn)。如果傳入的標(biāo)簽名是一個(gè)未知的，則會(huì)創(chuàng)建一個(gè)自定義的標(biāo)簽。

創(chuàng)建節(jié)點(diǎn)的語(yǔ)法格式如下所示。document.createElement("標(biāo)簽名")創(chuàng)建好一個(gè)元素節(jié)點(diǎn)之后，其實(shí)并沒(méi)有把創(chuàng)建好的標(biāo)簽元素添加到網(wǎng)頁(yè)中，需要配合添加節(jié)點(diǎn)的方法一同使用，才能在網(wǎng)頁(yè)中顯示新創(chuàng)建的標(biāo)簽元素。7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換添加節(jié)點(diǎn)當(dāng)前節(jié)點(diǎn).appendChild(插入的節(jié)點(diǎn));1.appendChild()方法appendChild()方法向當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)，其語(yǔ)法格式如下所示。7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換添加節(jié)點(diǎn)1.appendChild()方法<ulid="list"><li>已有的列表項(xiàng)</li></ul>主體代碼

例7.5<script>varlist=document.getElementById("list");//通過(guò)ID名獲取當(dāng)前節(jié)點(diǎn)

varli=document.createElement("li");//創(chuàng)建新的節(jié)點(diǎn)li.innerHTML="新添加的列表項(xiàng)1";//為新節(jié)點(diǎn)添加內(nèi)容list.appendChild(li);//使用appendChild()方法在網(wǎng)頁(yè)上添加新節(jié)點(diǎn)</script>演示說(shuō)明。在已有的無(wú)序列表中使用appendChild()方法添加一個(gè)新的項(xiàng)目列表。具體代碼如下。7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換添加節(jié)點(diǎn)1.appendChild()方法演示說(shuō)明。在已有的無(wú)序列表中使用appendChild()方法添加一個(gè)新的項(xiàng)目列表。運(yùn)行結(jié)果如下。7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換添加節(jié)點(diǎn)1.appendChild()方法在appendChild()方法中，由于可將新的子節(jié)點(diǎn)添加到當(dāng)前子節(jié)點(diǎn)末尾，通過(guò)對(duì)原有節(jié)點(diǎn)進(jìn)行appendChild()方法的操作，可對(duì)其進(jìn)行“剪切”操作。即在appendChild()方法中傳入當(dāng)前節(jié)點(diǎn)中的某一個(gè)子節(jié)點(diǎn)，可將該子節(jié)點(diǎn)移動(dòng)到末尾位置，便可其改變位置，實(shí)現(xiàn)“剪切”效果。7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換添加節(jié)點(diǎn)當(dāng)前節(jié)點(diǎn).insertBefore(新添加的子節(jié)點(diǎn),子節(jié)點(diǎn));2.insertBefore()方法insertBefore()方法是在當(dāng)前節(jié)點(diǎn)前添加一個(gè)新的子節(jié)點(diǎn)，可以接收2個(gè)參數(shù)，第1個(gè)參數(shù)是新添加的節(jié)點(diǎn)，第2個(gè)參數(shù)是當(dāng)前節(jié)點(diǎn)的一個(gè)子節(jié)點(diǎn)。根據(jù)傳入的第2個(gè)參數(shù)不同，新添加的子節(jié)點(diǎn)所處的位置也會(huì)不同。insertBefore()語(yǔ)法格式如下所示。7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換添加節(jié)點(diǎn)2.insertBefore()方法<ulid="list"><li>已有的列表項(xiàng)1</li><li>已有的列表項(xiàng)2</li></ul>主體代碼

例7.6<script>varlist=document.getElementById("list");//通過(guò)ID名獲取當(dāng)前節(jié)點(diǎn)varli=list.getElementsByTagName("li")//通過(guò)標(biāo)簽名獲取當(dāng)前節(jié)點(diǎn)的一個(gè)子節(jié)點(diǎn)

varli2=document.createElement("li");//創(chuàng)建新的節(jié)點(diǎn)li2.innerHTML="新添加的列表項(xiàng)2";//為新節(jié)點(diǎn)添加內(nèi)容list.insertBefore(li2,li[1]);//使用insertBefore()方法在網(wǎng)頁(yè)上添加新節(jié)點(diǎn)</script>演示說(shuō)明，在已有的無(wú)序列表中使用insertBefore()方法添加一個(gè)新的項(xiàng)目列表。具體代碼如下。7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換添加節(jié)點(diǎn)2.insertBefore()方法演示說(shuō)明，在已有的無(wú)序列表中使用insertBefore()方法添加一個(gè)新的項(xiàng)目列表。運(yùn)行效果如下。在insertBefore()方法中，由于傳入的第2個(gè)參數(shù)是列表項(xiàng)中的第2個(gè)列表項(xiàng)子節(jié)點(diǎn)，新添加的子節(jié)點(diǎn)在第2個(gè)列表項(xiàng)節(jié)點(diǎn)的前面，所以insertBefore()方法可以將新的子節(jié)點(diǎn)添加到指定位置。7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換刪除節(jié)點(diǎn)removeChild()方法用于刪除指定的節(jié)點(diǎn)，其語(yǔ)法格式如下所示。當(dāng)前節(jié)點(diǎn).removeChild(刪除的子節(jié)點(diǎn));在例7.6的代碼中的“l(fā)ist.insertBefore(li2,li[1]);”代碼后，加入removeChild()方法刪除指定節(jié)點(diǎn)，即加入“l(fā)ist.removeChild(li[0])”這1行代碼，可刪除列表項(xiàng)中的第1個(gè)子節(jié)點(diǎn)，“已有的列表項(xiàng)1”便被刪除。7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換替換節(jié)點(diǎn)當(dāng)前節(jié)點(diǎn).replaceChild(要替換的新節(jié)點(diǎn),被替換的舊節(jié)點(diǎn));replaceChild()方法用于將某個(gè)子節(jié)點(diǎn)替換為另一個(gè)新的子節(jié)點(diǎn)，可以接收2個(gè)參數(shù)，第1個(gè)參數(shù)是要替換的新子節(jié)點(diǎn)，第2個(gè)參數(shù)是被替換的舊子節(jié)點(diǎn)。replaceChild()方法的語(yǔ)法格式如下所示。7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換替換節(jié)點(diǎn)varp1=document.createElement("p");//創(chuàng)建要替換的新節(jié)點(diǎn)p1.innerHTML="新創(chuàng)建的文字";//為要替換的新節(jié)點(diǎn)添加內(nèi)容list.replaceChild(p1,li[2]);//使用replaceChild()方法在網(wǎng)頁(yè)上替換節(jié)點(diǎn)replaceChild()方法替換節(jié)點(diǎn)的示例代碼如下所示。7.2DOM基礎(chǔ)操作7.2.3

DOM的增刪改換克隆節(jié)點(diǎn)要克隆的節(jié)點(diǎn).cloneNode(布爾值);cloneNode()方法用于克隆指定的節(jié)點(diǎn)，接收的參數(shù)為布爾值true或false。cloneNode()方法的語(yǔ)法格式如下所示。通過(guò)cloneNode()方法可對(duì)節(jié)點(diǎn)進(jìn)行“復(fù)制”操作，cloneNode()方法克隆節(jié)點(diǎn)的示例代碼如下所示。varclone1=p1.cloneNode(true);//使用cloneNode()方法克隆一個(gè)節(jié)點(diǎn)list.appendChild(clone1);//使用appendChild()方法在網(wǎng)頁(yè)上顯示新拼接的節(jié)點(diǎn)7.2DOM基礎(chǔ)操作在JavaScript中，DOM操作屬性通常包括getAttributeNode()方法獲取屬性、getAttribute()方法獲取屬性值、setAttribute()方法設(shè)置屬性和removeAttribute()方法刪除屬性，這4種方法的具體說(shuō)明如表所示。7.2.4

DOM操作屬性方法說(shuō)明getAttributeNode("屬性名")獲取元素節(jié)點(diǎn)中指定的屬性。例btn[0].getAttributeNode("title")getAttribute("屬性名")獲取元素節(jié)點(diǎn)中指定屬性的屬性值，如果屬性節(jié)點(diǎn)不存在，則返回null。例btn[1].getAttribute("title")setAttribute("屬性名","屬性值")創(chuàng)建或修改元素節(jié)點(diǎn)的屬性，如果屬性節(jié)點(diǎn)不存在，則創(chuàng)建該屬性；如果屬性節(jié)點(diǎn)存在，則修改該屬性的值。例btn[2].setAttribute("class","current")removeAttribute("屬性名")刪除元素中指定屬性。例btn[3].removeAttribute("class")7.2DOM基礎(chǔ)操作7.2.5

DOM操作樣式行內(nèi)樣式在JavaScript中，可通過(guò)DOM操作行內(nèi)樣式，即控制HTML元素的style屬性，從而設(shè)置或修改元素樣式。其語(yǔ)法格式如下所示。元素.style.css屬性名="屬性值";例p1style.backgroundColor="blue";值得注意的是，在JavaScript中，CSS屬性帶有“-”的，一律按照駝峰規(guī)則進(jìn)行書(shū)寫(xiě)。7.2DOM基礎(chǔ)操作7.2.5

DOM操作樣式cssText屬性在style屬性下操作多組樣式，需要一行一行設(shè)置，操作起來(lái)比較繁瑣。DOM提供了cssText屬性，可用來(lái)一次性設(shè)置多組CSS樣式。cssText屬性的語(yǔ)法格式如下所示。元素.style.cssText="CSS屬性名1:屬性值1;......";例p1style.cssText="color:red;font-size:16px";使用cssText屬性可以在JavaScript中直接設(shè)置或修改同一個(gè)元素的樣式，相當(dāng)于直接引入<style>標(biāo)簽內(nèi)的樣式，不需要按照駝峰規(guī)則進(jìn)行書(shū)寫(xiě)。7.2DOM基礎(chǔ)操作7.2.6案例-點(diǎn)擊按鈕切換圖片本實(shí)例是一個(gè)點(diǎn)擊按鈕切換圖片的頁(yè)面。該頁(yè)面主要由<div>塊元素、<ul>無(wú)序列表、<p>段落標(biāo)簽、<img>圖像標(biāo)簽以及<span>內(nèi)聯(lián)元素構(gòu)成。頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如圖所示。<head><metacharset="UTF-8"><title>點(diǎn)擊按鈕切換圖片</title>

<linktype="text/css"rel="stylesheet"href="turn.css"></head><body><divclass="box"><!--導(dǎo)航欄--><ul><liclass="current">小貓</li><li>小狗</li><li>小熊</li><li>小兔</li><li>小豬</li></ul><!--圖片顯示塊--><pclass="current"><span>調(diào)皮的小貓</span><imgsrc="../image/14.jpg"alt=""></p><p><span>活潑的小狗</span><imgsrc="../image/15.jpg"alt=""></p><p><span>友愛(ài)的小熊</span><imgsrc="../image/19.jpg"alt=""></p><p><span>可愛(ài)的小兔</span><imgsrc="../image/18.jpg"alt=""></p><p><span>呆萌的小豬</span><imgsrc="../image/20.jpg"alt=""></p></div><scripttype="text/javascript"src="change.js"></script></body>代碼實(shí)現(xiàn)7.2DOM基礎(chǔ)操作7.2.6案例-點(diǎn)擊按鈕切換圖片主體代碼

例7.7/*設(shè)置導(dǎo)航欄*/.box>ul{list-style:none;/*取消項(xiàng)目列表標(biāo)記*/width:500px;height:65px;}/*設(shè)置導(dǎo)航欄中的項(xiàng)目列表*/.box>ul>li{float:left;/*設(shè)置左浮動(dòng)*/width:100px;

height:60px;line-height:60px;/*設(shè)置行高，使其居中*/color:white;font-size:24px;text-align:center;background-color:#99cccc;

cursor:pointer;/*改變鼠標(biāo)形狀*/}/*設(shè)置圖片顯示塊*/.boxp{

display:none;/*隱藏元素*/width:500px;height:490px;border:1pxsolid#ccc;}代碼實(shí)現(xiàn)7.2DOM基礎(chǔ)操作7.2.6案例-點(diǎn)擊按鈕切換圖片CSS部分代碼

例7.7/*設(shè)置圖片顯示塊中的標(biāo)題*/.boxspan{

display:block;/*轉(zhuǎn)化為塊級(jí)元素*/width:500px;height:40px;background-color:#f6f6f6;text-align:center;font-size:24px;}/*設(shè)置圖片*/img{width:500px;height:450px;}/*點(diǎn)擊時(shí)的當(dāng)前圖片顯示塊*/p.current{display:block;/*顯示元素*/}/*點(diǎn)擊時(shí)的當(dāng)前導(dǎo)航塊*/ul>li.current{background-color:#EEE8AA;}7.2DOM基礎(chǔ)操作7.2.6案例-點(diǎn)擊按鈕切換圖片代碼實(shí)現(xiàn)在上述CSS代碼中，首先取消無(wú)序列表的項(xiàng)目列表標(biāo)記，將導(dǎo)航欄中的項(xiàng)目列表設(shè)置向左浮動(dòng)，再隱藏圖片顯示塊，然后設(shè)置圖片顯示塊中的標(biāo)題，將<span>內(nèi)聯(lián)內(nèi)聯(lián)元素轉(zhuǎn)化成塊級(jí)元素，最后點(diǎn)擊導(dǎo)航欄中的按鈕時(shí)，通過(guò)關(guān)聯(lián)元素的class名稱(chēng)改變?cè)貥邮健?/1.獲取元素liArr和pArrvarliArr=document.getElementsByTagName("li");varpArr=document.getElementsByTagName("p");//2.為每一個(gè)li綁定一個(gè)index屬性for(vari=0;i<liArr.length;i++){

liArr[i].index=i;//3.為liArr添加鼠標(biāo)點(diǎn)擊事件liArr[i].onclick=function(){//4.事件驅(qū)動(dòng)函數(shù)中，利用排他思想，實(shí)現(xiàn)li點(diǎn)亮盒子//通過(guò)for循環(huán)清空所有l(wèi)i標(biāo)簽和p標(biāo)簽的class類(lèi)樣式for(vari=0;i<liArr.length;i++){

//清空所有l(wèi)i的類(lèi)樣式liArr[i].removeAttribute("class");//清空所有p的類(lèi)樣式pArr[i].removeAttribute("class");}

//再創(chuàng)建當(dāng)前l(fā)i的class類(lèi)樣式this.setAttribute("class","current");//再創(chuàng)建當(dāng)前p的class類(lèi)樣式pArr[this.index].setAttribute("class","current");}}代碼實(shí)現(xiàn)7.2DOM基礎(chǔ)操作7.2.6案例-點(diǎn)擊按鈕切換圖片JS代碼

例7.77.2DOM基礎(chǔ)操作7.2.6案例-點(diǎn)擊按鈕切換圖片代碼實(shí)現(xiàn)在上述JS代碼中，首先通過(guò)DOM操作獲取元素節(jié)點(diǎn)，再為項(xiàng)目列表按鈕添加點(diǎn)擊事件，然后在事件驅(qū)動(dòng)函數(shù)中，利用排他思想，將<li>標(biāo)簽和<p>標(biāo)簽的class類(lèi)樣式先清空再重新創(chuàng)建，進(jìn)行排他思想的切換，實(shí)現(xiàn)點(diǎn)擊按鈕可切換圖片。本節(jié)小結(jié)本節(jié)內(nèi)容主要講解了DOM使用innerHTML和innerText這2種方法操作文本內(nèi)容，DOM節(jié)點(diǎn)的相關(guān)內(nèi)容，DOM對(duì)節(jié)點(diǎn)進(jìn)行創(chuàng)建、添加、刪除、替換、克隆等操作，DOM通過(guò)使用getAttributeNode()、getAttribute()、setAttribute()、removeAttribute()等方法操作屬性，以及通過(guò)DOM操作元素樣式。通過(guò)本節(jié)的學(xué)習(xí)，希望讀者能夠掌握DOM的一些基礎(chǔ)操作方法。7.3實(shí)現(xiàn)定時(shí)器定時(shí)器案例—跨年倒計(jì)時(shí)Date時(shí)間對(duì)象7.3

實(shí)現(xiàn)定時(shí)器7.3.1

定時(shí)器window對(duì)象表示一個(gè)瀏覽器窗口或一個(gè)框架。在客戶(hù)端JavaScript中，window對(duì)象是全局對(duì)象，所有的表達(dá)式都在當(dāng)前的環(huán)境中計(jì)算。也就是說(shuō)，要引用當(dāng)前窗口根本不需要特殊的語(yǔ)法，可以把那個(gè)窗口的屬性作為全局變量來(lái)使用。例如，可以只寫(xiě)document，而不必寫(xiě)window.document。一般來(lái)說(shuō)，window對(duì)象的方法都是對(duì)瀏覽器窗口或框架進(jìn)行某種操作。在JavaScript中，BOM的window對(duì)象有2種設(shè)置定時(shí)器的方法，即設(shè)置連續(xù)定時(shí)器和延遲定時(shí)器，主要由window.setInterval()和window.setTimeout()2個(gè)函數(shù)實(shí)現(xiàn)，它們負(fù)責(zé)向任務(wù)隊(duì)列添加定時(shí)任務(wù)。由于window對(duì)象是全局對(duì)象，可以省略window前綴。7.3實(shí)現(xiàn)定時(shí)器7.3.1定時(shí)器連續(xù)定時(shí)器setInterval()函數(shù)可設(shè)置連續(xù)的定時(shí)器，在指定的毫秒數(shù)后執(zhí)行指定的代碼，即通過(guò)設(shè)定一個(gè)時(shí)間間隔，每隔一段時(shí)間去執(zhí)行JavaScript的操作。setInterval()函數(shù)的語(yǔ)法格式如下所示。setInterval(code,millisec);在上述語(yǔ)法中，setInterval()函數(shù)接收2個(gè)參數(shù)，第1個(gè)參數(shù)code表示要調(diào)用的函數(shù)或要執(zhí)行的JavaScript代碼串，第2個(gè)參數(shù)millisec表示周期性執(zhí)行或調(diào)用code之間的時(shí)間間隔，單位為毫秒（ms）。7.3實(shí)現(xiàn)定時(shí)器7.3.1定時(shí)器連續(xù)定時(shí)器在JavaScript中，可通過(guò)clearInterval()函數(shù)清除setInterval設(shè)定的定時(shí)器，即把要清除的定時(shí)器賦值給一個(gè)變量，調(diào)用clearInterval()函數(shù)執(zhí)行清除對(duì)應(yīng)定時(shí)器的操作。清理定時(shí)器不僅可以暫停該定時(shí)器，還可以釋放內(nèi)存，清除對(duì)后續(xù)代碼的影響。clearInterval(定時(shí)器對(duì)象);清除setIntervalclearInterval()函數(shù)清除定時(shí)器的語(yǔ)法格式如下所示。7.3實(shí)現(xiàn)定時(shí)器7.3.1定時(shí)器制作一個(gè)連續(xù)的定時(shí)器，每隔1秒依次輸出文字，當(dāng)數(shù)值為5時(shí)，停止定時(shí)器。具體代碼如下所示。連續(xù)定時(shí)器

演示說(shuō)明<body><script>vari=0;vartimer1=setInterval(show,1000);//每隔1秒調(diào)用1次定時(shí)器中的函數(shù)functionshow(){i++;console.log("快樂(lè)學(xué)習(xí)"+i);

if(i==5){//當(dāng)i=5時(shí)，清除定時(shí)器clearInterval(timer1);}

}</script></body>主體代碼

例7.87.3實(shí)現(xiàn)定時(shí)器7.3.1定時(shí)器制作一個(gè)連續(xù)的定時(shí)器，每隔1秒依次輸出文字，當(dāng)數(shù)值為5時(shí)，停止定時(shí)器。運(yùn)行結(jié)果如下所示。連續(xù)定時(shí)器

演示說(shuō)明7.3實(shí)現(xiàn)定時(shí)器7.3.1定時(shí)器延遲定時(shí)器setTimeout()函數(shù)可設(shè)置延遲的定時(shí)器，按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)。setTimeout()函數(shù)只執(zhí)行代碼一次，如果要多次調(diào)用，需使用setInterval()函數(shù)或者讓代碼自身再次調(diào)用setTimeout()函數(shù)。setTimeout()函數(shù)的語(yǔ)法格式如下所示。setTimeout(code,millisec);在上述語(yǔ)法中，setTimeout()函數(shù)接收2個(gè)參數(shù)，第1個(gè)參數(shù)code表示要調(diào)用的函數(shù)或要執(zhí)行的JavaScript代碼串，第2個(gè)參數(shù)millisec表示在執(zhí)行代碼前需等待的毫秒數(shù)。7.3實(shí)現(xiàn)定時(shí)器7.3.1定時(shí)器延遲定時(shí)器在JavaScript中，可通過(guò)clearTimeout()函數(shù)清除setTimeout設(shè)定的定時(shí)器，即把要清除的定時(shí)器賦值給一個(gè)變量，調(diào)用clearTimeout()函數(shù)執(zhí)行清除對(duì)應(yīng)定時(shí)器的操作。clearTimeout()函數(shù)與clearInterval()函數(shù)用法類(lèi)似，但延時(shí)定時(shí)器只執(zhí)行一次，一般清除定時(shí)器會(huì)在延遲沒(méi)有執(zhí)行時(shí)去調(diào)用，從而不執(zhí)行延時(shí)定時(shí)器內(nèi)的代碼。setTimeout(定時(shí)器對(duì)象);清除setTimeoutsetTimeout()函數(shù)清除定時(shí)器的語(yǔ)法格式如下所示。7.3實(shí)現(xiàn)定時(shí)器7.3.1定時(shí)器制作一個(gè)延時(shí)的定時(shí)器，1秒之后調(diào)用1次定時(shí)器中的函數(shù)，并在調(diào)用的函數(shù)中使用clearTimeout()清除定時(shí)器，釋放內(nèi)存。具體代碼如下所示。延遲定時(shí)器

演示說(shuō)明<body><script>

vartimer2=setTimeout(show,1000);//1秒之后調(diào)用1次定時(shí)器中的函數(shù)functionshow(){console.log("快樂(lè)學(xué)習(xí)");

clearTimeout(timer2);//清除定時(shí)器}</script></body>主體代碼

例7.97.3實(shí)現(xiàn)定時(shí)器7.3.1定時(shí)器制作一個(gè)延時(shí)的定時(shí)器，1秒之后調(diào)用1次定時(shí)器中的函數(shù)，并在調(diào)用的函數(shù)中使用clearTimeout()清除定時(shí)器，釋放內(nèi)存。運(yùn)行結(jié)果如下所示。延遲定時(shí)器

演示說(shuō)明7.3實(shí)現(xiàn)定時(shí)器7.3.1定時(shí)器定時(shí)器的總結(jié)setInterval()函數(shù)主要用來(lái)實(shí)現(xiàn)周期性執(zhí)行代碼，而setTimeout()函數(shù)主要用來(lái)延遲代碼執(zhí)行。這2種函數(shù)方法都可以設(shè)計(jì)周期性動(dòng)作，其中setInterval()函數(shù)適合定時(shí)執(zhí)行某個(gè)動(dòng)作，而setTimeout()函數(shù)適合不定時(shí)執(zhí)行某個(gè)動(dòng)作。setInterval()函數(shù)不受任務(wù)隊(duì)列的限制，會(huì)簡(jiǎn)單地每隔一定時(shí)間重復(fù)執(zhí)行一次動(dòng)作，如果前面的任務(wù)還沒(méi)有執(zhí)行完畢，setInterval函數(shù)可能會(huì)插隊(duì)以便按時(shí)執(zhí)行動(dòng)作。而setTimeout()函數(shù)不會(huì)間隔固定時(shí)間執(zhí)行一次動(dòng)作，它受JavaScript任務(wù)隊(duì)列的影響，只有前面沒(méi)有任務(wù)時(shí)，才會(huì)按時(shí)延遲執(zhí)行動(dòng)作。7.3

實(shí)現(xiàn)定時(shí)器7.3.2

Date時(shí)間對(duì)象在日常生活中，瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)看到一些與時(shí)間有關(guān)的網(wǎng)頁(yè)效果，如日歷、倒計(jì)時(shí)、時(shí)間變化等。這些與時(shí)間相關(guān)的效果都需要利用JavaScript中的Date對(duì)象來(lái)完成。Date對(duì)象用于處理日期與時(shí)間。創(chuàng)建一個(gè)新Date對(duì)象的唯一方法是通過(guò)new操作符，如vardate=newDate()，若將它作為常規(guī)函數(shù)調(diào)用（即不加new操作符），將返回一個(gè)字符串，而非Date對(duì)象。7.3

實(shí)現(xiàn)定時(shí)器7.3.2

Date時(shí)間對(duì)象創(chuàng)建Date對(duì)象的語(yǔ)法格式如下所示。創(chuàng)建Date對(duì)象newDate();//默認(rèn)獲取當(dāng)前時(shí)間例vardate=newDate();創(chuàng)建Date對(duì)象默認(rèn)獲取當(dāng)前時(shí)間，結(jié)果如圖所示。7.3

實(shí)現(xiàn)定時(shí)器7.3.2

Date時(shí)間對(duì)象創(chuàng)建特定的Date對(duì)象有3種方式，其語(yǔ)法格式如下所示。創(chuàng)建Date對(duì)象newDate(value);//參數(shù)為一個(gè)Unix時(shí)間戳，即一個(gè)毫秒數(shù)，是一個(gè)整數(shù)值newDate(dateString);//參數(shù)為日期字符串newDate(year,monthIndex[,day[,hours[,minutes[,seconds[,milliseconds]]]]]);//參數(shù)為多個(gè)時(shí)間整數(shù)Unix時(shí)間戳（UnixTimeStamp）是一個(gè)整數(shù)值，表示自1970年1月1日00:00:00UTC（theUnixepoch）以來(lái)的毫秒數(shù)，忽略了閏秒。值得注意的是，大多數(shù)Unix時(shí)間戳功能僅精確到最接近的秒，UNIX時(shí)間戳以秒為單位，而JavaScript日期以毫秒為單位。7.3

實(shí)現(xiàn)定時(shí)器7.3.2

Date時(shí)間對(duì)象時(shí)間參數(shù)的具體說(shuō)明如表所示。創(chuàng)建Date對(duì)象時(shí)間參數(shù)說(shuō)明year表示年份的整數(shù)值，0到99會(huì)被映射至1900年至1999年，其它值代表實(shí)際年份monthIndex表示月份的整數(shù)值，從0（1月）到11（12月）day表示一個(gè)月中的第幾天的整數(shù)值，從1到31，默認(rèn)值為1hours表示一天中的小時(shí)數(shù)的整數(shù)值(24小時(shí)制)，從0到23，默認(rèn)值為0minutes表示一個(gè)完整時(shí)間（如01:10:00）中的分鐘部分的整數(shù)值，從0到59，默認(rèn)值為0seconds表示一個(gè)完整時(shí)間（如01:10:00）中的秒部分的整數(shù)值，從0到59，默認(rèn)值為0milliseconds表示一個(gè)完整時(shí)間的毫秒部分的整數(shù)值，從0到999，默認(rèn)值為07.3

實(shí)現(xiàn)定時(shí)器7.3.2

Date時(shí)間對(duì)象獲取總毫秒值有5種方式，示例代碼如下。獲取總毫秒值

vardate1=+newDate();vardate2=Date.now();vardate3=newDate().getTime();vardate4=newDate().valueOf();vardate5=Date.parse("2021-12-715:00:00");//獲取特定時(shí)間的總毫秒數(shù)，參數(shù)為日期字符串，若日期字符串的格式不正確,則返回NaN7.3

實(shí)現(xiàn)定時(shí)器7.3.2

Date時(shí)間對(duì)象結(jié)果返回自1970年1月1日00:00:00UTC（theUnixepoch）以來(lái)的總毫秒數(shù)，獲取總毫秒值的示例代碼結(jié)果如圖所示。獲取總毫秒值在圖中，第1行結(jié)果為當(dāng)前時(shí)間參考值，第2-5行結(jié)果為自1970年1月1日00:00:00UTC到當(dāng)前時(shí)間參考值的總毫秒數(shù)，第6行結(jié)果為特定時(shí)間的總毫秒值。。7.3

實(shí)現(xiàn)定時(shí)器7.3.2

Date時(shí)間對(duì)象特定的時(shí)間類(lèi)型可以通過(guò)Date對(duì)象的具體方法進(jìn)行獲取或設(shè)置，常用的Date對(duì)象方法的具體說(shuō)明如表所示。Date對(duì)象方法方法說(shuō)明getFullYear()獲取一個(gè)表示年份的四位數(shù)字getMonth()從Date對(duì)象獲取月份(0~11)getDate()從Date對(duì)象獲取一個(gè)月中的某一天(1~31)getDay()從Date對(duì)象獲取一周中的某一天(0~6，即周日~周六)getHours()獲取Date對(duì)象的小時(shí)(0~23)getMinutes()獲取Date對(duì)象的分鐘(0~59)getSeconds()獲取Date對(duì)象的秒數(shù)(0~59)getMilliseconds()獲取Date對(duì)象的毫秒(0~999)7.3

實(shí)現(xiàn)定時(shí)器7.3.2

Date時(shí)間對(duì)象續(xù)表。Date對(duì)象方法方法說(shuō)明getTime()獲取1970年1月1日至今的總毫秒數(shù)setFullYear()設(shè)置Date對(duì)象中的年份（四位數(shù)字）setMonth()設(shè)置Date對(duì)象中的月份(0~11)setDate()設(shè)置Date對(duì)象一個(gè)月中的某一天(1~31)setDay()設(shè)置Date對(duì)象一周中的某一天(0~6，即周日~周六)setHours()設(shè)置Date對(duì)象的小時(shí)(0~23)setMinutes()設(shè)置Date對(duì)象的分鐘(0~59)7.3

實(shí)現(xiàn)定時(shí)器7.3.3案例-跨年倒計(jì)時(shí)本實(shí)例是一個(gè)顯示跨年倒計(jì)時(shí)的頁(yè)面。該頁(yè)面主要由<div>塊元素、<p>段落標(biāo)簽和<span>內(nèi)聯(lián)元素構(gòu)成。頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如圖所示。<head><metacharset="UTF-8"><title>跨年倒計(jì)時(shí)</title>

<linktype="text/css"rel="stylesheet"href="spring.css"></head><body><divid="count"><p>2023<br>跨年倒計(jì)時(shí)</p><spanid="time"></span></div><scripttype="text/javascript"src="time.js"></script></body>代碼實(shí)現(xiàn)7.3

實(shí)現(xiàn)定時(shí)器7.3.3案例-跨年倒計(jì)時(shí)主體代碼

例7.10/*設(shè)置頁(yè)面*/#count{width:400px;height:480px;

background-image:url("../image/spring.jpg");/*添加背景圖片*/background-size:cover;/*設(shè)置背景圖尺寸*/margin:20pxauto;

overflow:hidden;/*清除margin外邊距塌陷問(wèn)題*/}/*設(shè)置倒計(jì)時(shí)標(biāo)題*/p{width:250px;height:120px;line-height:60px;/*設(shè)置行高*/text-align:center;/*設(shè)置文本居中*/color:#f7e095;/*設(shè)置文本顏色*/

font:italicbold40px"微軟雅黑";/*設(shè)置頁(yè)面文本樣式*/margin:130pxauto40px;/*設(shè)置外邊距，上左右下*/}代碼實(shí)現(xiàn)7.3

實(shí)現(xiàn)定時(shí)器7.3.3案例-跨年倒計(jì)時(shí)CSS部分代碼

例7.10/*設(shè)置倒計(jì)時(shí)*/#time{

display:block;/*span內(nèi)聯(lián)元素轉(zhuǎn)化為塊級(jí)元素*/width:300px;height:80px;line-height:40px;text-align:center;background-color:#b23f2d;/*設(shè)置背景顏色*/font-size:25px;color:#fdedb1;

border-radius:15px;/*為元素添加圓角*/margin:0auto;}7.3

實(shí)現(xiàn)定時(shí)器7.3.3案例-跨年倒計(jì)時(shí)代碼實(shí)現(xiàn)在上述CSS代碼中，首先為頁(yè)面添加背景圖片，使用background-size屬性設(shè)置背景圖片的尺寸，再使用overflow屬性清除外邊距塌陷問(wèn)題。然后設(shè)置倒計(jì)時(shí)的標(biāo)題，使用font屬性設(shè)置文本樣式，如字體風(fēng)格、字體粗細(xì)、字體大小和字體名稱(chēng)。最后設(shè)置倒計(jì)時(shí)，使用display屬性將<span>內(nèi)聯(lián)元素轉(zhuǎn)化為塊級(jí)元素，以及使用border-radius屬性為元素添加圓角。//獲取倒計(jì)時(shí)元素spanvart1=document.getElementById("time");//設(shè)置定時(shí)器setInterval(function(){//定義終點(diǎn)時(shí)間varstr='2023/01/2200:00:00';varendDateMS=newDate(str).getTime();//獲取終點(diǎn)時(shí)間總毫秒值varnowDateMS=newDate().getTime();//獲取當(dāng)前時(shí)間總毫秒值varvalue=endDateMS-nowDateMS;//終點(diǎn)時(shí)間和當(dāng)前時(shí)間的毫秒值差//計(jì)算各個(gè)值varyear=parseInt(value/1000/60/60/