HTML5+CSS3+JavaScript+Bootstrap網(wǎng)站開發(fā)技術(shù)（第3版）課件 第6章 實(shí)現(xiàn)用戶與頁面的交互 --JavaScript的對象與事件

JavaScript對象概述1JavaScript內(nèi)置對象2瀏覽器對象3HTMLDOM對象4事件和事件處理5常見事件和事件對象6第6章實(shí)現(xiàn)用戶與頁面的交互-—JavaScript的對象與事件事件示例7應(yīng)用案例86.1JavaScript對象概述6.1.1對象1.對象的概念客觀世界的特定實(shí)體的描述。在計(jì)算機(jī)世界中，不僅存在來自于客觀世界的對象，也包含為解決問題而引入的抽象對象。2.對象的屬性和方法屬性是用來描述對象靜態(tài)特性的一組數(shù)據(jù)，用變量表示。方法是用來描述對象的動態(tài)特征或操作對象的若干動作，用函數(shù)描述。6.1JavaScript對象概述6.1.2對象的引用使用點(diǎn)（.）運(yùn)算符引用對象的屬性和對象的方法1．對象屬性的引用objectNperties=value;2．對象方法的引用objectName.methodName()；例：student.hello();6.1JavaScript對象概述6.1.3對象的操作1．for…in語句for（propretiesNameinobjectName）{ statements;}demo0601.html2.with語句with（objectName）{statements;}

demo0602.html6.1JavaScript對象概述6.1.3對象的操作3.this關(guān)鍵詞this是指對當(dāng)前對象的引用。4.new運(yùn)算符objectName=newObject([parameter1，parameter2，……])例：today=newDate();stu=newstudent(“20010001”,”王剛”,21);6.1JavaScript對象概述6.1.4JavaScript的對象類型內(nèi)置對象，指JavaScript語言提供的對象String、Array、Math、Date等。瀏覽器對象，瀏覽器根據(jù)系統(tǒng)配置和所裝載的頁面，提供了訪問、控制、修改瀏覽器的方法。Window對象、Navigator對象、Screen對象、Location對象等。6.1JavaScript對象概述6.1.4JavaScript的對象類型HTMLDOM對象，定義了訪問和處理HTML文檔的標(biāo)準(zhǔn)方法，主要功能是實(shí)現(xiàn)訪問、檢索、修改HTML文檔的內(nèi)容與結(jié)構(gòu)。forms、images、links和anchors等集合對象。自定義對象，指程序員根據(jù)需要而定義的對象。6.2JavaScript內(nèi)置對象6.2.1String對象String字符串對象是用單引號或雙引號括起來的一串字符序列。字符串對象的創(chuàng)建可以使用new運(yùn)算符來創(chuàng)建，也可直接將字符串賦值給變量的方式來創(chuàng)建。str="Thisisanewstring."str=newString("Thisisanewstring.")6.2JavaScript內(nèi)置對象2.字符串對象的屬性String對象只有一個length屬性，表示字符串中字符的數(shù)目;字符串的每個漢字，被計(jì)數(shù)為一個字符。vara="我愛我家";varb="Ilovehome";document.write(a.length);document.write(“<br>”);document.write(b.length);6.2JavaScript內(nèi)置對象3.字符串對象的常用方法

String對象常用方法

