Web前端技術(shù)

文檔對象模型與瀏覽器對象模型目錄3.1DOM文檔對象模型?點擊查看本小節(jié)知識架構(gòu)Window對象3.2?點擊查看本小節(jié)知識架構(gòu)

3.1DOM文檔對象模型3.1.1什么是DOM？DOM全稱DocumentObjectModel文檔對象模型JavaScript中通過DOM來對HTML文檔進(jìn)行操作，只要理解了DOM就可以操作WEB頁面。文檔：文檔表示整個的HTML網(wǎng)頁文檔 對象：對象表示將網(wǎng)頁中的每一個部分都轉(zhuǎn)換為了一個對象模型：使用模型來表示對象之間的關(guān)系，這樣方便我們獲取對象3.1.2什么是DOMHTMLDOMHTML指的是DOM中為操作HTML文檔提供的屬性和方法。3.1.3HTML元素操作元素的獲取方法說明document.getElementById()返回對擁有指定id的第一個對象的引用document.getElementByName()返回帶有指定名稱的對象集合document.getElementByTagName()返回帶有指定標(biāo)簽名的對象集合document.getElementByClassName()返回帶有指定類名的對象集合document對象提供了一些用于查找元素的方法，利用這些方法可以根據(jù)元素的id、name、和class屬性以及標(biāo)簽名稱的方式獲取操作的元素。3.1.3HTML元素操作2.元素的內(nèi)容JavaScript中，若要對獲取的元素內(nèi)容進(jìn)行操作，則可以利用DOM提供的屬性和方法實現(xiàn)。分類名稱說明屬性innerHTML設(shè)置或返回元素開始和結(jié)束標(biāo)簽之間的HTMLinnerText設(shè)置或返回元素中去除文本內(nèi)容textContent設(shè)置或返回指定節(jié)點的文本內(nèi)容方法document.write()向文檔寫入指定的內(nèi)容document.writeIn()向文檔寫入指定的內(nèi)容后并換行3.1.3HTML元素操作3.元素屬性在DOM中，為了方便JavaScript獲取、修改和遍歷指定的HTML元素的相關(guān)屬性，提供了操作的屬性和方法。分類名稱描述屬性attribute返回一個元素的屬性集合方法setAttribute(name,value)設(shè)置或者改變指定屬性的值getAttribute(name)返回指定元素的屬性值removeAttribute(name)從元素中刪除指定的屬性3.1.4DOM節(jié)點操作文檔對象模型（DOM）通過引入nodeType來表示HTML文檔中不同節(jié)點的類型。由于HTML文檔的復(fù)雜性，每個節(jié)點都被賦予一個特定的nodeType。appendChild()把新的子節(jié)點添加到指定節(jié)點removeChild()刪除子節(jié)點replaceChild()替換子節(jié)點insertBefore()在指定的直接點前面插入新的子節(jié)點createAttribute()創(chuàng)建屬性節(jié)點createElemnet()創(chuàng)建元素節(jié)點createTextNode()創(chuàng)建文本節(jié)點getAttribute()返回指定的屬性值setAttribute()把指定屬性設(shè)置或修改為指定的值3.1.5事件處理事件處理指的就是與事件關(guān)聯(lián)的JavaScript對象，當(dāng)與頁面特定部分關(guān)聯(lián)的事件發(fā)生時，事件處理器就會被調(diào)用。具體步驟：發(fā)生事件啟動事件處理程序事件處理程序作出反應(yīng)3.1.5事件處理鼠標(biāo)事件通過鼠標(biāo)動作觸發(fā)的事件。1.鼠標(biāo)事件類別事件說明鼠標(biāo)事件onclick鼠標(biāo)單擊時觸發(fā)的事件ondbclick鼠標(biāo)雙擊時觸發(fā)的事件onmousedown鼠標(biāo)按下時觸發(fā)的事件onmouseup鼠標(biāo)彈起時觸發(fā)的事件onmouseover鼠標(biāo)移動到某個設(shè)置了此事件的元素上時觸發(fā)的事件onmousemove鼠標(biāo)移動時觸發(fā)的事件onmouseout鼠標(biāo)從某個設(shè)置了此事件的元素上離開時觸發(fā)的事件3.1.5事件處理鍵盤事件是指通過鍵盤動作觸發(fā)的事件。2.鍵盤事件類別事件說明鍵盤事件onkeydown鍵盤上的某個按鍵被按下時觸發(fā)的事件onkeyup鍵盤上的某個按鍵被按下后彈起時觸發(fā)的事件onketpress當(dāng)輸入有效的字符按鍵時觸發(fā)的事件3.1.5事件處理鼠標(biāo)事件通過鼠標(biāo)動作觸發(fā)的事件。3.表單事件類別事件說明表單事件onfocus當(dāng)某個元素獲得焦點時觸發(fā)的事件onblur當(dāng)前元素失去焦點時觸發(fā)的事件onchange當(dāng)前元素失去焦點并且元素內(nèi)容發(fā)生改變時觸發(fā)的事件onreset當(dāng)表單被重置時觸發(fā)的事件onsubmit當(dāng)表單被提交時觸發(fā)的事件動手實踐：動態(tài)添加課程實現(xiàn)步驟：創(chuàng)建響應(yīng)click事件的按鈕；將onClick設(shè)置為"addCourseName()"；書寫響應(yīng)onclick的addCourseName()函數(shù)。

