JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）課件 劉凡馨 第5章 JavaScript的面向?qū)ο螅坏?章 瀏覽器對象

JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第5章JavaScript的面向?qū)ο蟊菊轮饕獌?nèi)容：對象原型對象和繼承內(nèi)置對象類5.1對象在JavaScript中，基本類型（number、string、boolean、null、undefined和symbol）本身并不是對象。JavaScript的內(nèi)置對象（String、Number、Boolean、Object、Function、Array、Date、RegExp和Error等)都是是對象的一個(gè)子類型。在面向?qū)ο蟮某绦蛟O(shè)計(jì)中，類封裝了對象的共同屬性和方法。屬性表示對象的特征，方法表示對象的行為。具體的對象稱為類的實(shí)例對象，繼承了類的所有屬性和方法。雖然JavaScript不是純粹面向?qū)ο?，但同樣支持面向?qū)ο蟮奶匦?。JavaScript的對象同樣有屬性和方法，也支持繼承。一個(gè)對象可擁有多個(gè)屬性和方法，并可繼承原型對象的屬性和方法。對象的屬性可看作一個(gè)“鍵/值”對，鍵是屬性名，值是屬性的值。一個(gè)對象就是多個(gè)屬性名到值的映射，這類似于其他程序設(shè)計(jì)語言中的“映射”“散列”“字典”等概念。對象的屬性和方法均通過對象訪問。x

=

event.type

//使用事件對象的屬性，獲得事件類型名稱event.preventDefault()

//調(diào)用事件對象的方法，阻止事件默認(rèn)行為5.1.1創(chuàng)建對象JavaScript提供了3種創(chuàng)建對象的方法：字面量new關(guān)鍵字Object.create()方法1．使用字面量創(chuàng)建對象在JavaScript中，花括號(hào)括起來的多個(gè)“鍵/值”對是一個(gè)對象常量，可將其賦給一個(gè)變量。

var

x

=

{}

//創(chuàng)建一個(gè)空對象

var

a

=

{

name:

'JavaScript程序設(shè)計(jì)',

price:

25

}

//創(chuàng)建一個(gè)有name和price屬性的對象2．使用new關(guān)鍵字創(chuàng)建對象new關(guān)鍵字調(diào)用構(gòu)造函數(shù)來創(chuàng)建并初始化一個(gè)對象。JavaScript的內(nèi)置對象都包含內(nèi)置的構(gòu)造函數(shù)。例如，Object()、Array()、Date()等都是構(gòu)造函數(shù)。var

a

=

new

Object()

//創(chuàng)建空對象var

b

=

new

Object({

name:

'JavaScript程序設(shè)計(jì)',

price:

25

})

//創(chuàng)建帶有屬性的對象var

c

=

new

Array(1,

2,

3)

//創(chuàng)建一個(gè)數(shù)組對象var

d=new

Date()

//創(chuàng)建一個(gè)表示當(dāng)前日期時(shí)間的日期對象在JavaScript中，通過字面量創(chuàng)建的所有對象都有相同的原型對象，對象繼承原型對象的屬性和方法，可使用Ototype屬性引用原型對象。使用new關(guān)鍵字和構(gòu)造函數(shù)創(chuàng)建對象時(shí)，實(shí)質(zhì)是使用構(gòu)造函數(shù)的prototype屬性值作為原型對象。例如，newArray()以Atotype屬性值作為原型對象，newDate()以Dtotype屬性值作為原型對象3．使用Object.create()方法創(chuàng)建對象Object.create()方法用指定參數(shù)創(chuàng)建對象，參數(shù)為null時(shí)，創(chuàng)建一個(gè)空對象；參數(shù)為對象常量或其他對象時(shí)，將參數(shù)作為原型對象來創(chuàng)建對象，新對象繼承原型對象的所有屬性和屬性值。var

a

=

Object.create(null)

//創(chuàng)建一個(gè)空對象var

b

=

Object.create({

name:

'jQuery教程',

price:

30

})

//提供原型對象來創(chuàng)建對象5.1.2使用對象屬性對象屬性使用“.”運(yùn)算符來訪問，“.”左側(cè)為引用對象的變量名稱，右側(cè)為屬性名。也可用類似于數(shù)組元素的方式來訪問屬性。var

a

=

{name:'C++',price:12}document.write()document.write(a['name'])兩條語句中的和a['name']是等價(jià)的。如果讀取一個(gè)不存在或者未賦值的屬性，得到的值為undefined。對象的屬性是動(dòng)態(tài)的。在給對象屬性賦值時(shí)，如果屬性存在，則覆蓋原來的值，否則會(huì)為對象創(chuàng)建新的屬性并賦值。var