demo0603.html方法說明toLowerCase()將字符串中的所有字母都轉(zhuǎn)換為小寫字母toUpperCase()將字符串中的所有字母都轉(zhuǎn)換為大寫字母toString()將對象轉(zhuǎn)換成字符串charAt(index)返回String對象的指定index位置的字符表6-1String對象常用方法方法說明indexOf(subString[,startIndex])返回String對象內(nèi)第一次出現(xiàn)子字符串subString的字符位置。如果未找到子字符串，則返回-1。substr(start,[length])返回一個從指定位置start開始，并具有指定length長度的子字符串。concat(string)返回位于String對象中的從位置start開始到位置end結(jié)束的子字符串。replace(string1,string2)在String對象中找到的字符串string1替換成字符串string2的內(nèi)容，返回替換后的字符串split(string)返回Array對象，使用參數(shù)string作為分割符將String對象分割，將分割后的字符串存儲到一個Array對象中6.2JavaScript內(nèi)置對象6.2.2Array對象1.數(shù)組的概念數(shù)組變量能夠存儲多個值。數(shù)組變量的多值性在于一個數(shù)組變量可以包含多個子變量，而每個子變量的作用與普通變量的作用一樣，既可以被賦值，也可以從中取出值。將數(shù)組中數(shù)組元素的個數(shù)稱為數(shù)組大小(或稱數(shù)組長度)。6.2JavaScript內(nèi)置對象2.數(shù)組的創(chuàng)建和賦值（1）先創(chuàng)建數(shù)組，再對其賦值vararrayName=newArray(arraysize);arrayName表示數(shù)組實(shí)例名，arraysize表示數(shù)組大小。例如：varobjArray=newArray(3);objArray[0]="I";objArray[1]="Love";objArray[2]="JavaScript";6.2JavaScript內(nèi)置對象2.數(shù)組的創(chuàng)建和賦值數(shù)組下標(biāo)從0開始，第1個元素是arrayName[0]，最后一個元素是arrayName[arraysize-1]。在創(chuàng)建數(shù)組時，如果在newArray()中沒給出任何參數(shù)，即varobjArray=newArray();這時對象objArray無任何元素，即長度為0。JavaScript數(shù)組具有自動擴(kuò)展功能，空數(shù)組也允許賦值。例如：objArray[10]="王武";objArray擴(kuò)展到含有11個元素的數(shù)組，其中所有未被賦過值的數(shù)組元素將被初始化為null。6.2JavaScript內(nèi)置對象2.數(shù)組的創(chuàng)建和賦值（2）創(chuàng)建數(shù)組同時對其賦值在創(chuàng)建數(shù)組的同時指定數(shù)組元素的值。vararrayName=newArray(array1[,array2,…arrayN]);其中，array1…arrayN表示數(shù)組對象中各數(shù)組元素的值。例：varstudent=newArray("李子楊","男",22);6.2JavaScript內(nèi)置對象3.數(shù)組的訪問（1）應(yīng)用下標(biāo)獲取指定元素值varstudents=newArray("張揚(yáng)","李麗","王剛","趙一");document.write(students[2]);（2）應(yīng)用for循環(huán)或for…in語句遍歷數(shù)組中的元素for(variableinarrayName){statements;}示例：demo0604.html6.2JavaScript內(nèi)置對象（3）應(yīng)用數(shù)組對象名輸出所有元素值運(yùn)用數(shù)組對象名可以直接將數(shù)組中所有元素的值輸出，例如：varstudents=newArray("張揚(yáng)","李麗","王剛","趙一");document.write(students);6.2JavaScript內(nèi)置對象4.Array對象的常用屬性和方法示例:demo0605.html、demo0606.html方法說明length該屬性用于返回?cái)?shù)組的長度concat(arrayname)將參數(shù)中的數(shù)組連接到當(dāng)前數(shù)組中reverse()將數(shù)組的元素反轉(zhuǎn)sort()將數(shù)組所有元素進(jìn)行排序toString()把數(shù)組轉(zhuǎn)換為字符串join([string])將數(shù)組的元素放入一個字符串，每個數(shù)組元素使用參數(shù)指定的符號分隔,如果沒有指定參數(shù)，則用”,”來進(jìn)行分割。表6-2Array對象的常用屬性和方法6.2JavaScript內(nèi)置對象5.二維數(shù)組如果數(shù)組中所有數(shù)組元素的值都是基本類型的值，把這種數(shù)組稱為一維數(shù)組。當(dāng)數(shù)組中所有數(shù)組元素的值又是數(shù)組時就形成了二維數(shù)組。demo0608.html6.2JavaScript內(nèi)置對象6.2.3Date對象Date對象來實(shí)現(xiàn)對日期和時間的控制，執(zhí)行各種有關(guān)日期和時間的操作。1.創(chuàng)建Date對象

在使用Date對象之前，必須先使用new運(yùn)算符創(chuàng)建。創(chuàng)建法有以下3種。（1）創(chuàng)建表示系統(tǒng)當(dāng)前日期和時間的Date對象。vartoday=newDate();

將創(chuàng)建一個含有系統(tǒng)當(dāng)前日期和時間的Date對象。6.2JavaScript內(nèi)置對象（2）創(chuàng)建一個指定日期的Date對象。vartheDate=newDate(2019,9,1);將創(chuàng)建一個日期是2019年10月1日的Date對象，而且這個對象中的小時、分鐘、秒、毫秒值都為0。在創(chuàng)建Date對象時，需要注意：參數(shù)中的年份值應(yīng)該是完整的年份值，即4位數(shù)字，而不能寫成2位。代表月份的參數(shù)值的范圍是數(shù)字0-11，分別對應(yīng)的是1-12月份。如上例中的9代表的是10月份6.2JavaScript內(nèi)置對象（3）創(chuàng)建一個指定時間的Date對象。vartheTime=newDate(2019,9,1,10,20,30,50)；將創(chuàng)建一個包含確切日期和時間的Date對象，即2019年10月1日10點(diǎn)20分30秒50毫秒。6.2JavaScript內(nèi)置對象6.2.3Date對象2．Date對象的方法Date對象沒有可以直接讀取的屬性，所有對日期和時間的操作都是通過方法完成的。方

法說

明Date()返回系統(tǒng)當(dāng)前的日期和時間getDate()從Date對象返回一個月中的某一天（1~31）getDay()從Date對象返回一周中的某一天（0~6）getMonth()從Date對象返回月份（0~11）getFullYear()從Date對象以4位數(shù)字返回年份表6-3Date對象的常用方法6.2JavaScript內(nèi)置對象方

法說

明getYear()從Date對象以兩位或4位數(shù)字返回年份gerHours()返回Date對象的小時（0~23）getMinutes()返回Date對象的分鐘（0~59）getSeconds()返回Date對象的秒（0~59）getMilliseconds()返回Date對象的毫秒（0~999）getTime()返回1970年1月1日午夜至今的毫秒數(shù)getTimezoneOffset()返回本地時間與格林威治標(biāo)準(zhǔn)時間的分鐘差setDate(x)設(shè)置Date對象中的一個月的某一天（1~31）setMonth(x)設(shè)置Date對象中的月份（0~11）setFullYear(x)設(shè)置Date對象中的年份（4位數(shù)）setYear(x)設(shè)置Date對象中的年份（兩位或4位數(shù)）6.2JavaScript內(nèi)置對象示例:demo0609.html方

