瀏覽器對象和DOM課件

1、瀏覽器對象 和 DOM1目標(biāo) 掌握常用的瀏覽器對象：Window, document, Historysreen, event掌握DOM的通用節(jié)點(diǎn)掌握DOM的元素節(jié)點(diǎn)熟悉DOM的文本節(jié)點(diǎn)2瀏覽器對象簡介 2-1 http:/Window 窗口對象location地址對象document文檔對象FORM表單對象瀏覽器對象的分層結(jié)構(gòu)window.document.myform.text1 3瀏覽器對象簡介 2-2瀏覽器對象的分層結(jié)構(gòu)4Window 對象 7-1 屬性 名稱 說明 document表示給定瀏覽器窗口中的 HTML 文檔。 history 包含有關(guān)客戶訪問過的URL的信息。locati

2、on包含有關(guān)當(dāng)前 URL 的信息。 name設(shè)置或檢索窗口或框架的名稱。 status 設(shè)置或檢索窗口底部的狀態(tài)欄中的消息。 screen包含有關(guān)客戶端的屏幕和顯示性能的信息。 5Window 對象 7-2 名稱 說明 alert (“m提示信息)顯示包含消息的對話框。 confirm（“提示信息”）顯示一個確認(rèn)對話框，包含一個確定取消按鈕Prompt（”提示信息“）彈出提示信息框open (url,name)打開新窗口并裝入給定 URL 的文檔。showModalDialog(“URL”,null,”)創(chuàng)建一個顯示指定 HTML 文檔的模式對話框。close ( )關(guān)閉當(dāng)前窗口setTime

3、out（”函數(shù)”,毫秒數(shù)） 設(shè)置定時器：經(jīng)過指定毫秒值后執(zhí)行某個函數(shù) setInterval(”函數(shù)”,毫秒數(shù)） 每經(jīng)過指定毫秒值后計算一個表達(dá)式。clearTimeout(定時器對象) 取消先前用 setTimeout 方法設(shè)置的超時事件。resizeTo(iWidth, iHeight)將窗口左上角的屏幕位置移動到指定的 x 和 y 位置。moveTo(iX, iY)將窗口的大小更改為指定的寬度和高度值。常用方法 6Window 對象 7-3 function openwindow( ) window.open(google.htm);function closewindow( ) win

4、dow.close ( );使用 Open 方法打開新窗口 使用 Close 方法關(guān)閉窗口添加單擊事件7open（”打開窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意組合：height： 窗口高度； width： 窗口寬度； top： 窗口距離屏幕上方的象素值； left：窗口距離屏幕左側(cè)的象素值； toolbar： 是否顯示工具欄，yes為顯示； menubar，scrollbars 表示菜單欄和滾動欄。 resizable： 是否允許改變窗口大小，yes或1為允許 location： 是否顯示地址欄，yes或1為允許 status：是否顯示狀態(tài)欄內(nèi)的信息，yes或1為允

5、許；Window 對象 7-4 8function openwindow( ) window.open(adv.htm, , toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=650, height=150); 看看和我一起打開的廣告窗口 Window 對象 7-5 使用 Open 方法打開廣告新窗口 添加頁面加載事件9showModalDialog （”打開窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意組合：dialogHeight:對話框高度dialogW

6、idth:對話框?qū)挾萪ialogLeft:離屏幕左的距離dialogTop:離屏幕上的距離center:窗口是否居中，默認(rèn)yeshelp:是否顯示幫助按鈕，默認(rèn)yesresizable:是否可被改變大小，默認(rèn)nostatus:是否顯示狀態(tài)欄，默認(rèn)為yesscroll指明對話框是否顯示滾動條。默認(rèn)為yes下面幾個屬性是用在HTA中的，在一般的網(wǎng)頁中一般不使用dialogHide:在打印或者打印預(yù)覽時對話框是否隱藏，默認(rèn)為noedge:指明對話框的邊框樣式，默認(rèn)為raisedunadorned:默認(rèn)為noWindow 對象 7-6 10function openwindow( ) window.