a

=

{

name:

'C++',

price:

12

}

=

'HTML'

//修改屬性值a.nmae

=

'JavaScript'

//本意是為name屬性賦值，輸入錯(cuò)誤，這會(huì)創(chuàng)建新的nmae屬性可使用delete刪除對象的屬性。delete

可使用for/in循環(huán)來遍歷對象的屬性。5.1.3對象的方法對象的方法就是通過對象調(diào)用的函數(shù)。在方法中可用this關(guān)鍵字來引用當(dāng)前對象。將函數(shù)賦給對象屬性，該屬性即可稱為方法，通過該屬性來引用函數(shù)。作為方法使用的屬性，可稱為方法屬性5.1.4構(gòu)造函數(shù)構(gòu)造函數(shù)是一個(gè)特殊的方法。在構(gòu)造函數(shù)中，使用this關(guān)鍵字訪問當(dāng)前對象。構(gòu)造函數(shù)需要和new關(guān)鍵字一起使用，以便創(chuàng)建并初始化對象。5.1.5with語句with語句的基本語法格式如下。with(對象){

語句}在with語句的代碼塊中，可直接使用對象的屬性和方法，而不需要“對象名.”作為前綴。5.2原型對象和繼承對象和原型對象之間是一種“繼承”的共享關(guān)系，對象繼承原型對象的所有屬性和方法。一條基本的原則：除了原型對象外，對象的屬性總是“私有的”，只屬于當(dāng)前對象。給不存在的屬性賦值時(shí)，總是為對象創(chuàng)建該屬性。在讀取一個(gè)對象屬性時(shí)，如果對象沒有該屬性，則查看原型對象是否有該屬性。如果有，則使用原型對象的屬性值，否則得到undefined。5.3內(nèi)置對象JavaScript常用內(nèi)置對象有Array（數(shù)組）對象、Math（數(shù)學(xué)）對象、Number（數(shù)字）對象、Date（日期）對象和String（字符串）對象。本節(jié)主要介紹Math對象、Date對象和String對象。5.3.1Math對象Math對象定義了常用的數(shù)學(xué)函數(shù)和常量，它沒有構(gòu)造函數(shù)。Math對象的主要屬性和方法如下。Math.E：返回?cái)?shù)學(xué)常量e。Math.LN10：返回10的自然對數(shù)。Math.LN2：返回2的自然對數(shù)。Math.LOG10E：返回以10為底e的對數(shù)。Math.LOG2E：返回以2為底e的對數(shù)。Math.PI：返回圓周率。Math.SQRT1_2：返回2的平方根的倒數(shù)。Math.SQRT2：返回2的平方根。Math.abs(x)：返回x的絕對值。Math.sin(x)：返回x的正弦值。Math.cos(x)：返回x的余弦值。Math.tan(x)：返回x的正切值。Math.acos(x)：返回x的反余弦值。Math.asin(x)：返回x的反正弦值。Math.atan(x)：返回x的反正切值。Math.ceil(x)：返回大于或等于x的最小整數(shù)。Math.exp(x)：返回e的x次方。Math.floor(x)：返回小于或等于x的最大整數(shù)。Math.log(x)：返回x的自然對數(shù)。Math.max(x,y,……)：返回參數(shù)中的最大值。Math.min(x,y,……)：返回參數(shù)中的最小值。Math.pow(x,y)：返回x的y次方。Math.random()：返回一個(gè)等于或大于0、小于1的隨機(jī)數(shù)。Math.round(x)：返回x的四舍五入值，0.5向上取整。例如，2.5舍入為3，-2.5舍入為-2。5.3.2Date對象Date對象的構(gòu)造函數(shù)如下。Date()：創(chuàng)建表示當(dāng)前日期時(shí)間的Date對象。Date(msecond)：創(chuàng)建整數(shù)msecond表示的Date對象。msecond為要?jiǎng)?chuàng)建的日期距離1970年1月1日00:00:00的毫秒值。Date(datestring)：用日期時(shí)間字符串datestring創(chuàng)建Date對象。Date(year,month,day,hour,minute,second,msecond)：創(chuàng)建指定了年、月、日、小時(shí)、分鐘、秒和毫秒的Date對象。Date對象的常用方法如下。getFullYear()：返回日期的四位年份（4位整數(shù)）。getMonth()：返回日期的月份（0-11），1月為0。getDate()：返回日期的日數(shù)（1-31）。getDay()：返回星期幾（0-6），星期日為0。getHours()：返回小時(shí)數(shù)（0-23）。getMinutes()：返回分鐘數(shù)（0-59）。getSeconds()：返回秒數(shù)（0-59）。getMilliseconds()：返回豪秒數(shù)（0-999）。getTime()：返回當(dāng)前時(shí)間，自1970年1月1日以來的毫秒數(shù)。setYear()：設(shè)置日期的年。setMonth()：設(shè)置日期的月。setDate()：設(shè)置日期的日。setDay()：設(shè)置星期幾。setHours()：設(shè)置小時(shí)數(shù)。setMinutes()：設(shè)置分鐘數(shù)。setSeconds()：設(shè)置秒數(shù)。setMilliseconds()：設(shè)置豪秒數(shù)。setTime()：用距1970年1月1日的毫秒數(shù)來設(shè)置時(shí)間。toString()：將Date對象轉(zhuǎn)換為字符串。toLocaleString()：將Date對象轉(zhuǎn)換為本地字符串。toDateString()：將Date對象轉(zhuǎn)換為只含日期的字符串。toLocaleDateString()：將Date對象轉(zhuǎn)換為只含日期的本地字符串。toTimeString()：將Date對象轉(zhuǎn)換為只含時(shí)間的字符串。toLocaleTimeString()：將Date對象轉(zhuǎn)換為只含時(shí)間的本地字符串。5.3.3String對象1．構(gòu)造函數(shù)String對象的構(gòu)造函數(shù)為String(s)，newString(s)創(chuàng)建一個(gè)保存字符串的對象，類型為object。參數(shù)s不是字符串時(shí)，JavaScript會(huì)將其轉(zhuǎn)換為字符串。內(nèi)置函數(shù)String(s)與String對象的構(gòu)造函數(shù)同名，它將參數(shù)s轉(zhuǎn)換為普通字符串，類型為string。2．String對象屬性length屬性用于返回字符串對象中保存的字符個(gè)數(shù)。var