法說

明setHours(x)設(shè)置Date對象中的小時（0~23）setMinutes(x)設(shè)置Date對象中的分鐘（0~59）setSeconds(x)設(shè)置Date對象中的秒（0~59）setMilliseconds(x)設(shè)置Date對象中的毫秒（0~999）setTime(x)通過從1970年1月1日午夜添加或減去指定數(shù)目的毫秒來計(jì)算日期和時間toString()把Date對象轉(zhuǎn)換為字符串toTimeString()把Date對象的時間部分轉(zhuǎn)換為字符串toLocaleString()根據(jù)本地時間格式，把Date對象轉(zhuǎn)換為字符串toLocaleTomeSring()根據(jù)本地時間格式，把Date對象的時間部分轉(zhuǎn)化為字符串toLocaleDateString()根據(jù)本地時間格式，把Date對象的日期部分轉(zhuǎn)換為字符串6.2JavaScript內(nèi)置對象6.2.4Math對象關(guān)鍵字Math是對一個已創(chuàng)建好的Math對象的引用，使用Math對象時不必先使用new創(chuàng)建實(shí)例。調(diào)用Math對象的屬性和方法時，直接寫成“Mperty”和“Math.method()”即可。1.Math對象的屬性Math對象的屬性是數(shù)學(xué)運(yùn)算中常用的常量6.2JavaScript內(nèi)置對象屬

性說

明E常量e，自然對數(shù)的底數(shù)（約等于2.718）LN2返回2的自然對數(shù)（約等于0.693）LN10返回10的自然對數(shù)（約等于2.302）LOG2E返回以2為底的e的對數(shù)（約等于1.414）LOG10E返回以10為底的e的對數(shù)（約等于0.434PI返回圓周率（約等于3.14159）prototype向?qū)ο筇砑幼远x屬性和方法SQRT1_2返回1/2的平方根（約等于0.707）SQRT2返回2的平方根（約等于1.414）表6-4Math對象的屬性6.2JavaScript內(nèi)置對象2.Math對象的方法方

法說

明實(shí)

例結(jié)果abs(x)返回一個數(shù)的絕對值abs（-2）2acos(x)返回指定參數(shù)的反余弦值acos（1）0asin(x)返回指定參數(shù)的反正弦值asin（-1）-0.8415cos(x)返回指定參數(shù)的余弦值cos（2）-0.4161sin(x)返回指定參數(shù)的正弦值sin(0)0tan(x)返回一個角的正切值Tan(Math.PI/4)1atan(x)以介于-PI/2與PI/2弧度之間的數(shù)值來返回x的反正切值atan(1)0.7854ceil(x)返回大于等于x的最小整數(shù)ceil（-10.8）

-10表6-5Math對象的方法6.3瀏覽器對象瀏覽器對象提供了訪問、控制、修改客戶端瀏覽器的方法。瀏覽器對象模型（BrowserObjectModel，BOM）是JavaScript可以操作瀏覽器的各個功能部件的接口，它提供訪問各個功能部件（如窗口本身、屏幕功能部件、歷史記錄等）的途徑以及操作方法。BOM由一系列對象構(gòu)成，主要包括Window、Navigator、Screen、Location、History和Document等對象。6.3瀏覽器對象6.3.1BOM概述1．BOM對象體系結(jié)構(gòu)BOM對象體系由一系列相關(guān)對象組成BOM對象體系結(jié)構(gòu)6.3瀏覽器對象2．訪問BOM中的對象在BOM體系結(jié)構(gòu)中，window對象是BOM的頂層(核心)對象，可以直接訪問。window.status="歡迎光臨我的網(wǎng)站！//status為window對象的屬性window.alert("歡迎光臨!");//.alert()為window對象的方法6.3瀏覽器對象在BOM體系結(jié)構(gòu)中，所有下層對象都可以視為上層對象的屬性，因此訪問下層對象的方法與訪問對象的屬性方法相同，使用點(diǎn)（.）運(yùn)算符。window.document.write("hello");頂層對象，可以直接訪問其屬性和方法document.write("hello");對alert()方法的兩種訪問方法都是正確的window.alert("hello");alert("hello");6.3瀏覽器對象6.3.2Window對象1、Window對象的常用屬性屬

性說

明documentdocument對象引用，表示在瀏覽器窗口中顯示的頁面文檔frames返回當(dāng)前窗口中所有frame對象的集合。每個frame對象對應(yīng)一個用<fame>或<ifame>標(biāo)記的框架history返回history對象引用，表示當(dāng)前窗口的頁面訪問歷史記錄loaction返回location對象引用，表示當(dāng)前窗口所裝載文檔的URLnavigator返回navigator對象引用，表示當(dāng)前瀏覽器程序screen返回screen對象引用，表示屏幕name返回當(dāng)前窗口的名字status返回窗口狀態(tài)欄中的當(dāng)前信息defaultstatus返回窗口狀態(tài)欄中的默認(rèn)信息parent、self、top分別返回父窗口、當(dāng)前窗口和最頂層窗口的對象引用closed返回當(dāng)前窗口是否關(guān)閉的布爾值6.3瀏覽器對象2、Window對象的常用方法方法說