7、showModalDialog(adv.htm, , “scroll :0;status:0; resizable:0;dialogWidth:650px;dialogHeight :150px); 看看和我一起打開的廣告窗口 Window 對象 7-7 使用 showModalDialog方法打開廣告新窗口 添加頁面加載事件111.插入一個層Layer1，z-index=1；2.層中插入一幅圖片。3.定時器函數(shù)setTimeout （）的用法：setTimeout（“調(diào)用的函數(shù)名”，間隔的毫秒數(shù)）表示每隔多少毫秒，就循環(huán)調(diào)用某個函數(shù)來執(zhí)行清除某個定時器：clearTimeout（）方法。例如

8、：var myclocksetTimeout（”move( )”,500）;if ()clearTimeout（myclock）;Window 對象 7-8 12 function move( ) document.getElementById(Layer1).style.left= Math.random()*500; document.getElementById(Layer1).style.top= Math.random()*500; setTimeout(move(),1000); 隨機(jī)漂浮的廣告Window 對象 7-9 定義層圖片移動的函數(shù)move( ) 每隔1秒調(diào)用move(

9、)函數(shù)隨機(jī)改變層的位置，從而實(shí)現(xiàn)隨機(jī)漂浮的效果13Document 對象 3-1 屬性名稱 說明alinkColor設(shè)置或檢索文檔中所有活動鏈接的顏色 bgColor設(shè)置或檢索 Document 對象的背景色 body指定文檔正文的開始和結(jié)束linkColor設(shè)置或檢索文檔鏈接的顏色location包含關(guān)于當(dāng)前 URL 的信息 title包含文檔的標(biāo)題url設(shè)置或檢索當(dāng)前文檔的 URLvlinkColor設(shè)置或檢索用戶訪問過的鏈接的顏色 14Document 對象 3-2 方法 名稱 說明 clear ( )清除當(dāng)前文檔 close ( )關(guān)閉輸出流并強(qiáng)制顯示發(fā)送的數(shù)據(jù)write (text)

10、將文本寫入文檔15Document 對象 3-3 無標(biāo)題文檔function change(color) document.bgColor=color ; 移過來我變色給你看看！ 變紅色| 變藍(lán)色| 變黃色利用document對象的bgColor屬性改變背景色添加鼠標(biāo)懸停事件16History對象 4-1 history 對象 方法 名稱 說明 back()加載 History 列表中的上一個 URL。 forward()加載 History 列表中的下一個 URL。 go(url or number)加載 History 列表中的一個 URL，或要求瀏覽器移動指定的頁面數(shù)。 17 Locat

11、ion對象 4-2 Location 對象 屬性 名稱 說明 host設(shè)置或檢索位置或 URL 的主機(jī)名和端口號hostname設(shè)置或檢索位置或 URL 的主機(jī)名部分href設(shè)置或檢索完整的 URL 字符串名稱說明assign(url)加載 URL 指定的新的 HTML 文檔。 reload()重新加載當(dāng)前頁replace(url) 通過加載 URL 指定的文檔來替換當(dāng)前文檔方法 18History 和 Location 對象 4-4 function jump ( ) location.href=document.myform.menu1.value; . 請選擇季節(jié)景色- 春天美景 夏天一

12、色根據(jù)用戶的選擇，修改跳轉(zhuǎn)的網(wǎng)址添加選項改變事件19screen對象Screen的常用屬性：height獲取屏幕的垂直分辨率width獲取屏幕的垂直分辨率availheight獲取系統(tǒng)屏幕的工作區(qū)域高度，排除 Microsoft Windows 任務(wù)欄availwidth 獲取系統(tǒng)屏幕的工作區(qū)域?qū)挾?，排?Windows 任務(wù)欄當(dāng)我們使用window的open方法打開新的窗口時，為了使窗口在屏幕的最中間位置，必須使用screen對象計算屏幕中間位置.20screen示例 示例function login()var winwidth = 300;/需要彈出的窗口的寬度var winheight