n

=

"abc".length

//n的值為3這說明字符串“abc”是對象嗎？答案是否定的。在執(zhí)行該語句時(shí)，JavaScript會(huì)隱式地將字符串“abc”轉(zhuǎn)換為String對象，然后通過對象返回length屬性。3．String對象方法charAt(n)：返回字符串中的第n個(gè)字符，第1個(gè)字符位置為0。charCodeAt(n)：返回字符串中第n個(gè)字符的Unicode。contact(value1,value2,…)：將參數(shù)提供的多個(gè)值按順序添加到當(dāng)前字符串末尾，返回新的字符串。indexOf(s,start)：s為要查找的字符串，start為搜索開始位置（可省略）。方法從給定位置開始在原字符串中搜索給定字符串，返回該字符串第1次出現(xiàn)的位置。省略搜索位置時(shí)，從第1個(gè)字符開始搜索。如果不包含給定字符串，返回值為-1。lastIndexOf()：與indexOf()方法類似，返回給定字符串最后一次出現(xiàn)的位置。replace(a,b)：將字符串中與a匹配的字符替換為b中的字符串。a可以是一個(gè)正則表達(dá)式對象，a具有全局屬性g時(shí)，替換所有匹配的字符串，否則只替換第1個(gè)匹配字符串。a為簡單字符串時(shí)，也只替換第1個(gè)匹配字符串。search(a)：在字符串對象中查找與a匹配的子字符串。若a不是正則表達(dá)式對象，會(huì)先將其轉(zhuǎn)換為正則表達(dá)式對象。如果包含匹配的字符串，返回第1個(gè)匹配的字符串位置，否則返回-1。slice(start,end)：返回字符串中從start位置開始的，end之前（不包含end）的子字符串。參數(shù)為負(fù)數(shù)時(shí)，從字符串末尾開始計(jì)算位置。-1表示字符串最后一個(gè)字符。split(dm,len)：使用dm指定的分隔符將字符串分解為字符串?dāng)?shù)組，數(shù)組最多l(xiāng)en個(gè)元素。len省略時(shí)，分解整個(gè)字符串。substring(m,n)：與slice()類似。區(qū)別在于，substring()將兩個(gè)參數(shù)中的較小值作為開始位置，將另一個(gè)參數(shù)作為結(jié)束位置。toLowerCase()：將字符串中所有字母轉(zhuǎn)換為小寫。toUpperCase()：將字符串中所有字母轉(zhuǎn)換為大寫。4．使用String對象將字符串轉(zhuǎn)換為HTML標(biāo)記的方法anchor()：將字符串轉(zhuǎn)換為<a>標(biāo)記，參數(shù)作為標(biāo)記name屬性的值。bold()：將字符串轉(zhuǎn)換為<b>標(biāo)記。italics()：將字符串轉(zhuǎn)換為<i>標(biāo)記。strike()：將字符串轉(zhuǎn)換為<strike>標(biāo)記。fixed()：將字符串轉(zhuǎn)換為<tt>標(biāo)記。fontcolor()：將字符串轉(zhuǎn)換為<font>標(biāo)記，設(shè)置顏色。fontsize()：將字符串轉(zhuǎn)換為<font>標(biāo)記，設(shè)置字號(hào)。link：將字符串轉(zhuǎn)換為<a>標(biāo)記，參數(shù)作為標(biāo)記href屬性的值。sub：將字符串轉(zhuǎn)換為<sub>標(biāo)記。5.4類在JavaScript中，對象是特定屬性的集合，類則是同一類對象的共享屬性和方法的集合。JavaScript的類使用基于原型的繼承機(jī)制，繼承同一個(gè)原型的所有對象是同一個(gè)類的實(shí)例（也稱實(shí)例對象或類的成員）。JavaScript一直允許定義類，只是沒有明確類的概念。ES6增加了類的相關(guān)語法，包括class關(guān)鍵字。5.4.1使用工廠函數(shù)定義類早期的JavaScript支持使用工廠函數(shù)創(chuàng)建對象，工廠函數(shù)可看作類的定義。工廠函數(shù)通過原型對象來定義類的屬性和方法。5.4.2使用構(gòu)造函數(shù)定義類JavaScript可使用new關(guān)鍵字調(diào)用構(gòu)造函數(shù)創(chuàng)建新對象，對新對象進(jìn)行初始化。構(gòu)造函數(shù)的prototype屬性值作為新對象的原型，這也說明使用同一個(gè)構(gòu)造函數(shù)創(chuàng)建的所有對象均繼承同一個(gè)原型，都是同一個(gè)類的實(shí)例對象。5.4.3使用class關(guān)鍵字定義類ES6增加了class關(guān)鍵字，使JavaScript具有了類似于Java和C++的類定義方式。class關(guān)鍵字定義類的基本語法格式如下。class