明open(URL,name,features)創(chuàng)建一個名為name的新瀏覽器窗口，并在新窗口中顯示URL指定的頁面。close()關(guān)閉瀏覽器窗口alert(msg)彈出警示對話框，msg為字符串，表示對話框中的顯示文本confirm(msg)彈出帶有“確認(rèn)”和“取消”按鈕的對話框。當(dāng)用戶單擊“確認(rèn)”按鈕時，confirm()方法返回true，單擊“取消”按鈕時返回false6.3瀏覽器對象2、Window對象的常用方法方法說

明prompt(msg,defaultText)彈出提示對話框print()相當(dāng)于單擊瀏覽器工具欄中的"打印"按鈕setTimeout(exp,time)延時器，使exp中的代碼在time毫秒后自動執(zhí)行一次。該方法返回延時器的IDsetInterval(exp,time)定時器，使exp中的代碼每間隔time毫秒就周期性地自動執(zhí)行一次。該方法返回定時器的IDclearTimeout(timerID)取消由setTimeout()設(shè)置的延時操作clearInterval(timerID)取消由setInterval()設(shè)置的定時操作6.3瀏覽器對象6.3.2Window對象3．Window對象的應(yīng)用警告對話框、確認(rèn)對話框和提示對話框Window對象的alert()、confirm()和prompt()方法執(zhí)行時可以在網(wǎng)頁中分別彈出警告、確認(rèn)和提示對話框。示例:demo0610.html6.3瀏覽器對象6.3.2Window對象3．Window對象的應(yīng)用定時器Window對象的setInterval()和setTimeout()方法，分別實(shí)現(xiàn)系統(tǒng)定時器和延時器功能。兩個方法的參數(shù)相同，但需要注意，setInterval()方法是每間隔參數(shù)指定時間周期性的自動執(zhí)行參數(shù)中指定的代碼段，而setTimeout()方法是經(jīng)過參數(shù)指定時間后自動執(zhí)行一次指定代碼段。示例:demo0611.html6.3瀏覽器對象6.3.3Navigator對象Navigator是存儲瀏覽器信息的對象。主要包含瀏覽器及用戶使用的操作系統(tǒng)的有關(guān)信息，信息只能讀取，不能設(shè)置。

demo0612.html屬性說明appCodeName返回瀏覽器的代碼名，絕大多數(shù)瀏覽器返回“Mozilla”appName返回瀏覽器的名稱appVersion返回瀏覽器的平臺和版本信息platform返回瀏覽器的操作系統(tǒng)平臺cpuClass返回瀏覽器系統(tǒng)的CPU等級onLine返回指明系統(tǒng)是否處于聯(lián)機(jī)模式的布爾值cookieEnanble返回指明瀏覽器中是否啟用cookie的布爾值userAgent返回由客戶機(jī)發(fā)送給服務(wù)器的user-agent頭部的值6.3瀏覽器對象6.3.4Screen對象Screen是JavaScript中的屏幕對象，反映了當(dāng)前用戶的屏幕設(shè)置。示例:demo0613.html示例:demo0614.html屬性說明width、height分別返回屏幕的寬度、高度，以像素為單位（下同）availWidth分別返回屏幕的可用寬度availHeight返回屏幕的可用高度（除Window任務(wù)欄之外）colorDepth返回屏幕的顏色深度，即用戶在“顯示屬性”對話框“設(shè)置”選項(xiàng)中的顏色位置6.3瀏覽器對象6.3.5Location對象Location對象表示當(dāng)前窗口所裝載文檔的URL屬性/方法說明href設(shè)置或返回完整的URLprotocol設(shè)置或返回URL中的協(xié)議名hostname設(shè)置或返回URL中的主機(jī)名host設(shè)置或返回URL中的主機(jī)部分，包括主機(jī)名和端口號port設(shè)置或返回URL中的端口號pathname設(shè)置或返回URL中的路徑名hash設(shè)置或返回URL中的錨點(diǎn)Location對象常用屬性和方法6.3瀏覽器對象Location對象表示當(dāng)前窗口所裝載文檔的URL屬性/方法說明search設(shè)置或返回URL中的查詢字符串，及從問號（?）開始的部分assign(url)為當(dāng)前窗口裝載有url制定的文檔reload(force)重新裝在當(dāng)前文檔。若參數(shù)force值為false（默認(rèn)）則可能裝載緩存的頁面；若參數(shù)為true，則表示從服務(wù)器重新裝載replace(url)在瀏覽器窗口裝載由url制定的頁面，并在歷史列表中代替上一個網(wǎng)頁的位置，從而使用戶不能用“后退”按鍵返回前一個文檔表6-9Location對象常用屬性和方法6.3瀏覽器對象6.3.6History對象一個只讀的URL字符串?dāng)?shù)組，用來存儲最近訪問網(wǎng)頁的URL地址列表。實(shí)例:demo0615.html屬性/方法說明length返回歷史列表的長度，及歷史列表中包含的URL個數(shù)current當(dāng)前文檔的URLnext歷史列表的下一個URLprevious歷史列表的前一個URLback()使瀏覽器窗口裝載歷史列表中的上一個頁面，相當(dāng)于單擊瀏覽器的“后退”按鈕forward()使瀏覽器窗口裝載歷史列表中的下一個頁面，相當(dāng)于單擊瀏覽器的“前進(jìn)”按鈕go(n)使瀏覽器窗口裝載歷史列表中的第n個頁面，如果n是負(fù)數(shù)，則裝載上第n個頁面History對象常用屬性和方法6.3瀏覽器對象6.3.7Document對象Document對象表示瀏覽器窗口中的頁面文檔。示例:demo0616.html屬性說明parentWindow返回當(dāng)前頁面文檔所在窗口對象的引用cookie設(shè)置或查詢當(dāng)前文檔相關(guān)的所有Cookiedomain返回提供當(dāng)前文檔的服務(wù)器域名lastModified返回當(dāng)前文檔的最后修改時間title返回當(dāng)前文檔的標(biāo)題，即由<title>標(biāo)記的文本URL返回當(dāng)前文檔的完整URLbgColor返回文檔的背景色fgColor返回文檔的前景色linkColor返回文檔中超級鏈接的顏色vlinkColor返回文檔中已訪問超級鏈接的顏色alinkColor返回文檔中激活的超級鏈接的顏色Document對象常用屬性（作為BOM對象）6.3瀏覽器對象6.3.7文檔（Document）對象示例:demo0617.html方法說明open([type])使用指定的MIME類型打開一個輸出流。該方法將除去當(dāng)前文檔的內(nèi)容，開始一個新文檔?？梢允褂脀rite()或witeln()方法為新文檔編寫內(nèi)容，最后必須用close()方法關(guān)閉輸出流close()關(guān)閉用open()方法打開的輸出流，并強(qiáng)制顯示所有緩存的輸出內(nèi)容write()向文檔寫入HTML代碼或文本writeln()與write()方法類似，不過要多寫入一個換行符document對象常用方法6.4HTMLDOM對象JavacSript通過訪問BOM對象來完成訪問、控制、修改瀏覽器要處理瀏覽器窗口顯示的頁面文檔，使用HTMLDOM技術(shù)。6.4.1DOM概述1.DOM的概念

