JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程（第2版）（微課版）第6章

JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程微課版第6章瀏覽器對(duì)象本章主要內(nèi)容：Window對(duì)象Document對(duì)象Form對(duì)象6.1Window對(duì)象Window（窗口）對(duì)象是客戶(hù)端JavaScript程序的頂級(jí)全局對(duì)象，它代表當(dāng)前瀏覽器窗口，所有的其他全局對(duì)象、函數(shù)、變量自動(dòng)成為Window對(duì)象的成員。6.1.1Window對(duì)象層次結(jié)構(gòu)window（小寫(xiě)）關(guān)鍵字用于引用當(dāng)前窗口的Window對(duì)象。每個(gè)Window對(duì)象均有一個(gè)document屬性，用于引用窗口中代表Web文檔的Document對(duì)象。Document對(duì)象的forms數(shù)組包含了文檔中的所有Form（表單）對(duì)象?？捎孟旅娴谋磉_(dá)式引用第1個(gè)表單。window.document.forms[0]每個(gè)瀏覽器窗口中的所有對(duì)象構(gòu)成了以Window對(duì)象為根節(jié)點(diǎn)的層次結(jié)構(gòu)，通過(guò)Window對(duì)象可引用當(dāng)前窗口和文檔中的所有對(duì)象。6.1.2Window對(duì)象的常用屬性和方法1．Window對(duì)象常用屬性defaultStatus：設(shè)置或返回瀏覽器狀態(tài)欄顯示的默認(rèn)信息。status：設(shè)置或返回瀏覽器狀態(tài)欄顯示的即時(shí)信息。document：引用Document對(duì)象。navigator：引用包含客戶(hù)端瀏覽器信息的Navigator對(duì)象。frames：窗口中所有框架對(duì)象的集合。history：引用表示瀏覽器歷史的History對(duì)象。location：引用表示瀏覽器URL的Location對(duì)象。name：設(shè)置或返回窗口名稱(chēng)，窗口名稱(chēng)可作為<a><form>等標(biāo)記的target屬性值。2．Window對(duì)象的常用方法alert()：顯示警告信息對(duì)話(huà)框。confirm()：顯示確認(rèn)對(duì)話(huà)框。prompt()：顯示輸入對(duì)話(huà)框。blur()：使窗口失去焦點(diǎn)，即成為非活動(dòng)窗口。focus()：使窗口成為活動(dòng)窗口。close()：關(guān)閉窗口。createPopup()：創(chuàng)建一個(gè)彈出式窗口。setInterval()：設(shè)置經(jīng)過(guò)指定時(shí)間間隔執(zhí)行的函數(shù)或計(jì)算表達(dá)式。clearInterval()：取消由setInterval()方法設(shè)置的定時(shí)時(shí)間。setTimeout()：設(shè)置在指定的毫秒數(shù)后執(zhí)行的函數(shù)或計(jì)算表達(dá)式。clearTimeout()：取消由setTimeout()方法設(shè)置的指定時(shí)間。moveBy()：相對(duì)于窗口當(dāng)前坐標(biāo)移動(dòng)指定的像素。moveTo()：將窗口左上角移動(dòng)到指定的坐標(biāo)。open()：在一個(gè)新的瀏覽器窗口或已打開(kāi)的命名窗口中打開(kāi)URL。print()：輸出當(dāng)前窗口內(nèi)容。resizeBy()：按照指定的像素調(diào)整窗口的大小。resizeTo()：把窗口的大小調(diào)整到指定的寬度和高度。scrollBy()：按照指定的像素來(lái)滾動(dòng)內(nèi)容。scrollTo()：把內(nèi)容滾動(dòng)到指定的坐標(biāo)。6.1.3定時(shí)操作Window對(duì)象的setInterval()和setTimeout()方法用于執(zhí)行定時(shí)操作，其基本語(yǔ)法格式如下。setInterval(函數(shù)名稱(chēng),n)setTimeout(函數(shù)名稱(chēng),n)參數(shù)n為整數(shù)，單位為毫秒。setInterval()方法以指定時(shí)間為間隔，重復(fù)執(zhí)行函數(shù)。setTimeout()方法在指定時(shí)間結(jié)束時(shí)執(zhí)行函數(shù)。6.1.4錯(cuò)誤處理Window對(duì)象的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ì)用對(duì)話(huà)框或在狀態(tài)欄中顯示錯(cuò)誤信息。如果錯(cuò)誤處理函數(shù)返回值為true，則瀏覽器不再向用戶(hù)顯示錯(cuò)誤信息。MicrosoftEdge、MozillaFirefox、GoogleChrome等瀏覽器在腳本出錯(cuò)時(shí)不向用戶(hù)顯示錯(cuò)誤信息。6.1.5Navigator對(duì)象Window對(duì)象的navigator屬性可引用包含客戶(hù)端瀏覽器信息的Navigator對(duì)象。Navigator對(duì)象的常用屬性如下。appCodeName：返回瀏覽器的代碼名稱(chēng)。appMinorVersion：返回瀏覽器的次級(jí)版本。appName：返回瀏覽器的名稱(chēng)。appVersion：返回瀏覽器的平臺(tái)和版本信息。browserLanguage：返回當(dāng)前瀏覽器的語(yǔ)言。cookieEnabled：返回瀏覽器中是否啟用cookie。cpuClass：返回瀏覽器系統(tǒng)的CPU等級(jí)。onLine：返回瀏覽器是否聯(lián)網(wǎng)。platform：返回運(yùn)行瀏覽器的操作系統(tǒng)名稱(chēng)。systemLanguage：返回操作系統(tǒng)默認(rèn)語(yǔ)言。userAgent：返回瀏覽器發(fā)送給服務(wù)器的user-agent頭部值。userLanguage：返回用戶(hù)語(yǔ)言設(shè)置。6.1.6Screen對(duì)象Window對(duì)象的screen屬性用于引用Screen對(duì)象，以便獲取顯示器的相關(guān)信息。6.1.7窗口操作1．打開(kāi)窗口open()方法用于打開(kāi)瀏覽器窗口，其基本語(yǔ)法格式如下。window.open(url,name,feature,replace)各參數(shù)均可省略，含義如下。url：窗口中顯示文檔的URL。name：新窗口的名稱(chēng)。該名稱(chēng)可用作<a><form>等標(biāo)記的target屬性值。若name是已經(jīng)打開(kāi)的窗口的名稱(chēng)，則不會(huì)打開(kāi)新窗口，而在該窗口中打開(kāi)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對(duì)象的屬性在腳本中可作為全局變量使用。在Window對(duì)象沒(méi)有同名的屬性時(shí)，HTML標(biāo)記的ID（id屬性值）成為Window對(duì)象的屬性，所以可直接使用ID引用HTML標(biāo)記，而不必使用document.getElementById()方法查找標(biāo)記。若Window對(duì)象已經(jīng)有了與標(biāo)記ID同名的屬性，此時(shí)就不能直接使用ID引用HTML標(biāo)記。而且，不能保證瀏覽器版本升級(jí)不會(huì)為Window對(duì)象增加這個(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對(duì)象Document對(duì)象表示瀏覽器中的HTML文檔，并可訪(fǎng)問(wèn)文檔中的所有標(biāo)記，從而為HTML文檔提供交互功能。6.2.1常用屬性和方法activeElement：返回獲得焦點(diǎn)的對(duì)象。alinkColor：設(shè)置或返回元素中所有激活鏈接的顏色。linkColor：設(shè)置或返回文檔中未訪(fǎng)問(wèn)鏈接的顏色。vlinkColor：設(shè)置或返回用戶(hù)已訪(fǎng)問(wèn)過(guò)的鏈接顏色。bgColor：設(shè)置或返回文檔的背景顏色。fgColor：設(shè)置或返回文檔的文本顏色。6.2.1常用屬性和方法charset：設(shè)置或返回文檔字符集。cookie：設(shè)置或返回當(dāng)前文檔的cookie。doctype：返回當(dāng)前文檔的文檔類(lèi)型聲明。documentElement：返回對(duì)文檔根節(jié)點(diǎn)的引用。domain：設(shè)置或返回文檔的域名。fileCreatedDate：返回文檔創(chuàng)建的日期。6.2.1常用屬性和方法fileModifiedDate：返回文檔的修改日期。fileSize：返回文檔大小。lastModified：返回文檔上次修改的日期。URL：設(shè)置或返回當(dāng)前文檔的URL。URLUnencoded：返回文檔的URL，去除所有字符編碼。XMLDocument：返回文檔的XML文檔對(duì)象。6.2.1常用屬性和方法XSLDocument：返回文檔的XSL文檔對(duì)象。all[]：返回文檔中所有HTML標(biāo)記的集合。anchors[]：返回文檔中所有錨點(diǎn)<a>標(biāo)記的集合。forms[]：返回文檔中所有表單的集合。images[]：返回文檔中所有<img>標(biāo)記的集合。links[]：返回文檔中所有指定了href屬性的<a>和<area>標(biāo)記的集合。Document對(duì)象的常用方法如下。close()：關(guān)閉用open()方法打開(kāi)的輸出流。getElementById()：返回指定ID對(duì)應(yīng)的HTML標(biāo)記。getElementsByName()：返回指定名稱(chēng)的HTML標(biāo)記的集合。getElementsByTagName()：返回指定標(biāo)簽名的HTML標(biāo)記的集合。open()：打開(kāi)輸出流。write()：向文檔寫(xiě)入一個(gè)字符串，字符串中可包含HTML代碼和JavaScript腳本。writeln()：與write()方法類(lèi)似，只是在每個(gè)輸出末尾添加一個(gè)換行符。注意在瀏覽器中，換行符顯示為空格，不能起到換行作用。在瀏覽器中換行應(yīng)使用<br>標(biāo)記。6.2.2動(dòng)態(tài)輸出文檔Document對(duì)象的write()和writeln()方法用于向文檔寫(xiě)入內(nèi)容。若在瀏覽器加載文檔過(guò)程中執(zhí)行write()或writeln()方法，輸出內(nèi)容顯示在腳本對(duì)應(yīng)位置。若在文檔打開(kāi)后執(zhí)行write()或writeln()方法，會(huì)隱式地打開(kāi)一個(gè)空白HTML文檔，瀏覽器原來(lái)顯示的文檔被覆蓋。1．輸出HTML內(nèi)容write()和writeln()方法輸出的內(nèi)容被瀏覽器視為HTML內(nèi)容，即會(huì)對(duì)HTML標(biāo)記進(jìn)行處理，而不是原樣顯示。2．輸出純文本內(nèi)容document.open('text/plain')可以告訴瀏覽器輸出的內(nèi)容為純文本，但瀏覽器已不再支持這種用法。6.2.3了解DOM文檔對(duì)象模型（DocumentObjectModel，DOM）定義了訪(fǎng)問(wèn)HTML和XML文檔的標(biāo)準(zhǔn)，允許腳本更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。DOM是萬(wàn)維網(wǎng)聯(lián)盟（WorldWideWebConsortium，W3C）標(biāo)準(zhǔn)，包含HTMLDOM（用于HTML文檔）和XMLDOM（用于XML文檔）。本書(shū)主要介紹HTMLDOM，后續(xù)內(nèi)容中的DOM都指HTMLDOM。1．HTML文檔的DOM樹(shù)<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)類(lèi)型節(jié)點(diǎn)的nodeType屬性返回節(jié)點(diǎn)類(lèi)型。節(jié)點(diǎn)主要有下列幾種類(lèi)型。元素節(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樹(shù)的根（root）節(jié)點(diǎn)。3．節(jié)點(diǎn)關(guān)系DOM樹(shù)中節(jié)點(diǎn)之間的關(guān)系可用父（parent）、子（child）和兄弟（sibling）等術(shù)語(yǔ)來(lái)描述。節(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)稱(chēng)為兄弟，兄弟節(jié)點(diǎn)擁有相同父節(jié)點(diǎn)。在DOM樹(shù)中，頂端節(jié)點(diǎn)被稱(chēng)為根（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)對(duì)象都是HTML標(biāo)記，使用Document對(duì)象的各種getElementX()方法可獲得HTML標(biāo)記的引用1．通過(guò)ID獲得HTML標(biāo)記引用所有HTML標(biāo)記都具有id屬性，其值在文檔中唯一。使用Document對(duì)象的getElementById()方法可獲得指定ID的標(biāo)記的引用。var