類名

{

constructor(參數(shù))

{//定義類的構(gòu)造函數(shù)

…//使用參數(shù)初始化新對象的屬性

}

…

//定義類的方法}5.4.4為類添加和修改方法JavaScript基于原型的繼承機(jī)制，允許通過修改類的prototype屬性為類的原型對象添加和修改屬性，從而實(shí)現(xiàn)為類添加和修改方法。不管是否在修改原型對象之前創(chuàng)建實(shí)例對象，所有實(shí)例對象均可繼承添加和修改的屬性。5.4.5子類在面向?qū)ο笾?，通過擴(kuò)展類A得到類B，則類A是父類，類B是子類。子類可繼承父類的所有方法。如果子類定義了與父類同名的方法，則子類的方法覆蓋父類的同名方法，這稱為方法的重載。JavaScript使用extends關(guān)鍵字定義子類，在子類中可使用super關(guān)鍵字調(diào)用父類的構(gòu)造函數(shù)。在子類中使用super關(guān)鍵字調(diào)用父類的構(gòu)造函數(shù)，需要注意的是，子類應(yīng)在使用this關(guān)鍵字之前調(diào)用父類的構(gòu)造函數(shù)。如果子類的構(gòu)造函數(shù)未調(diào)用父類構(gòu)造函數(shù)，JavaScript會(huì)自動(dòng)添加super()，以便調(diào)用父類的構(gòu)造函數(shù)。編程實(shí)踐：輸出隨機(jī)素?cái)?shù)本節(jié)綜合應(yīng)用本章所學(xué)知識(shí)，使用JavaScript腳本在瀏覽器中輸出10個(gè)100以內(nèi)的隨機(jī)素?cái)?shù)，按從小到大的順序輸出，如圖5-17所示。Math.random()方法返回[0,1)范圍內(nèi)的一個(gè)隨機(jī)數(shù)。返回[a,b)范圍內(nèi)的隨機(jī)整數(shù)可使用下面的語句。var

x

=

parseInt((b

-

a

+

1)

*

Math.random())

+

aJavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第6章瀏覽器對象本章主要內(nèi)容：Window對象Document對象Form對象6.1Window對象Window（窗口）對象是客戶端JavaScript程序的頂級(jí)全局對象，它代表當(dāng)前瀏覽器窗口，所有的其他全局對象、函數(shù)、變量自動(dòng)成為Window對象的成員。6.1.1Window對象層次結(jié)構(gòu)window（小寫）關(guān)鍵字用于引用當(dāng)前窗口的Window對象。每個(gè)Window對象均有一個(gè)document屬性，用于引用窗口中代表Web文檔的Document對象。Document對象的forms數(shù)組包含了文檔中的所有Form（表單）對象?？捎孟旅娴谋磉_(dá)式引用第1個(gè)表單。window.document.forms[0]每個(gè)瀏覽器窗口中的所有對象構(gòu)成了以Window對象為根節(jié)點(diǎn)的層次結(jié)構(gòu)，通過Window對象可引用當(dāng)前窗口和文檔中的所有對象。6.1.2Window對象的常用屬性和方法1．Window對象常用屬性defaultStatus：設(shè)置或返回瀏覽器狀態(tài)欄顯示的默認(rèn)信息。status：設(shè)置或返回瀏覽器狀態(tài)欄顯示的即時(shí)信息。document：引用Document對象。navigator：引用包含客戶端瀏覽器信息的Navigator對象。frames：窗口中所有框架對象的集合。history：引用表示瀏覽器歷史的History對象。location：引用表示瀏覽器URL的Location對象。name：設(shè)置或返回窗口名稱，窗口名稱可作為<a><form>等標(biāo)記的target屬性值。2．Window對象的常用方法alert()：顯示警告信息對話框。confirm()：顯示確認(rèn)對話框。prompt()：顯示輸入對話框。blur()：使窗口失去焦點(diǎn)，即成為非活動(dòng)窗口。focus()：使窗口成為活動(dòng)窗口。close()：關(guān)閉窗口。createPopup()：創(chuàng)建一個(gè)彈出式窗口。setInterval()：設(shè)置經(jīng)過指定時(shí)間間隔執(zhí)行的函數(shù)或計(jì)算表達(dá)式。clearInterval()：取消由setInterval()方法設(shè)置的定時(shí)時(shí)間。setTimeout()：設(shè)置在指定的毫秒數(shù)后執(zhí)行的函數(shù)或計(jì)算表達(dá)式。clearTimeout()：取消由setTimeout()方法設(shè)置的指定時(shí)間。moveBy()：相對于窗口當(dāng)前坐標(biāo)移動(dòng)指定的像素。moveTo()：將窗口左上角移動(dòng)到指定的坐標(biāo)。open()：在一個(gè)新的瀏覽器窗口或已打開的命名窗口中打開URL。print()：輸出當(dāng)前窗口內(nèi)容。resizeBy()：按照指定的像素調(diào)整窗口的大小。resizeTo()：把窗口的大小調(diào)整到指定的寬度和高度。scrollBy()：按照指定的像素來滾動(dòng)內(nèi)容。scrollTo()：把內(nèi)容滾動(dòng)到指定的坐標(biāo)。6.1.3定時(shí)操作Window對象的setInterval()和setTimeout()方法用于執(zhí)行定時(shí)操作，其基本語法格式如下。setInterval(函數(shù)名稱,n)setTimeout(函數(shù)名稱,n)參數(shù)n為整數(shù)，單位為毫秒。setInterval()方法以指定時(shí)間為間隔，重復(fù)執(zhí)行函數(shù)。setTimeout()方法在指定時(shí)間結(jié)束時(shí)執(zhí)行函數(shù)。6.1.4錯(cuò)誤處理Window對象的onerror屬性可設(shè)置為用于處理腳本錯(cuò)誤的函數(shù)。腳本發(fā)生錯(cuò)誤時(shí)，JavaScript會(huì)執(zhí)行該函數(shù)，并向函數(shù)傳遞3個(gè)參數(shù)：第1個(gè)參數(shù)為錯(cuò)誤描述信息，第2個(gè)參數(shù)為文檔的URL，第3個(gè)參數(shù)為錯(cuò)誤所在行的行號(hào)。錯(cuò)誤處理函數(shù)的返回值具有特殊意義。通常，發(fā)生錯(cuò)誤時(shí)，瀏覽器會(huì)用對話框或在狀態(tài)欄中顯示錯(cuò)誤信息。如果錯(cuò)誤處理函數(shù)返回值為true，則瀏覽器不再向用戶顯示錯(cuò)誤信息。MicrosoftEdge、MozillaFirefox、GoogleChrome等瀏覽器在腳本出錯(cuò)時(shí)不向用戶顯示錯(cuò)誤信息。6.1.5Navigator對象Window對象的navigator屬性可引用包含客戶端瀏覽器信息的Navigator對象。Navigator對象的常用屬性如下。appCodeName：返回瀏覽器的代碼名稱。appMinorVersion：返回瀏覽器的次級(jí)版本。appName：返回瀏覽器的名稱。appVersion：返回瀏覽器的平臺(tái)和版本信息。browserLanguage：返回當(dāng)前瀏覽器的語言。cookieEnabled：返回瀏覽器中是否啟用cookie。cpuClass：返回瀏覽器系統(tǒng)的CPU等級(jí)。onLine：返回瀏覽器是否聯(lián)網(wǎng)。platform：返回運(yùn)行瀏覽器的操作系統(tǒng)名稱。systemLanguage：返回操作系統(tǒng)默認(rèn)語言。userAgent：返回瀏覽器發(fā)送給服務(wù)器的user-agent頭部值。userLanguage：返回用戶語言設(shè)置。6.1.6Screen對象Window對象的screen屬性用于引用Screen對象，以便獲取顯示器的相關(guān)信息。6.1.7窗口操作1．打開窗口open()方法用于打開瀏覽器窗口，其基本語法格式如下。window.open(url,name,feature,replace)各參數(shù)均可省略，含義如下。url：窗口中顯示文檔的URL。name：新窗口的名稱。該名稱可用作<a><form>等標(biāo)記的target屬性值。若name是已經(jīng)打開的窗口的名稱，則不會(huì)打開新窗口，而在該窗口中打開URL。feature：指定窗口特征。省略該參數(shù)時(shí)為標(biāo)準(zhǔn)瀏覽器窗口。表6-1列出了瀏覽器特征字符串。replace：參數(shù)為true，表示用URL替換瀏覽器歷史中的當(dāng)前條目；參數(shù)為false，表示將URL作為新條目添加到瀏覽器歷史中。2．關(guān)閉窗口close()方法用于關(guān)閉窗口。windows.close()

//關(guān)閉當(dāng)前窗口w.close()

//關(guān)閉變量w引用的窗口3．移動(dòng)窗口moveTo()方法用于移動(dòng)窗口。6.1.8用ID引用HTML標(biāo)記Window對象的屬性在腳本中可作為全局變量使用。在Window對象沒有同名的屬性時(shí)，HTML標(biāo)記的ID（id屬性值）成為Window對象的屬性，所以可直接使用ID引用HTML標(biāo)記，而不必使用document.getElementById()方法查找標(biāo)記。若Window對象已經(jīng)有了與標(biāo)記ID同名的屬性，此時(shí)就不能直接使用ID引用HTML標(biāo)記。而且，不能保證瀏覽器版本升級(jí)不會(huì)為Window對象增加這個(gè)屬性，所以必須謹(jǐn)慎使用ID引用HTML標(biāo)記。<a>、<applet>、<area>、<embed>、<form>、<frameset>、<iframe>、<img>和<object>等HTML標(biāo)記的name屬性也有同樣的特點(diǎn)——IE瀏覽器支持，其他大多數(shù)瀏覽器不支持。6.2Document對象Document對象表示瀏覽器中的HTML文檔，并可訪問文檔中的所有標(biāo)記，從而為HTML文檔提供交互功能。6.2.1常用屬性和方法activeElement：返回獲得焦點(diǎn)的對象。alinkColor：設(shè)置或返回元素中所有激活鏈接的顏色。linkColor：設(shè)置或返回文檔中未訪問鏈接的顏色。vlinkColor：設(shè)置或返回用戶已訪問過的鏈接顏色。bgColor：設(shè)置或返回文檔的背景顏色。fgColor：設(shè)置或返回文檔的文本顏色。6.2.1常用屬性和方法charset：設(shè)置或返回文檔字符集。cookie：設(shè)置或返回當(dāng)前文檔的cookie。doctype：返回當(dāng)前文檔的文檔類型聲明。documentElement：返回對文檔根節(jié)點(diǎn)的引用。domain：設(shè)置或返回文檔的域名。fileCreatedDate：返回文檔創(chuàng)建的日期。6.2.1常用屬性和方法fileModifiedDate：返回文檔的修改日期。fileSize：返回文檔大小。lastModified：返回文檔上次修改的日期。URL：設(shè)置或返回當(dāng)前文檔的URL。URLUnencoded：返回文檔的URL，去除所有字符編碼。XMLDocument：返回文檔的XML文檔對象。6.2.1常用屬性和方法XSLDocument：返回文檔的XSL文檔對象。all[]：返回文檔中所有HTML標(biāo)記的集合。anchors[]：返回文檔中所有錨點(diǎn)<a>標(biāo)記的集合。forms[]：返回文檔中所有表單的集合。images[]：返回文檔中所有<img>標(biāo)記的集合。links[]：返回文檔中所有指定了href屬性的<a>和<area>標(biāo)記的集合。Document對象的常用方法如下。close()：關(guān)閉用open()方法打開的輸出流。getElementById()：返回指定ID對應(yīng)的HTML標(biāo)記。getElementsByName()：返回指定名稱的HTML標(biāo)記的集合。getElementsByTagName()：返回指定標(biāo)簽名的HTML標(biāo)記的集合。open()：打開輸出流。write()：向文檔寫入一個(gè)字符串，字符串中可包含HTML代碼和JavaScript腳本。writeln()：與write()方法類似，只是在每個(gè)輸出末尾添加一個(gè)換行符。注意在瀏覽器中，換行符顯示為空格，不能起到換行作用。在瀏覽器中換行應(yīng)使用<br>標(biāo)記。6.2.2動(dòng)態(tài)輸出文檔Document對象的write()和writeln()方法用于向文檔寫入內(nèi)容。若在瀏覽器加載文檔過程中執(zhí)行write()或writeln()方法，輸出內(nèi)容顯示在腳本對應(yīng)位置。若在文檔打開后執(zhí)行write()或writeln()方法，會(huì)隱式地打開一個(gè)空白HTML文檔，瀏覽器原來顯示的文檔被覆蓋。1．輸出HTML內(nèi)容write()和writeln()方法輸出的內(nèi)容被瀏覽器視為HTML內(nèi)容，即會(huì)對HTML標(biāo)記進(jìn)行處理，而不是原樣顯示。2．輸出純文本內(nèi)容document.open('text/plain')可以告訴瀏覽器輸出的內(nèi)容為純文本，但瀏覽器已不再支持這種用法。6.2.3了解DOM文檔對象模型（DocumentObjectModel，DOM）定義了訪問HTML和XML文檔的標(biāo)準(zhǔn)，允許腳本更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。DOM是萬維網(wǎng)聯(lián)盟（WorldWideWebConsortium，W3C）標(biāo)準(zhǔn)，包含HTMLDOM（用于HTML文檔）和XMLDOM（用于XML文檔）。本書主要介紹HTMLDOM，后續(xù)內(nèi)容中的DOM都指HTMLDOM。1．HTML文檔的DOM樹<html><head>

<title>htmldom</title>

<script>

function

test()

{

alert('這是按鈕單擊響應(yīng)')

}

</script></head><body>

<div><button

onclick="test()">按鈕</button></div>

</body></html>2．節(jié)點(diǎn)類型節(jié)點(diǎn)的nodeType屬性返回節(jié)點(diǎn)類型。節(jié)點(diǎn)主要有下列幾種類型。元素節(jié)點(diǎn)：nodeType值為1，HTML標(biāo)記為元素節(jié)點(diǎn)。屬性節(jié)點(diǎn)：nodeType值為2，HTML標(biāo)記的屬性為屬性節(jié)點(diǎn)。文本節(jié)點(diǎn)：nodeType值為3，HTML標(biāo)記內(nèi)的文本為文本節(jié)點(diǎn)。注釋節(jié)點(diǎn)：nodeType值為8，注釋內(nèi)容為注釋節(jié)點(diǎn)。文檔節(jié)點(diǎn)：nodeType值為9，整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)，是DOM樹的根（root）節(jié)點(diǎn)。3．節(jié)點(diǎn)關(guān)系DOM樹中節(jié)點(diǎn)之間的關(guān)系可用父（parent）、子（child）和兄弟（sibling）等術(shù)語來描述。節(jié)點(diǎn)關(guān)系具有下列特點(diǎn)。父節(jié)點(diǎn)擁有一個(gè)或多個(gè)子節(jié)點(diǎn)。子節(jié)點(diǎn)只有一個(gè)父節(jié)點(diǎn)。同級(jí)的子節(jié)點(diǎn)稱為兄弟，兄弟節(jié)點(diǎn)擁有相同父節(jié)點(diǎn)。在DOM樹中，頂端節(jié)點(diǎn)被稱為根（root）。除了根節(jié)點(diǎn)外，每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)。一個(gè)節(jié)點(diǎn)可擁有任意數(shù)量的子節(jié)點(diǎn)。6.2.4獲得HTML標(biāo)記引用JavaScript腳本大多數(shù)操作的目標(biāo)對象都是HTML標(biāo)記，使用Document對象的各種getElementX()方法可獲得HTML標(biāo)記的引用1．通過ID獲得HTML標(biāo)記引用所有HTML標(biāo)記都具有id屬性，其值在文檔中唯一。使用Document對象的getElementById()方法可獲得指定ID的標(biāo)記的引用。var