DOM即文檔對象模型

由一系列對象組成，提供一系列訪問、檢索、修改XHTML文檔內(nèi)容與結(jié)構(gòu)的標(biāo)準(zhǔn)方法6.4HTMLDOM對象2.DOM特點(diǎn)DOM是跨平臺與跨語言的。

DOM是用于XHTML、XML文檔的應(yīng)用程序接口(API)。

DOM提供一種結(jié)構(gòu)化的文檔描述方式，從而使HTML內(nèi)容以結(jié)構(gòu)化的方式顯示。

DOM標(biāo)準(zhǔn)是由W3C制定與維護(hù)的。

DOM的頂層是document對象。

6.4HTMLDOM對象在W3C制定的DOM規(guī)范中，DOM主要包括以下3部分。CoreDOM(核心DOM)：定義了訪問和處理任何結(jié)構(gòu)化文檔的基本方法。XMLDOM:定義了訪問和處理XML文檔的標(biāo)準(zhǔn)方法。HTMLDOM:定義了訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。6.4HTMLDOM對象3．節(jié)點(diǎn)類型DOM樹中的節(jié)點(diǎn)分為12種類型。其中，常用節(jié)點(diǎn)類型是文檔、元素、屬性、文本和注釋5種。節(jié)點(diǎn)類型ID說明Element1元素節(jié)點(diǎn)，表示用標(biāo)記對標(biāo)記的文檔元素，如普通段落<p>...</p>Attribute2屬性節(jié)點(diǎn)，表示一對屬性名和屬性值，如id="p1"。該類節(jié)點(diǎn)不能包含子節(jié)點(diǎn)Text3如<p>Helloworld!</p>標(biāo)記中的文本“Helloworld!”。該類節(jié)點(diǎn)不能包含子節(jié)點(diǎn)Comment8注釋節(jié)點(diǎn)，表示文檔注釋。該類節(jié)點(diǎn)不能包含子節(jié)點(diǎn)Document9文檔節(jié)點(diǎn)，表示整個文檔常用DOM節(jié)點(diǎn)類型6.4HTMLDOM對象4.DOM與BOM的關(guān)系BOMWindowFrames[]LocationHistoryNavigatorDOMScreenAnchars[]Applets[]Areas[]Embeds[]DocumentForms[]ImagesLayers[]Links[]6.4HTMLDOM對象DOM樹節(jié)點(diǎn)之間存在以下層次關(guān)系。根節(jié)點(diǎn)：文檔節(jié)點(diǎn)處于層次樹的頂端，所有節(jié)點(diǎn)的祖先。父節(jié)點(diǎn)：除文檔根節(jié)點(diǎn)之外的每個節(jié)點(diǎn)都有父節(jié)點(diǎn)。子節(jié)點(diǎn)：大部分元素節(jié)點(diǎn)都有子節(jié)點(diǎn)。6.4HTMLDOM對象6.4.2HTMLDOM對象HTMLDOM是DOM規(guī)范中用來訪問和處理HTML文檔的標(biāo)準(zhǔn)方法，主要功能是實(shí)現(xiàn)訪問、檢索、修改HTML文檔的內(nèi)容與結(jié)構(gòu)。Document對象表示是HTMLDOM樹中頂層的文檔節(jié)點(diǎn)，代表整個HTML文檔，是訪問HTML頁面的入口。HTMLDocument對象包含很多集合對象，如all、anchors、forms、links等，這些子對象也可以作為HTMLDocument的屬性進(jìn)行訪問。6.4HTMLDOM對象屬性說明all返回文檔中所有元素對象的集合（按HTML源代碼順序排列，下同），只有IE支持此屬性anchors返回文檔中所有錨點(diǎn)（<aname=”…”>）對象的集合forms返回文檔中所有表單（<form>）對象的集合images返回文檔中所有圖像（<img>）對象的集合