13、= 200;/需要彈出的窗口的高度/需要彈出的窗口的左頂點(diǎn)坐標(biāo)var winleft = (window.screen.width - winwidth)/2;/需要彈出的窗口的上頂點(diǎn)坐標(biāo)var wintop = (window.screen.height - winheight)/2;var str =width=+winwidth+,height=+winheight+, left=+winleft+,wintop=+wintop;window.open(login.html,str); 登錄 計算出彈出窗口的位置單擊登錄時彈出21event對象event代表事件狀態(tài)，如事件發(fā)生的元素，鍵

14、盤狀態(tài)，鼠標(biāo)位置和鼠標(biāo)按鈕狀態(tài)常用屬性:srcElement事件源,發(fā)生事件的元素clientX/clientY鼠標(biāo)指針位置相對于窗口的坐標(biāo)offsetX,offsetY鼠標(biāo)指針位置相對于觸發(fā)事件的坐標(biāo)keyCode與導(dǎo)致事件的按鍵關(guān)聯(lián)的 Unicode 按鍵代碼screenX、screenY鼠標(biāo)指針位置相對于觸發(fā)事件的對象的坐標(biāo)returnValue事件的返回值盡管所有事件屬性都可通過所有的 event 對象訪問，但是在某些事件中某些屬性可能無意義。例如，fromElement和 toElement屬性僅當(dāng)處理 onmouseover和 onmouseout 事件時有意義22event示例

15、在新窗口中打開 首頁 后退 前進(jìn) 關(guān)于網(wǎng)站 屏蔽瀏覽器右鍵菜單處理鼠標(biāo)事件Html部分23event示例 function cmenu() var menu = document.getElementById(Menu1); if(event.button=2) menu.style.top = window.event.offsetY; menu.style.left = window.event.offsetX; menu.style.display=inline; function cmunu2() var menu = document.getElementById(Menu1); m

16、enu.style.display=none; 鼠標(biāo)單擊的位置處理鼠標(biāo)事件JS部分24Dom基礎(chǔ) Trees,trees,everywhere Trees,trees,everywhere Welcometoareallyboringpage. Comeagainsoon. 通常的html文檔Html是一個樹形結(jié)構(gòu)25Dom節(jié)點(diǎn) 節(jié)點(diǎn)是 DOM 中最基本的對象類型，節(jié)點(diǎn)就是 DMO 樹中的任何事物節(jié)點(diǎn)的主要屬性： nodeName 節(jié)點(diǎn)的名稱。 nodeValue 節(jié)點(diǎn)的 “值”。 parentNode 節(jié)點(diǎn)的父節(jié)點(diǎn)。 childNodes 節(jié)點(diǎn)的孩子節(jié)點(diǎn)列表。 firstChild chil

17、dNodes 列表中第一個節(jié)點(diǎn)。 lastChild childNodes 列表中的最后一個節(jié)點(diǎn)。 previousSibling 返回當(dāng)前節(jié)點(diǎn)之前 的節(jié)點(diǎn)。 nextSibling 列表中的下一個節(jié)點(diǎn)。 attributes僅用于元素節(jié)點(diǎn)，返回元素的屬性列表。26Dom基礎(chǔ) var myDocument = document; var htmlElement = myDocument.documentElement;var headElement = htmlElement.getElementsByTagName(head)0;if (headElement != null) var ti

18、tleElement = headElement.getElementsByTagName(title)0; if (titleElement != null) var titleText = titleElement.firstChild; alert(The page title is + titleText.nodeValue + ); var bodyElement = headElement.nextSibling; while (bodyElement.nodeName.toLowerCase() != body) bodyElement = bodyElement.nextSib

19、ling; 屬性示例：得到head對象得到head下一個節(jié)點(diǎn)循環(huán)直到得到body節(jié)點(diǎn)27Dom節(jié)點(diǎn) 節(jié)點(diǎn)是 DOM 中最基本的對象類型節(jié)點(diǎn)就是 DMO 樹中的任何事物節(jié)點(diǎn)的主要方法：insertBefore(newChild, referenceNode) 將 newChild 節(jié)點(diǎn)插入到 referenceNode 之前。replaceChild(newChild, oldChild) 用 newChild 節(jié)點(diǎn)替換 oldChild 節(jié)點(diǎn)。removeChild(oldChild) 從運(yùn)行該方法的節(jié)點(diǎn)中刪除 oldChild 節(jié)點(diǎn)。appendChild(newChild) 將 newCh

