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

JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第6章瀏覽器對象本章主要內(nèi)容：Window對象Document對象Form對象6.1Window對象Window（窗口）對象是客戶端JavaScript程序的頂級全局對象，它代表當(dāng)前瀏覽器窗口，所有的其他全局對象、函數(shù)、變量自動成為Window對象的成員。6.1.1Window對象層次結(jié)構(gòu)window（小寫）關(guān)鍵字用于引用當(dāng)前窗口的Window對象。每個Window對象均有一個document屬性，用于引用窗口中代表Web文檔的Document對象。Document對象的forms數(shù)組包含了文檔中的所有Form（表單）對象?？捎孟旅娴谋磉_(dá)式引用第1個表單。window.document.forms[0]每個瀏覽器窗口中的所有對象構(gòu)成了以Window對象為根節(jié)點的層次結(jié)構(gòu)，通過Window對象可引用當(dāng)前窗口和文檔中的所有對象。6.1.2Window對象的常用屬性和方法1．Window對象常用屬性defaultStatus：設(shè)置或返回瀏覽器狀態(tài)欄顯示的默認(rèn)信息。status：設(shè)置或返回瀏覽器狀態(tài)欄顯示的即時信息。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()：使窗口失去焦點，即成為非活動窗口。focus()：使窗口成為活動窗口。close()：關(guān)閉窗口。createPopup()：創(chuàng)建一個彈出式窗口。setInterval()：設(shè)置經(jīng)過指定時間間隔執(zhí)行的函數(shù)或計算表達(dá)式。clearInterval()：取消由setInterval()方法設(shè)置的定時時間。setTimeout()：設(shè)置在指定的毫秒數(shù)后執(zhí)行的函數(shù)或計算表達(dá)式。clearTimeout()：取消由setTimeout()方法設(shè)置的指定時間。moveBy()：相對于窗口當(dāng)前坐標(biāo)移動指定的像素。moveTo()：將窗口左上角移動到指定的坐標(biāo)。open()：在一個新的瀏覽器窗口或已打開的命名窗口中打開URL。print()：輸出當(dāng)前窗口內(nèi)容。resizeBy()：按照指定的像素調(diào)整窗口的大小。resizeTo()：把窗口的大小調(diào)整到指定的寬度和高度。scrollBy()：按照指定的像素來滾動內(nèi)容。scrollTo()：把內(nèi)容滾動到指定的坐標(biāo)。6.1.3定時操作Window對象的setInterval()和setTimeout()方法用于執(zhí)行定時操作，其基本語法格式如下。setInterval(函數(shù)名稱,n)setTimeout(函數(shù)名稱,n)參數(shù)n為整數(shù)，單位為毫秒。setInterval()方法以指定時間為間隔，重復(fù)執(zhí)行函數(shù)。setTimeout()方法在指定時間結(jié)束時執(zhí)行函數(shù)。6.1.4錯誤處理Window對象的onerror屬性可設(shè)置為用于處理腳本錯誤的函數(shù)。腳本發(fā)生錯誤時，JavaScript會執(zhí)行該函數(shù)，并向函數(shù)傳遞3個參數(shù)：第1個參數(shù)為錯誤描述信息，第2個參數(shù)為文檔的URL，第3個參數(shù)為錯誤所在行的行號。錯誤處理函數(shù)的返回值具有特殊意義。通常，發(fā)生錯誤時，瀏覽器會用對話框或在狀態(tài)欄中顯示錯誤信息。如果錯誤處理函數(shù)返回值為true，則瀏覽器不再向用戶顯示錯誤信息。MicrosoftEdge、MozillaFirefox、GoogleChrome等瀏覽器在腳本出錯時不向用戶顯示錯誤信息。6.1.5Navigator對象Window對象的navigator屬性可引用包含客戶端瀏覽器信息的Navigator對象。Navigator對象的常用屬性如下。appCodeName：返回瀏覽器的代碼名稱。appMinorVersion：返回瀏覽器的次級版本。appName：返回瀏覽器的名稱。appVersion：返回瀏覽器的平臺和版本信息。browserLanguage：返回當(dāng)前瀏覽器的語言。cookieEnabled：返回瀏覽器中是否啟用cookie。cpuClass：返回瀏覽器系統(tǒng)的CPU等級。onLine：返回瀏覽器是否聯(lián)網(wǎng)。platform：返回運行瀏覽器的操作系統(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)打開的窗口的名稱，則不會打開新窗口，而在該窗口中打開URL。feature：指定窗口特征。省略該參數(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．移動窗口moveTo()方法用于移動窗口。6.1.8用ID引用HTML標(biāo)記Window對象的屬性在腳本中可作為全局變量使用。在Window對象沒有同名的屬性時，HTML標(biāo)記的ID（id屬性值）成為Window對象的屬性，所以可直接使用ID引用HTML標(biāo)記，而不必使用document.getElementById()方法查找標(biāo)記。若Window對象已經(jīng)有了與標(biāo)記ID同名的屬性，此時就不能直接使用ID引用HTML標(biāo)記。而且，不能保證瀏覽器版本升級不會為Window對象增加這個屬性，所以必須謹(jǐn)慎使用ID引用HTML標(biāo)記。<a>、<applet>、<area>、<embed>、<form>、<frameset>、<iframe>、<img>和<object>等HTML標(biāo)記的name屬性也有同樣的特點——IE瀏覽器支持，其他大多數(shù)瀏覽器不支持。6.2Document對象Document對象表示瀏覽器中的HTML文檔，并可訪問文檔中的所有標(biāo)記，從而為HTML文檔提供交互功能。6.2.1常用屬性和方法activeElement：返回獲得焦點的對象。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é)點的引用。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[]：返回文檔中所有錨點<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()：向文檔寫入一個字符串，字符串中可包含HTML代碼和JavaScript腳本。writeln()：與write()方法類似，只是在每個輸出末尾添加一個換行符。注意在瀏覽器中，換行符顯示為空格，不能起到換行作用。在瀏覽器中換行應(yīng)使用<br>標(biāo)記。6.2.2動態(tài)輸出文檔Document對象的write()和writeln()方法用于向文檔寫入內(nèi)容。若在瀏覽器加載文檔過程中執(zhí)行write()或writeln()方法，輸出內(nèi)容顯示在腳本對應(yīng)位置。若在文檔打開后執(zhí)行write()或writeln()方法，會隱式地打開一個空白HTML文檔，瀏覽器原來顯示的文檔被覆蓋。1．輸出HTML內(nèi)容write()和writeln()方法輸出的內(nèi)容被瀏覽器視為HTML內(nèi)容，即會對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é)點類型節(jié)點的nodeType屬性返回節(jié)點類型。節(jié)點主要有下列幾種類型。元素節(jié)點：nodeType值為1，HTML標(biāo)記為元素節(jié)點。屬性節(jié)點：nodeType值為2，HTML標(biāo)記的屬性為屬性節(jié)點。文本節(jié)點：nodeType值為3，HTML標(biāo)記內(nèi)的文本為文本節(jié)點。注釋節(jié)點：nodeType值為8，注釋內(nèi)容為注釋節(jié)點。文檔節(jié)點：nodeType值為9，整個文檔是一個文檔節(jié)點，是DOM樹的根（root）節(jié)點。3．節(jié)點關(guān)系DOM樹中節(jié)點之間的關(guān)系可用父（parent）、子（child）和兄弟（sibling）等術(shù)語來描述。節(jié)點關(guān)系具有下列特點。父節(jié)點擁有一個或多個子節(jié)點。子節(jié)點只有一個父節(jié)點。同級的子節(jié)點稱為兄弟，兄弟節(jié)點擁有相同父節(jié)點。在DOM樹中，頂端節(jié)點被稱為根（root）。除了根節(jié)點外，每個節(jié)點都有父節(jié)點。一個節(jié)點可擁有任意數(shù)量的子節(jié)點。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)記的引用。因為HTML允許標(biāo)記的name屬性值重復(fù)，所以getElementsByName()方法返回的是一個對象數(shù)組。例如，下面的語句獲得第1個name屬性為news的標(biāo)記的引用。var

msg

=

document.getElementsByName("news")[0]3．通過標(biāo)記名稱獲得HTML標(biāo)記引用Document對象的getElementsByTagName()方法返回指定標(biāo)記名稱的所有標(biāo)記的引用。例如，下面的語句獲得第1個<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個類名屬性為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選擇器匹配的多個標(biāo)記的引用。var

msg=

document.querySelector("#showmsg")var

divs

=

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