msg

=

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

msg

=

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

div1=

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

title1

=

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

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

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

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

//選擇name屬性為type的標(biāo)記Document對(duì)象的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樹(shù)中的節(jié)點(diǎn)是Node對(duì)象。Node對(duì)象具有下列常用屬性。parentNode：當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。Document節(jié)點(diǎn)作為根節(jié)點(diǎn)，沒(méi)有父節(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)類(lèi)型。nodeName：節(jié)點(diǎn)名稱(chēng)。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訪(fǎng)問(wèn)HTML標(biāo)記屬性HTML不區(qū)分大小寫(xiě)，JavaScript區(qū)分大小寫(xiě)。在腳本中，單個(gè)單詞的屬性都使用小寫(xiě)；多個(gè)單詞的屬性，第一個(gè)單詞全部小寫(xiě)，后續(xù)單詞的首字母大寫(xiě)，其他小寫(xiě)。對(duì)于style屬性中的樣式名稱(chēng)，如果規(guī)則一致，樣式名稱(chēng)中的連字符“-”被忽略。在HTML代碼中使用JavaScript中的標(biāo)識(shí)符時(shí)，大小寫(xiě)必須和腳本保持一致。6.2.7訪(fǎng)問(wèn)HTML標(biāo)記內(nèi)容可通過(guò)下列方法讀寫(xiě)HTML標(biāo)記內(nèi)容。標(biāo)記的innerHTML屬性：讀寫(xiě)標(biāo)記的HTML內(nèi)容。標(biāo)記的innerText屬性：讀innerText屬性時(shí)，返回標(biāo)記內(nèi)的所有文本，包括內(nèi)部標(biāo)記包含的內(nèi)容，內(nèi)部標(biāo)記被忽略；寫(xiě)innerText屬性時(shí)，HTML標(biāo)記作為文本顯示。標(biāo)記的textContent屬性：與innerText屬性相同。文本節(jié)點(diǎn)的nodeValue：與innerText屬性相同。6.2.8創(chuàng)建、添加和刪除節(jié)點(diǎn)1．創(chuàng)建、添加節(jié)點(diǎn)Document對(duì)象的createElement()方法可創(chuàng)建指定標(biāo)記名的節(jié)點(diǎn)，createTextNode()方法可創(chuàng)建文本節(jié)點(diǎn)。Node對(duì)象的appendChild()方法可將指定節(jié)點(diǎn)作為子節(jié)點(diǎn)添加到它的最后一個(gè)子節(jié)點(diǎn)之后，成為新的lastChild。2．插入節(jié)點(diǎn)Node對(duì)象的insertBefore(new,old)方法可將新的子節(jié)點(diǎn)new添加到原來(lái)的子節(jié)點(diǎn)old之前，old為null時(shí)，new添加到最后一個(gè)子節(jié)點(diǎn)之后（與appendChild()方法相同）。3．復(fù)制節(jié)點(diǎn)Node對(duì)象的cloneNode(true|false)方法可復(fù)制當(dāng)前節(jié)點(diǎn)。參數(shù)為true表示復(fù)制所有子節(jié)點(diǎn)（深度復(fù)制），參數(shù)為false表示不復(fù)制子節(jié)點(diǎn)4．替換節(jié)點(diǎn)Node對(duì)象的replaceChild(new,old)方法用于將old子節(jié)點(diǎn)替換為新的（new）子節(jié)點(diǎn)。5．刪除節(jié)點(diǎn)Node對(duì)象的removeChild(old)方法用于刪除old子節(jié)點(diǎn)。6.3表單對(duì)象表單用于在網(wǎng)頁(yè)中收集用戶(hù)數(shù)據(jù)。Document對(duì)象的forms屬性返回一個(gè)數(shù)組，數(shù)組元素為文檔中的表單，每個(gè)表單都是一個(gè)Form對(duì)象（表單對(duì)象