20、ild 添加到運(yùn)行該函數(shù)的節(jié)點(diǎn)之中。newChild 被添加到目標(biāo)節(jié)點(diǎn)孩子列表中的末端。hasChildNodes() 在調(diào)用該方法的節(jié)點(diǎn)有孩子時則返回 true，否則返回 false。hasAttributes() 在調(diào)用該方法的節(jié)點(diǎn)有屬性時則返回 true，否則返回 false。28Dom方法 function test() var myDocument = document; var htmlElement = myDocument.documentElement; var headElement = htmlElement.getElementsByTagName(head)0; if

21、 (headElement != null) var titleElement = headElement.getElementsByTagName(title)0; if (titleElement != null) var titleText = titleElement.firstChild; var bodyElement = headElement.nextSibling; while (bodyElement.nodeName.toLowerCase() != “body”) /尋找body標(biāo)簽 bodyElement = bodyElement.nextSibling; if (

22、bodyElement.hasChildNodes() for (i=0; ibodyElement.childNodes.length; i+) /循環(huán)所有標(biāo)簽 var currentNode = bodyElement.childNodesi; if (currentNode.nodeName.toLowerCase() = “img”) bodyElement.removeChild(currentNode);/去除img標(biāo)簽 Javascipt部分29Dom方法 JavaScript and DOM are a perfect match. You can read more in H

23、ead Rush Ajax. html部分單擊按鈕圖片消失30文檔節(jié)點(diǎn) 文檔節(jié)點(diǎn)document 對象創(chuàng)建新節(jié)點(diǎn)：createElement(elementName) 使用給定的名稱創(chuàng)建一個元素createTextNode(text)使用提供的文本創(chuàng)建一個新的文本節(jié)點(diǎn)createAttribute(attributeName) 用提供的名稱創(chuàng)建一個新屬性var pElement = myDocument.createElement(p); var text = myDocument.createTextNode(“hello); pElement.appendChild(text); body

24、Element.appendChild(pElement);31元素節(jié)點(diǎn) 元素節(jié)點(diǎn)屬性處理有關(guān)的方法：getAttribute(name) 返回名為 name 的屬性值removeAttribute(name) 刪除名為 name 的屬性setAttribute(name, value) 創(chuàng)建一個名為 name 的屬性并將其值設(shè)為 valuegetAttributeNode(name) 返回名為 name 的屬性節(jié)點(diǎn)removeAttributeNode(node) 刪除與指定節(jié)點(diǎn)匹配的屬性節(jié)點(diǎn)查找嵌套元素有關(guān)的方法：getElementsByTagName(elementName) 返回具有

25、指定名稱的元素節(jié)點(diǎn)列表32元素節(jié)點(diǎn)/創(chuàng)建img元素var imgElement = document.createElement(img); /設(shè)置src屬性imgElement.setAttribute(src, “dog.jpg); /設(shè)置width屬性imgElement.setAttribute(width, 130); /設(shè)置height屬性imgElement.setAttribute(height, 150); /將元素添加到body中bodyElement.appendChild(imgElement); 方法示例：33文本節(jié)點(diǎn) 文本節(jié)點(diǎn)用于增加或分解節(jié)點(diǎn)中的數(shù)據(jù)的方法：app

26、endData(text) 將提供的文本追加到文本節(jié)點(diǎn)的已有內(nèi)容之后。insertData(position, text) 允許在文本節(jié)點(diǎn)的中間插入數(shù)據(jù)。在指定的位置插入 提供的文本replaceData(position, length, text) 從指定位置開始刪除指定長度的字符，用提供的文本 代替刪除的文本var pElements = bodyElement.getElementsByTagName(p); for (i=0; ipElements.length; i+) var pElement = pElements.item(i); var text = pElement.firstChild.nodeValue; alert(text); 一般使用 nodeValue 屬性來訪問文本節(jié)點(diǎn)的文本34節(jié)點(diǎn)類型常量值ELEMENT_NODE1ATTRIBUTE