links返回文檔中所有超鏈接（<ahref=”…”>）對象的集合stylesheets返回文檔中所有樣式表對象的集合body返回<body>元素對象的引用documentElement返回<html>元素對象的引用Document對象常用屬性（作為HTMLDOM對象）6.4HTMLDOM對象方法說明getElementById(id)獲取第1個具有指定id屬性值的頁面元素對象引用getElementsByName(name)獲取具有指定name屬性值的頁面元素對象集合getElementsByTagName(tag)獲取具有標(biāo)記名為tag的頁面元素對象集合Document對象常用方法（作為HTMLDOM對象）6.4HTMLDOM對象6.4.3訪問HTMLDOM對象

通過HTMLDocument對象提供的屬性和方法，運(yùn)用DOM技術(shù)可以訪問HTML文檔中的每個元素。1.訪問集合對象在HTMLDOM中，Document對象的子對象都是集合對象，如all、anchors、forms、images、links等。6.4HTMLDOM對象HTMLDOM中集合對象的通用屬性屬性說明length返回集合中對象的數(shù)目item(index)返回由參數(shù)index指定的對象，包括兩種類型的值：①整數(shù)。是對象在集合中的索引號（從0開始），此時可將集合視為數(shù)組。②字符串。是頁面元素對象的name或id屬性值。若多個對象具有相同的name或id屬性值，則該方法將返回一個集合。tags(tag)獲取具有標(biāo)記名為tag的頁面元素對象集合6.4HTMLDOM對象訪問集合中的對象，常用3種方法將集合對象視為數(shù)組對象，按訪問數(shù)組元素方式訪問，如forms[i]，等同于forms.item(i)。使用集合對象的item()方法訪問具有指定name或id屬性值的頁面元素對象，如item("text")。"text"表示標(biāo)簽中name或id屬性的值。使用集合對象的tags()方法訪問具有指定標(biāo)記名的頁面元素對象的集合。訪問form表單中的控件常用2種方法使用Form對象的elements集合屬性。直接使用控件名。6.4HTMLDOM對象例：示例：demo0618.html<formname="fr"action="hello.asp"method="post"><inputtype="text"name="password"></form>訪問密碼輸入文本框的value屬性，使用下面方法。varpass=fr.elements[0].value;//引用表單fr中第一個控件的value屬性varpass=fr.elements["password"].value;//引用表單fr中控件為password的控件varpass=fr.password.value//引用表單中name屬性為password的控件6.4HTMLDOM對象2．使用getElementById()、getElementsByName()或getElementsByTagName()方法訪問指定元素注意以下3點(diǎn)①語句document.getElementById(id)與document.all.item(id)、document.all.id功能相同。

語句document.getElementsByName(name)與document.all.item(name)、功能相同。語句document.getElementsByTagName(tag)與document.all.tags(tag)功能相同。6.4HTMLDOM對象②方法getElementById(id)返回一個元素對象，而方法getElementByName(name)和getElementByTagName(tag)返回可能包含多個元素對象的集合。③IE瀏覽器允許將document.all.item(id或name)簡寫為直接使用id或name屬性值訪問相應(yīng)元素。6.4HTMLDOM對象例：<ahref="#"name="linkname"id="linkid">…</a>若要訪問a標(biāo)記中的href屬性，以下幾種表示方法皆正確。