msg

=

document.getElementById("showmsg")2．通過name獲得HTML標(biāo)記引用Document對象的getElementsByName()方法返回指定name的所有標(biāo)記的引用。因?yàn)镠TML允許標(biāo)記的name屬性值重復(fù)，所以getElementsByName()方法返回的是一個(gè)對象數(shù)組。例如，下面的語句獲得第1個(gè)name屬性為news的標(biāo)記的引用。var

msg

=

document.getElementsByName("news")[0]3．通過標(biāo)記名稱獲得HTML標(biāo)記引用Document對象的getElementsByTagName()方法返回指定標(biāo)記名稱的所有標(biāo)記的引用。例如，下面的語句獲得第1個(gè)<div>標(biāo)記的引用。var

div1=

document.getElementsByTagName("div")[0]4．通過CSS類獲得HTML標(biāo)記引用Document對象的getElementsByClassName()方法返回指定類名的所有標(biāo)記的引用。HTML標(biāo)記的class屬性設(shè)置了該標(biāo)記使用的CSS類名。例如，下面的語句獲得第1個(gè)類名屬性為subtitle的標(biāo)記的引用。var

title1

=

document.getElementsByClassName("subtitle")[0]5．通過CSS選擇器獲得HTML標(biāo)記引用CSS選擇器可通過多種方式來選擇HTML標(biāo)記：id屬性、標(biāo)記名、類或者其他組合語法等。#showmsg