3.2Window對象window對象在客戶端JavaScript中扮演著重要的角色，它是客戶端程序的全局（默認(rèn)）對象，它還是客戶端對象層次的根節(jié)點，也是JS中最大的對象，它描述的是一個瀏覽器窗口，window對象表示瀏覽器中打開的窗口。1.基本概念3.2.1Window對象2.常用屬性和方法3.2.1Window對象分類名稱說明屬性closed返回一個布爾值，該值聲明了窗口是否已經(jīng)關(guān)閉name設(shè)置或返回存放窗口名稱的一個字符串opener返回對創(chuàng)建該窗口的window對象的引用parent返回當(dāng)前窗口的父窗口self對當(dāng)前窗口的引用，等價于window屬性top返回最頂層的父窗口2.常用屬性和方法3.2.1Window對象分類名稱說明方法alert()顯示帶有一段消息和一個確認(rèn)按鈕的警告框confirm()顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框prompt()顯示可以提示用戶輸入的對話框open()打開一個新的瀏覽器窗口或查找一個已命名的窗口close()關(guān)閉瀏覽器窗口focus()把鍵盤焦點給予一個窗口print()打印當(dāng)前窗口的內(nèi)容scrollBy()按照指定的像素值來滾動內(nèi)容scrollTo()把內(nèi)容滾動到指定的坐標(biāo)3.窗口的操作3.2.1Window對象實現(xiàn)彈出窗口就需要使用window對象的open方法。open()方法用于打開一個新的瀏覽器窗口，或者查找一個已命名的窗口。3.窗口的操作3.2.1Window對象open（URL,name,space,replace）URL：指定新窗口要打開網(wǎng)頁的URL地址；name：指定被打開新窗口的名稱；space：用于設(shè)置瀏覽器窗口的特征（如大小、位置、滾動條等；replace：true表示替換瀏覽器歷史中的當(dāng)前條目，false（默認(rèn)值）表示在瀏覽器歷史中創(chuàng)建新的條目。4.定時器3.2.1Window對象JavaScript中可通過window對象提供的方法實現(xiàn)在指定時間后執(zhí)行特定的操作，也可以讓程序代碼每隔一段時間執(zhí)行一次，實現(xiàn)間歇操作。方法說明setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或執(zhí)行一段代碼clearTimeout()清除或取消由setTimeout()方法設(shè)置的定時器setInterval()按照指定的周期（以毫秒計）來調(diào)用函數(shù)或執(zhí)行一段代碼clearInterval()清除或取消由setInterval()方法設(shè)置的定時器3.2.2location對象BOM中l(wèi)ocation對象提供的方法，可以更改當(dāng)前用戶在瀏覽器中訪問的URL，實現(xiàn)新文檔的載入、重載以及替換功能。方法與屬性說明href返回當(dāng)前頁面的URLpathname()返回當(dāng)前頁面的路徑和文件名port()返回web主機(jī)的端口（80或443）protocol()返回所使用的web協(xié)議（http:或https:）assign()載入一個新的文檔reload()重新載入當(dāng)前文檔replace用新的文檔替換當(dāng)前文檔3.2.3history對象BOM提供的history對象，保存著用戶上網(wǎng)的歷史記錄，從窗口被打開的那一刻算起。分類名稱說明屬性length返回歷史列表中的網(wǎng)址數(shù)方法back加載history列表中的前一個URLforward加載history列表中的下一個URLgo加載history列表中的某個具體頁面3.2.4navigator對象Navigator提供了有關(guān)瀏覽器的信息，但每個瀏覽器中的navigator對象中都有一套自己的屬性。下面列舉了主流瀏覽器中的一些方法和屬性。

名稱說明屬性AppCodeName返回瀏覽器的代碼名AppName返回瀏覽器的名稱AppVersion返回瀏覽器的平臺和版本信息cookieEnabled返回指明瀏覽器中是否啟用cookie的布爾值platform返回返回用戶操作系統(tǒng)的信息userAgent返回由客戶機(jī)發(fā)送服務(wù)器的user-agent頭部的值方法javaEnabled()指定是否在瀏覽器中啟用JavataintEnabled()規(guī)定瀏覽器是否啟用數(shù)據(jù)污點(datatainting)3.2.5screen對象每個Window對象的screen屬性都引用一個Screen對象。Screen對象中存放著有關(guān)顯示瀏覽器屏幕的信息。屬性描述availHeight返回顯示器屏幕的高度(除Windows任務(wù)欄之外)。availWidth返回顯示器屏幕的寬度(除Windows任務(wù)欄之外)。bufferDepth設(shè)置或返回調(diào)色板的比特深度。colorDepth返回目標(biāo)設(shè)備或緩沖器上的調(diào)色板的比特深度。deviceXDPI返回顯示器屏幕的每英寸水平點數(shù)。deviceYDPI返回顯示器屏幕的每英寸垂直點數(shù)。fontSmoothingEnabled返回用戶是否在顯示控制面板中啟用了字體平滑。動手實踐：漂浮效果的實現(xiàn)實現(xiàn)步驟：使用document.getEleme