linkid.href;//直接用ID名引用linkname.href;//直接用name屬性值引用//用document.all.item(id)方法引用document.all.item(linkid).href;//用方法引用document.all.linkname.href;//用document.getElementById(id)方法引用document.getElementById("linkid").href;6.4HTMLDOM對象3．訪問CSS對象HTMLDOM也支持CSS樣式表，可以使用Style對象操縱HTML文檔的內(nèi)嵌樣式。HTML文檔中的每個元素對象都有一個style屬性，可以動態(tài)調(diào)整元素的內(nèi)嵌樣式，從而獲得所需效果。例//設(shè)置前景色為藍(lán)色，element表示元素對象element.style.color="blue"http://設(shè)置字體為隸書，element表示元素對象element.style.fontFamily="隸書"6.4HTMLDOM對象元素對象的style屬性引用一個Style對象。該對象包含與每個CSS樣式屬性相對應(yīng)的屬性，并且這些對象屬性名與CSS樣式屬性名基本相同。若CSS樣式屬性名是單個單詞，則相對應(yīng)的對象屬性名與之同名。例如對象屬性的style.background、style.color分別表示CSS樣式屬性background和color。若CSS樣式屬性名是多個單詞的連接，則去掉CSS屬性名中的連字號（即“-”），并且將第2個及后續(xù)單詞的首字母改為大寫形式，就成為相對應(yīng)的對象屬性名（這種命名風(fēng)格稱為“駝峰式”）。示例：demo0619.html6.5事件和事件處理6.5.1事件處理的相關(guān)概念1.事件JavaScript的事件是指可以被瀏覽器識別的、發(fā)生在頁面上的用戶動作或狀態(tài)變化。用戶動作是指用戶的鼠標(biāo)或鍵盤操作。例如click事件或keypress事件等。狀態(tài)變化是指頁面的狀態(tài)發(fā)生變化。例如load事件、resize事件或change事件等。6.5事件和事件處理6.5.1事件處理的相關(guān)概念2.事件處理事件處理是指對發(fā)生事件進(jìn)行處理的操作，這種操作需要事件處理程序來執(zhí)行。事件處理程序是指對發(fā)生事件進(jìn)行處理的程序代碼片段，通常實(shí)現(xiàn)為一個函數(shù)。在程序運(yùn)行期間，事件處理程序?qū)㈨憫?yīng)相關(guān)事件。6.5事件和事件處理6.5.1事件處理的相關(guān)概念3．事件處理步驟事件處理是JavaScript基于對象編程的一個重要環(huán)節(jié)。確定響應(yīng)事件的元素。為指定元素確定響應(yīng)的事件。為指定元素的指定事件編寫事件處理程序。將事件處理程序綁定到指定元素的指定事件。6.5事件和事件處理6.5.2事件綁定通過事件綁定將事件處理程序與某個事件相關(guān)聯(lián)，當(dāng)事件發(fā)生時就會觸發(fā)該事件處理程序的執(zhí)行。1.直接在HTML標(biāo)記中指定事件處理程序<tagevent="eventHander"[event="eventHander"]…>其中的事件處理程序可以是JavaScript語句可以是函數(shù)6.5事件和事件處理事件處理程序?yàn)閱螚l語句。<bodyonload="alert('歡迎光臨！')"onunload="alert('謝謝瀏覽頁面！')">事件處理程序?yàn)槎鄺l語句。<bodyonload="varname=prompt('請輸入姓名','');alert(name+'您好，歡迎光臨！')">事件處理程序?yàn)楹瘮?shù)<bodyonload="hello()"><scriptlanguage="javascript">functionhello(){ varname=prompt("請輸入姓名",""); alert(name+"您好，歡迎光臨！");}</script></body>6.5事件和事件處理2.為特定對象指定特定事件在JavaScript的<script>標(biāo)記中指定特定的對象，及該對象要執(zhí)行的事件名稱，并在<script>和</script>標(biāo)記中編寫事件處理程序代碼。<scriptlanguage="JavaScript"for="對象"event="事件">//此處為事件處理程序代碼…</script>6.5事件和事件處理使用<script>標(biāo)記來完成頁面加載和關(guān)閉頁面時顯示對話框。<scriptlanguage="javascript"for="window"event="onload"> alert("您好，歡迎光臨！");</script><scriptlanguage="javascript"for="window"event="onunload"> alert("謝謝瀏覽！");</script>6.5事件和事件處理3.通過JavaScript語句調(diào)用事件處理程序該方法是在JavaScript腳本中聲明對象的事件及調(diào)用響應(yīng)事件的函數(shù)，不需要在HTML標(biāo)記中指定事件及事件處理程序。objectName.event=eventHander事件處理程序只能通過自定義函數(shù)來指定當(dāng)函數(shù)無參數(shù)時，函數(shù)名后不用加括號，否則函數(shù)會被自動觸發(fā)，而并不是在事件響應(yīng)時觸發(fā)。

6.5事件和事件處理例，代碼段實(shí)現(xiàn)單擊按鈕彈出對話框功能。<inputtype="button"name="bt"value="問候"/><scriptlanguage="javascript"for="window"event="onload">hello();functionhello(){ alert("HelloJavaScript!!!"); }</script>6.6常見事件和事件對象6.6.1JavaScript常見事件以鼠標(biāo)鍵盤事件為例事件類型事件事件觸發(fā)條件鼠標(biāo)和鍵盤事件onclick單擊鼠標(biāo)時觸發(fā)ondblclick雙擊鼠標(biāo)時觸發(fā)onmousedown按下鼠標(biāo)時觸發(fā)onmouseup鼠標(biāo)按下后并松開鼠標(biāo)時觸發(fā)onmouseover鼠標(biāo)移動到某對象范圍的上方時觸發(fā)onmousemove鼠標(biāo)移動時觸發(fā)此事件onmouseout鼠標(biāo)離開某對象范圍時觸發(fā)此事件onkeypress鍵盤上的某個按鍵被按下并釋放時觸發(fā)onkeydown當(dāng)鍵盤上某個按鍵被按下時觸發(fā)onkeyup鍵盤上某個按鍵被按下后松開時觸發(fā)6.6常見事件和事件對象6.6.2事件對象

事件處理程序有時需要使用事件對象(Event)。Event對象可以訪問事件的發(fā)生狀態(tài)，如事件名、鍵盤按鍵狀態(tài)、鼠標(biāo)位置等信息。Event對象的部分屬性屬性說明type表示事件名。例如單擊事件名是clicksrcElement表示產(chǎn)生事件的元素對象。例如當(dāng)單擊按鈕時產(chǎn)生click事件，該事件的srcElement屬性就是clickcancelBubble表示是否取消當(dāng)前事件向上冒泡、傳遞給上一層次的元素的對象。returnValue指定事件的返回值，默認(rèn)為true。若設(shè)置為false，則取消該事件的默認(rèn)處理動作keyCode指示引起鍵盤事件的按鍵的Unicode鍵碼值6.6常見事件和事件對象