//選擇id屬性為showmsg的標(biāo)記div

//選擇<div>標(biāo)記.subtitle

//選擇類名為subtitle的標(biāo)記*[name="type"]

//選擇name屬性為type的標(biāo)記Document對象的querySelector()方法返回指定CSS選擇器匹配的標(biāo)記的引用，querySelectorAll()方法返回指定CSS選擇器匹配的多個(gè)標(biāo)記的引用。var

msg=

document.querySelector("#showmsg")var

divs

=

document.querySelectorAll("div")6.2.5遍歷文檔節(jié)點(diǎn)DOM樹中的節(jié)點(diǎn)是Node對象。Node對象具有下列常用屬性。parentNode：當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。Document節(jié)點(diǎn)作為根節(jié)點(diǎn)，沒有父節(jié)點(diǎn)，其parentNode屬性值為null。childNodes：包含所有子節(jié)點(diǎn)的數(shù)組。firstChild：第一個(gè)子節(jié)點(diǎn)。lastChild：最后一個(gè)子節(jié)點(diǎn)。nextSibling：下一個(gè)兄弟節(jié)點(diǎn)。previousSibling：前一個(gè)兄弟節(jié)點(diǎn)。nodeType：節(jié)點(diǎn)類型。nodeName：節(jié)點(diǎn)名稱。nodeValue：節(jié)點(diǎn)值。注釋和文本節(jié)點(diǎn)的值為文本內(nèi)容，其他節(jié)點(diǎn)的值為null。attributes：包含當(dāng)前節(jié)點(diǎn)的所有屬性節(jié)點(diǎn)的數(shù)組。6.2.6訪問HTML標(biāo)記屬性HTML不區(qū)分大小寫，JavaScript區(qū)分大小寫。在腳本中，單個(gè)單詞的屬性都使用小寫；多個(gè)單詞的屬性，第一個(gè)單詞全部小寫，后續(xù)單詞的首字母大寫，其他小寫。對于style屬性中的樣式名稱，如果規(guī)則一致，樣式名稱中的連字符“-”被忽略。在HTML代碼中使用JavaScript中的標(biāo)識(shí)符時(shí)，大小寫必須和腳本保持一致。6.2.7訪問HTML標(biāo)記內(nèi)容可通過下列方法讀寫HTML標(biāo)記內(nèi)容。標(biāo)記的innerHTML屬性：讀寫標(biāo)記的HTML內(nèi)容。標(biāo)記的innerText屬性：讀i