實(shí)例：demo0620.htmlEvent對象的部分屬性屬性說明altKey指示ALT鍵的狀態(tài)，當(dāng)ALT鍵按下時為truectrlKey指示CTRL鍵的狀態(tài)，當(dāng)CTRL鍵按下時為trueshiftKey指示SHIFT鍵的狀態(tài)，當(dāng)SHIFT鍵按下時為truerepeat指示keydown事件是否正在重復(fù)，并且只適用于keydown事件button指示哪一個鼠標(biāo)鍵被按下(0：無鍵被按下；1：左鍵被按下；2：右鍵被按下；4：中建被按下)x,y指示鼠標(biāo)指針相對于頁面的X,Y坐標(biāo)，即水平和垂直位置，單位為像素，下同clientX,ClientY指示鼠標(biāo)指針相對于窗口瀏覽區(qū)的X,Y坐標(biāo)screenX,screenY指示鼠標(biāo)指針相對于電腦屏幕的X,Y坐標(biāo)offsetX,offsetY指示鼠標(biāo)指針相對于觸發(fā)事件的元素的X,Y坐標(biāo)fromElement用于mouseover和mouseout事件，指示鼠標(biāo)指針從哪個元素移來toElement用于mouseover和mouseout事件，指示鼠標(biāo)指針移向哪個元素6.7常見事件示例6.7.1鼠標(biāo)事件鼠標(biāo)事件是指用戶操作鼠標(biāo)時而觸發(fā)的事件。點(diǎn)擊事件:onclick,ondblclick,onmousedown,onmouseup。移動事件:onmouseover,onmousemove,onmouseout。1.鼠標(biāo)的按下和松開事件onmousedown事件用于在鼠標(biāo)按下時觸發(fā)事件處理程序；onmouseup事件是在鼠標(biāo)松開時觸發(fā)事件處理程序。6.7常見事件示例2．鼠標(biāo)的移入和移出事件onmouseover事件在鼠標(biāo)移動到對象上方時觸發(fā)事件處理程序；onmouseout事件在鼠標(biāo)移出對象上方時觸發(fā)事件處理程序。

demo0621.html3．鼠標(biāo)的移動事件鼠標(biāo)移動事件(onmousemove)是鼠標(biāo)在頁面上移動時觸發(fā)事件處理程序，可以在該事件中用Event對象的clientX和clientY屬性實(shí)時讀取鼠標(biāo)在頁面中的位置。

demo0622.html6.7常見事件示例6.7.2鍵盤事件鍵盤事件指用戶操作鍵盤而觸發(fā)的事件。主要包括鍵按下事件(onkeydown)鍵彈起事件(onkeyup)按鍵事件(onkeypress)。當(dāng)按一次字符鍵時依次觸發(fā)onkeydown、onkeypress、onkeyup事件。若按下不放，則持續(xù)觸發(fā)onkeydown和onkeypress事件。demo0623.html6.7常見事件示例6.7.3表單事件1.提交與重置事件表單提交:用戶在表單中填寫或選擇的內(nèi)容傳送給服務(wù)器端的特定程序，并進(jìn)行具體的處理。表單提交事件(onsubmit):表單數(shù)據(jù)真正提交到服務(wù)器之前被觸發(fā)，該事件的處理程序通過返回true或false值來確定或阻止表單的提交。表單重置事件(onreset):將表單中各元素值設(shè)置為原始值。<formname="formname"onreset="returnFunname"onsubmit="returnFunname"></form>

6.7常見事件示例表單提交方式

單擊表單中的“提交”按鈕。表單是在表單的onsubmit事件下調(diào)用事件處理程序?qū)Ρ韱螖?shù)據(jù)進(jìn)行驗(yàn)證。例如，<formname="formname"onsubmit="returncheck()"><inputtype="submit"value="提交"></form>6.7常見事件示例表單提交方式單擊普通按鈕(button按鈕)。表單是在按鈕的onclick事件下調(diào)用事件處理程序?qū)Ρ韱螖?shù)據(jù)進(jìn)行驗(yàn)證。<formname="formname"><inputtype="button"onclick="check()"></form>6.7常見事件示例表單驗(yàn)證表單驗(yàn)證是指確定用戶提交的表單數(shù)據(jù)是否合法.分為服務(wù)器端表單驗(yàn)證和客戶端表單驗(yàn)證。服務(wù)器端接收到用戶提交的表單數(shù)據(jù)后進(jìn)行驗(yàn)證?？蛻舳嗽谙蚍?wù)器提交表單數(shù)據(jù)前進(jìn)行表單驗(yàn)證。完整的表單驗(yàn)證工作必須在服務(wù)器端完成?？蛻舳艘恍┏醪奖韱悟?yàn)證，可以避免大量錯誤數(shù)據(jù)的傳遞，減少網(wǎng)絡(luò)流量。demo0624.html6.7常見事件示例6.7.3表單事件

2.元素內(nèi)容修改事件onchange事件在當(dāng)前元素失去焦點(diǎn)并且元素的內(nèi)容發(fā)生改變時觸發(fā)事件處理程序。通常在下拉文本框中使用。demo0625.html6.7常見事件示例6.7.3表單事件3.獲得焦點(diǎn)事件與失去焦點(diǎn)事件onfocus事件是當(dāng)某個元素獲得焦點(diǎn)時觸發(fā)事件處理程序。onblur事件是當(dāng)前元素