JavaScript Vue.js前端開發(fā)任務(wù)驅(qū)動(dòng)式教程-課件 模塊六 JavaScript對(duì)象模型及應(yīng)用_第1頁(yè)
JavaScript Vue.js前端開發(fā)任務(wù)驅(qū)動(dòng)式教程-課件 模塊六 JavaScript對(duì)象模型及應(yīng)用_第2頁(yè)
JavaScript Vue.js前端開發(fā)任務(wù)驅(qū)動(dòng)式教程-課件 模塊六 JavaScript對(duì)象模型及應(yīng)用_第3頁(yè)
JavaScript Vue.js前端開發(fā)任務(wù)驅(qū)動(dòng)式教程-課件 模塊六 JavaScript對(duì)象模型及應(yīng)用_第4頁(yè)
JavaScript Vue.js前端開發(fā)任務(wù)驅(qū)動(dòng)式教程-課件 模塊六 JavaScript對(duì)象模型及應(yīng)用_第5頁(yè)
已閱讀5頁(yè)，還剩38頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

JavaScript對(duì)象模型及應(yīng)用時(shí)間：匯報(bào)人：JavaScript+Vue.js前端開發(fā)任務(wù)驅(qū)動(dòng)式教程1.JavaScript的文檔對(duì)象及操作2.JavaScript的瀏覽器對(duì)象及操作3.位置與尺寸及JavaScript的設(shè)置方法目錄DOM是用以訪問HTML元素的標(biāo)準(zhǔn)編程接口，HTMLDOM定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法，通過HTMLDOM可以訪問HTML文檔的所有元素。HTMLDOM獨(dú)立于平臺(tái)和語言，可被任何編程語言使用，如Java、JavaScript和VBScript等。1．DOM節(jié)點(diǎn)當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的DOM。文檔對(duì)象中的每個(gè)元素都是一個(gè)節(jié)點(diǎn)，常見的節(jié)點(diǎn)類型如下。①整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)。②每一個(gè)HTML標(biāo)簽是一個(gè)元素節(jié)點(diǎn)。③包含在HTML元素中的文本是文本節(jié)點(diǎn)。④每一個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn)。⑤注釋屬于注釋節(jié)點(diǎn)。HTML文檔中的所有節(jié)點(diǎn)構(gòu)成了一棵“節(jié)點(diǎn)樹”，HTML文檔中的每個(gè)元素、屬性和文本都代表樹中的一個(gè)節(jié)點(diǎn)。該樹起始于文檔節(jié)點(diǎn)，并由此生出多個(gè)分支，到文本節(jié)點(diǎn)為止。JavaScript的文檔對(duì)象及操作例：<!doctypehtml><html><head><title>文檔標(biāo)題</title></head><body><h1>我的標(biāo)題</h1><ahref="#">我的鏈接</a></body></html>JavaScript的文檔對(duì)象及操作有了HTMLDOM，JavaScript程序能夠訪問節(jié)點(diǎn)樹中的所有節(jié)點(diǎn)，能夠創(chuàng)建新節(jié)點(diǎn)，還能夠修改和刪除所有節(jié)點(diǎn)。網(wǎng)頁(yè)的瀏覽效果上述HTML代碼可以表示成一棵倒立的節(jié)點(diǎn)樹2．節(jié)點(diǎn)關(guān)系HTML文檔的節(jié)點(diǎn)樹中的各個(gè)節(jié)點(diǎn)之間存在等級(jí)關(guān)系。①對(duì)于父節(jié)點(diǎn)、子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)，parent、child及sibling等術(shù)語用于描述它們的等級(jí)關(guān)系。②在節(jié)點(diǎn)樹中，頂端節(jié)點(diǎn)被稱為根（根節(jié)點(diǎn)）。③除了根節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)。④節(jié)點(diǎn)能夠擁有一定數(shù)量的子節(jié)點(diǎn)。⑤兄弟節(jié)點(diǎn)指的是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)。上圖的HTML代碼的節(jié)點(diǎn)樹中各個(gè)節(jié)點(diǎn)之間的關(guān)系分析如下。節(jié)點(diǎn)之間具有父子關(guān)系，如<head>和<body>的父節(jié)點(diǎn)是<html>，文本節(jié)點(diǎn)“我的標(biāo)題”的父節(jié)點(diǎn)是<h1>。<head>節(jié)點(diǎn)的子節(jié)點(diǎn)為<title>，<title>節(jié)點(diǎn)的子節(jié)點(diǎn)為文本節(jié)點(diǎn)“文檔標(biāo)題”。當(dāng)節(jié)點(diǎn)的父節(jié)點(diǎn)為同一個(gè)節(jié)點(diǎn)時(shí)，它們就是兄弟節(jié)點(diǎn)。例如，<a>和<h1>為兄弟節(jié)點(diǎn)，其父節(jié)點(diǎn)是<body>。節(jié)點(diǎn)可以擁有“后代”，后代是指某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)，或者這些子節(jié)點(diǎn)的子節(jié)點(diǎn)，以此類推。節(jié)點(diǎn)也可以擁有“先輩”，先輩是某個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)，或者父節(jié)點(diǎn)的父節(jié)點(diǎn)，以此類推。JavaScript的文檔對(duì)象及操作例如：<html><head><title>DOM教程</title></head><body><h1>DOM節(jié)點(diǎn)</h1><p>HTML文檔的節(jié)點(diǎn)樹中的各個(gè)節(jié)點(diǎn)之間存在等級(jí)關(guān)系</p></body></html>JavaScript的文檔對(duì)象及操作各節(jié)點(diǎn)之間的關(guān)系JavaScript的文檔對(duì)象及操作從圖6-3中可以得出以下信息。①<html>是根節(jié)點(diǎn)。②<html>沒有父節(jié)點(diǎn)。③<html>是<head>和<body>的父節(jié)點(diǎn)。④<head>是<html>的第一個(gè)子節(jié)點(diǎn)。⑤<body>是<html>的最后一個(gè)子節(jié)點(diǎn)。同時(shí)，通過代碼還可以得知以下特點(diǎn)。①<head>有一個(gè)子節(jié)點(diǎn)：<title>。②<title>有一個(gè)子節(jié)點(diǎn)（文本節(jié)點(diǎn)）：“DOM教程”。③<body>有兩個(gè)子節(jié)點(diǎn)：<h1>和<p>。④<h1>有一個(gè)子節(jié)點(diǎn)：“DOM節(jié)點(diǎn)”。⑤<p>有一個(gè)子節(jié)點(diǎn)：“HTML文檔的節(jié)點(diǎn)樹中的各個(gè)節(jié)點(diǎn)之間存在等級(jí)關(guān)系”。⑥<h1>和<p>是兄弟節(jié)點(diǎn)。通過JavaScript，可以使用以下節(jié)點(diǎn)屬性在節(jié)點(diǎn)之間導(dǎo)航。①parentNode。②childNodes[nodenumber]。③firstChild。④lastChild。⑤nextSibling。⑥previousSibling?？梢允褂胮arentNode屬性或者parentElement()方法訪問父節(jié)點(diǎn)，訪問第一個(gè)子節(jié)點(diǎn)可以使用firstChild屬性或者childNodes[0]，訪問最后一個(gè)子節(jié)點(diǎn)可以使用lastChild屬性或者childNodes[childNodes.length-1]，訪問下一個(gè)兄弟節(jié)點(diǎn)可以使用nextSibling屬性，訪問上一個(gè)兄弟節(jié)點(diǎn)使用previousSibling屬性。DOM頂端節(jié)點(diǎn)是document內(nèi)置對(duì)象，document.parentNode屬性返回null，最后一個(gè)節(jié)點(diǎn)的nextSibling屬性返回null，第一個(gè)節(jié)點(diǎn)的previousSibling屬性返回null。JavaScript的文檔對(duì)象及操作有兩種特殊的文檔屬性document.documentElement和document.body可用于訪問根節(jié)點(diǎn)。例如，document.documentElement.firstChild.nodeName返回“HEAD”，document.body.parentNode.

nodeName返回“HTML”，document.body.parentNode.lastChild.nodeName返回“BODY”。通過可編程的對(duì)象模型，JavaScript能夠創(chuàng)建動(dòng)態(tài)的HTML頁(yè)面。①JavaScript能夠改變頁(yè)面中的所有HTML元素。②JavaScript能夠改變頁(yè)面中的所有HTML屬性。③JavaScript能夠改變頁(yè)面中的所有CSS樣式。④JavaScript能刪除已有的HTML元素和屬性。⑤JavaScript能添加新的HTML元素和屬性。⑥JavaScript能對(duì)頁(yè)面中所有已有的HTML事件做出反應(yīng)。⑦JavaScript能在頁(yè)面中創(chuàng)建新的HTML事件。JavaScript的文檔對(duì)象及操作3．查找HTML元素通常，JavaScript在操作HTML元素前必須先找到HTML元素。查找HTML元素的常用方法如下。（1）通過id查找HTML元素在DOM中查找HTML元素最簡(jiǎn)單的方法是使用getElementById()方法，通過使用元素的id來查找HTML元素。語法格式如下。document.getElementById(id)根據(jù)HTML元素指定的id，查找唯一的HTML元素。如果頁(yè)面中包含多個(gè)id相同的節(jié)點(diǎn)，那么只返回第一個(gè)元素。例如，查找id="demo"的元素的代碼如下。varx=document.getElementById("demo");如果找到該元素，則該方法將以對(duì)象（在x中）的形式返回該元素。如果沒有找到該元素，則x將包含null。getElementById()方法可以查找整個(gè)HTML文檔中的任何HTML元素，該方法會(huì)忽略文檔的結(jié)構(gòu)而返回正確的元素。JavaScript的文檔對(duì)象及操作（2）通過標(biāo)簽名稱查找HTML元素語法格式如下。document.getElementsByTagName("標(biāo)簽名稱")document.getElementById(id).getElementsByTagName("標(biāo)簽名稱")根據(jù)HTML元素指定的標(biāo)簽名稱，獲取名稱相同的一組元素。例如，查找id="main"的元素，并查找該元素中的所有<p>元素。varx=document.getElementById("main").getElementsByTagName("p");由于該方法返回帶有指定標(biāo)簽名的對(duì)象集合，即標(biāo)簽對(duì)象數(shù)組，因此在對(duì)列表中的具體對(duì)象進(jìn)行訪問時(shí)需使用循環(huán)來逐個(gè)訪問。訪問其中某個(gè)標(biāo)簽對(duì)象時(shí)要根據(jù)標(biāo)簽對(duì)象在HTML文檔中的相對(duì)次序決定其索引，第1個(gè)標(biāo)簽對(duì)象的索引為0。表達(dá)式x.length的值為集合中對(duì)象的數(shù)量，表達(dá)式x[0].innerHTML的值為對(duì)象的文本內(nèi)容。JavaScript的文檔對(duì)象及操作（3）通過名稱查找HTML元素語法格式如下。document.getElementsByName("控件名稱")該方法通過name屬性獲取控件列表。例如，查找名稱為check的復(fù)選框的代碼如下。varx=document.getElementsByName("check");表達(dá)式x.length的值為名稱為check的復(fù)選框數(shù)量，表達(dá)式x[0].value的值為第1個(gè)復(fù)選框的文本內(nèi)容。JavaScript的文檔對(duì)象及操作4．改變HTML元素的內(nèi)容HTMLDOM允許JavaScript改變HTML元素的內(nèi)容，修改HTML元素的內(nèi)容最簡(jiǎn)單的方法是使用innerHTML屬性。innerHTML屬性可以用于獲取或替換HTML元素的內(nèi)容，也可以用于獲取或改變?nèi)魏蜨TML元素，包括<html>和<body>。語法格式如下。document.getElementById(id).innerHTML="新屬性值"例如：document.getElementById("demo").innerHTML="Newtext";也可以寫成以下形式。varelement=document.getElementById("demo");element.innerHTML="Newtext";上述代碼使用DOM來獲得id="demo"的元素，然后更改此元素的內(nèi)容（innerHTML）。使用以下形式也能獲取HTML元素的內(nèi)容。document.getElementById(id).getAttribute("innerHTML")JavaScript的文檔對(duì)象及操作5．改變HTML元素的屬性語法格式如下。document.getElementById(id).屬性名="新屬性值"document.getElementById(id).setAttribute(屬性名,"新屬性值")例如，更改<img>元素的src屬性的代碼如下。<imgid="image"src="title01.gif"alt=""/>document.getElementById("image").src="title02.gif";上述代碼使用DOM來獲得id="image"的元素，然后更改此元素src屬性的值，即把"title01.gif"改為"title02.gif"。JavaScript的文檔對(duì)象及操作6．改變HTML元素的樣式語法格式如下。document.getElementById(id).style.樣式名稱="新樣式值"例如：document.getElementById("demo").style.color="blue";document.getElementById('demo').style.visibility="hidden";JavaScript的文檔對(duì)象及操作7．創(chuàng)建新的HTML元素如果需要向HTMLDOM添加新元素，則必須首先創(chuàng)建該元素（元素節(jié)點(diǎn)），然后向一個(gè)已存在的元素追加該元素。創(chuàng)建HTML標(biāo)簽對(duì)象的語法格式如下。document.createElement("標(biāo)簽名稱")創(chuàng)建文本節(jié)點(diǎn)的語法格式如下。document.createTextNode("文本內(nèi)容")創(chuàng)建新屬性節(jié)點(diǎn)的語法格式如下。document.createAttribute("屬性名稱")在已有HTML元素中添加新元素的語法格式如下。element.appendChild(元素名稱)JavaScript的文檔對(duì)象及操作JavaScript的文檔對(duì)象及操作代碼如下。<divid="div1"><pid="p1">這是一個(gè)段落</p><pid="p2">這是另一個(gè)段落</p></div><script>varpara=document.createElement("p");//創(chuàng)建新的<p>元素varnode=document.createTextNode("這是新段落。");//創(chuàng)建了一個(gè)文本節(jié)點(diǎn)para.appendChild(node);//向<p>元素追加這個(gè)文本節(jié)點(diǎn)varelement=document.getElementById("div1");//找到一個(gè)已有的元素element.appendChild(para);//向這個(gè)已有的元素追加新元素</script>添加新屬性節(jié)點(diǎn)到屬性節(jié)點(diǎn)的集合中的方法為setAttributeNode()，將新節(jié)點(diǎn)插入兄弟節(jié)點(diǎn)前面的方法為insertBefore()。瀏覽效果8．刪除已有的HTML元素如需刪除HTML元素，則必須先獲得該元素的父元素。例：代碼如下。<divid="div1"><pid="p1">這是一個(gè)段落。</p><pid="p2">這是另一個(gè)段落。</p></div><script>varparent=document.getElementById("div1");//查找id="div1"的元素varchild=document.getElementById("p1");//查找id="p1"的<p>元素parent.removeChild(child);//從父元素中刪除子元素</script>也可以使用其parentNode屬性來查找父元素，例如：varchild=document.getElementById("p1");child.parentNode.removeChild(child);JavaScript的文檔對(duì)象及操作瀏覽效果BOM使JavaScript能夠?qū)崿F(xiàn)與瀏覽器的“對(duì)話”。由于現(xiàn)代瀏覽器幾乎實(shí)現(xiàn)了JavaScript交互性方面包含的所有相同方法和屬性，因此JavaScript的方法和屬性常被認(rèn)為是BOM的方法和屬性。1．BOM的層次結(jié)構(gòu)瀏覽器對(duì)象就是網(wǎng)頁(yè)瀏覽器本身各種實(shí)體元素在JavaScript代碼中的體現(xiàn)。使用瀏覽器對(duì)象可以與HTML文檔進(jìn)行交互，其作用是將相關(guān)元素組織起來，提供給程序員使用，從而減輕程序員的編程工作量。當(dāng)打開網(wǎng)頁(yè)時(shí)，首先看到瀏覽器窗口，即window對(duì)象，window對(duì)象指的是瀏覽器本身。瀏覽器會(huì)自動(dòng)創(chuàng)建DOM中的一些對(duì)象，這些對(duì)象存放了HTML頁(yè)面的屬性和其他相關(guān)信息。人們看到的網(wǎng)頁(yè)文檔內(nèi)容即為document對(duì)象。因?yàn)檫@些對(duì)象在瀏覽器上運(yùn)行，所以也稱為瀏覽器對(duì)象。window對(duì)象是所有頁(yè)面對(duì)象的根節(jié)點(diǎn)，在JavaScript中，window對(duì)象是全局對(duì)象。BOM采用層次結(jié)構(gòu)，主要分為以下4個(gè)層次。JavaScript的瀏覽器對(duì)象及操作（1）第一層次。在BOM的層次結(jié)構(gòu)中，最頂層的對(duì)象是window(窗口)對(duì)象，它代表當(dāng)前的瀏覽器窗口。該對(duì)象包括許多屬性、方法和事件，程序員可以利用這個(gè)對(duì)象控制瀏覽器窗口。所有瀏覽器都支持window對(duì)象，它代表瀏覽器的窗口。所有JavaScript全局對(duì)象、函數(shù)和變量自動(dòng)成為window對(duì)象的成員。全局變量是window對(duì)象的屬性，全局函數(shù)是window對(duì)象的方法，甚至HTMLDOM的document對(duì)象也是window對(duì)象的屬性。例如：window.document.getElementById("header");其等同于以下代碼。document.getElementById("header");（2）第二層次。window對(duì)象之下是document（文檔）、screen（屏幕）、event（事件）、frame（框架）、history（歷史）、location（地址）等對(duì)象。（3）第三層次。document對(duì)象之下包括form（表單）、image（圖像）、link（鏈接）、anchor（錨）等對(duì)象。（4）第四層次。form對(duì)象之下包括button（按鈕）、checkbox（復(fù)選框）、radio（單選按鈕）、fileUpload（文件域）等對(duì)象。JavaScript的瀏覽器對(duì)象及操作2．window對(duì)象及其屬性和方法window對(duì)象是每一個(gè)已打開的瀏覽器窗口的父對(duì)象，包含document、navigator、location、history等子對(duì)象。該對(duì)象常用的屬性和方法如下。（1）defaultStatus屬性：用于設(shè)置或獲取默認(rèn)的狀態(tài)欄信息。（2）status屬性：用于設(shè)置或獲取窗口狀態(tài)欄中的信息。（3）self屬性：表示當(dāng)前window對(duì)象本身。（4）parent屬性：表示當(dāng)前窗口的父窗口。（5）open(參數(shù)列表)方法：打開一個(gè)具有指定名稱的新窗口。例如：window.open("images/01.gif","www_helpor_net","toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,width=228,height=92,left=200,top=50");使用window.open()方法彈出窗口時(shí)，可以設(shè)置彈出窗口的相關(guān)信息，其中toolbar表示窗口的工具欄，status表示窗口的狀態(tài)欄是否顯示，menubar表示窗口的菜單欄是否顯示，scrollbars表示窗口的滾動(dòng)條是否顯示，resizable表示窗口尺寸是否可調(diào)整，width和height分別表示窗口的寬度和高度，left和top分別表示窗口左上角至屏幕左上角的水平方向和垂直方向的距離，單位為像素。JavaScript的瀏覽器對(duì)象及操作（6）close()方法：表示關(guān)閉當(dāng)前窗口。（7）moveTo(x,y)方法：表示移動(dòng)當(dāng)前窗口。（8）resizeTo(height,width)方法：表示調(diào)整當(dāng)前窗口的尺寸。（9）resizeBy(w,h)方法：表示窗口寬度增大w，高度增大h。（10）showModalDialog()方法：在一個(gè)模式窗口中顯示指定的HTML文檔。該方法與open()方法類似，也有3個(gè)參數(shù)，第1個(gè)參數(shù)為網(wǎng)址，第2個(gè)參數(shù)為窗口名稱，第3個(gè)參數(shù)為模式窗口的高度和寬度。showModalDialog()方法具有返回值，返回的是所打開的模式窗口中的內(nèi)容字符串。JavaScript的瀏覽器對(duì)象及操作3．document對(duì)象及其屬性和方法document對(duì)象代表當(dāng)前瀏覽器窗口中的文檔，使用它可以訪問到文檔中的所有其他對(duì)象，如圖像、表單等。document對(duì)象常用的屬性和方法如下。（1）all屬性：表示文檔中所有HTML標(biāo)簽的數(shù)組。（2）bgColor屬性：用于獲取或設(shè)置網(wǎng)頁(yè)文檔的背景顏色。（3）fgColor屬性：用于獲取或設(shè)置網(wǎng)頁(yè)文本顏色（前景色）。（4）linkColor屬性：用于獲取或設(shè)置未單擊過的超鏈接的顏色。（5）alinkColor屬性：用于獲取或設(shè)置激活超鏈接的顏色。（6）vlinkColor屬性：用于獲取或設(shè)置已單擊過的超鏈接的顏色。JavaScript的瀏覽器對(duì)象及操作（7）title屬性：用于獲取或設(shè)置網(wǎng)頁(yè)文檔的標(biāo)題，等價(jià)于HTML的<title>標(biāo)簽。（8）forms屬性：表示網(wǎng)頁(yè)文檔中所有表單的數(shù)組。（9）write()方法：用于將字符或變量值輸出到窗口中。（10）close()方法：用于將窗口關(guān)閉。（11）網(wǎng)頁(yè)元素的offsetLeft屬性：指該元素相對(duì)于頁(yè)面（或由offsetParent屬性指定的父元素）左側(cè)的位置。該屬性和style.left的作用相同，可讀、可寫。（12）網(wǎng)頁(yè)元素的offsetTop屬性：指該元素相對(duì)于頁(yè)面（或由offsetParent屬性指定的父元素）頂部的位置。該屬性和style.top的作用相同，可讀、可寫。JavaScript的瀏覽器對(duì)象及操作4．screen對(duì)象及其屬性screen對(duì)象包含有關(guān)用戶屏幕的信息，在調(diào)用screen對(duì)象時(shí)可以不使用window這個(gè)前綴。screen對(duì)象常用的屬性如下。（1）width和height屬性：它們分別用于返回屏幕的最大寬度和最大高度，與屏幕分辨率對(duì)應(yīng)。例如，若屏幕分辨率設(shè)置為1680像素×1050像素，則屏幕的最大寬度為1680像素，屏幕的最大高度為1050像素。（2）availWidth屬性：用于返回用戶屏幕可用工作區(qū)的寬度，單位為像素，其值為屏幕寬度減去界面元素特性（如窗口滾動(dòng)條）的寬度。（3）availHeight屬性：用于返回用戶屏幕可用工作區(qū)的高度，單位為像素，其值為屏幕高度減去界面元素特性（如窗口任務(wù)欄）的高度。獲取屏幕的可用寬度的代碼如下。<script>document.write("可用寬度："+screen.availWidth);</script>獲取屏幕的可用高度的代碼如下。<script>document.write("可用高度："+screen.availHeight);</script>JavaScript的瀏覽器對(duì)象及操作5．location對(duì)象及其屬性和方法location對(duì)象表示窗口中顯示的當(dāng)前網(wǎng)頁(yè)的URL，可以使用該對(duì)象使瀏覽器打開某網(wǎng)頁(yè)。location對(duì)象用于獲得當(dāng)前頁(yè)面的地址，并把瀏覽器重定向到新的頁(yè)面。在調(diào)用location對(duì)象時(shí)可不使用window這個(gè)前綴。（1）hostname屬性：返回Web主機(jī)的域名。（2）path屬性：返回當(dāng)前頁(yè)面的路徑和文件名。（3）port屬性：返回Web主機(jī)的端口號(hào)（80或443）。（4）protocol屬性：返回所使用的Web協(xié)議（HTTP或HTTPS）。（5）href屬性：設(shè)置或返回當(dāng)前頁(yè)面的URL。（6）pathname屬性：返回URL的路徑名。（7）assign()方法：加載新的文檔。（8）reload()方法：重新加載當(dāng)前頁(yè)面。JavaScript的瀏覽器對(duì)象及操作6．history對(duì)象及其屬性和方法history對(duì)象包含用戶在瀏覽器窗口中最近訪問過網(wǎng)頁(yè)的URL，所有瀏覽器都支持該對(duì)象。history對(duì)象是window對(duì)象的一部分，可以通過window.history屬性對(duì)其進(jìn)行訪問。在調(diào)用history對(duì)象時(shí)可不使用window這個(gè)前綴。為了保護(hù)用戶的隱私，對(duì)使用JavaScript訪問history對(duì)象的方法進(jìn)行了限制。（1）length屬性：用于返回歷史URL列表中的網(wǎng)址數(shù)。（2）back()方法：用于加載歷史URL列表中的當(dāng)前URL的上一個(gè)URL，這與在瀏覽器中單擊“后退”按鈕的作用相同。（3）forward()方法：用于加載歷史URL列表中的當(dāng)前URL的下一個(gè)URL，這與在瀏覽器中單擊“前進(jìn)”按鈕的作用相同。（4）go()方法：用于加載歷史URL列表中的某個(gè)具體URL。JavaScript的瀏覽器對(duì)象及操作7．navigator對(duì)象navigator對(duì)象提供了瀏覽器環(huán)境的信息，包括瀏覽器的版本號(hào)、運(yùn)行的平臺(tái)等信息。navigator對(duì)象也包含訪問者瀏覽器的有關(guān)信息。在調(diào)用navigator對(duì)象時(shí)可不使用window這個(gè)前綴。使用navigator對(duì)象檢測(cè)可以嗅探不同的瀏覽器。例如，只有Opera支持屬性window.opera，可以據(jù)此識(shí)別出Opera。來自navigator對(duì)象的信息具有誤導(dǎo)性，不應(yīng)該用于檢測(cè)瀏覽器版本，因?yàn)閚avigator數(shù)據(jù)可能被瀏覽器使用者更改，瀏覽器無法報(bào)告晚于瀏覽器發(fā)布的新操作系統(tǒng)的信息。JavaScript的瀏覽器對(duì)象及操作1．瀏覽器窗口的尺寸和網(wǎng)頁(yè)的尺寸通常情況下，網(wǎng)頁(yè)的尺寸由網(wǎng)頁(yè)內(nèi)容和CSS樣式?jīng)Q定。瀏覽器窗口的尺寸是指在瀏覽器窗口中看到的那部分網(wǎng)頁(yè)區(qū)域的尺寸，這部分網(wǎng)頁(yè)區(qū)域又叫作視口（Viewport），瀏覽器的視口不包括工具欄和滾動(dòng)條。顯然，如果網(wǎng)頁(yè)的內(nèi)容能夠在瀏覽器窗口中全部顯示（即不出現(xiàn)滾動(dòng)條和工具欄），那么網(wǎng)頁(yè)的尺寸和瀏覽器窗口的尺寸是相等的；如果不能全部顯示，則滾動(dòng)瀏覽器窗口可以顯示出網(wǎng)頁(yè)的各個(gè)部分。（1）innerWidth和innerHeight屬性對(duì)于InternetExplorer、Chrome、Firefox、Opera及Safari，window.innerHeight表示瀏覽器窗口的內(nèi)部高度（以像素計(jì)），window.innerWidth表示瀏覽器窗口的內(nèi)部寬度（以像素計(jì)）。（2）clientWidth和clientHeight屬性對(duì)于InternetExplorer6、7、8，document.documentElement.clientHeight或者document.body.clientHeight表示瀏覽器窗口的內(nèi)部高度，并且不包含滾動(dòng)條的高度；document.documentElement.clientWidth或者document.body.clientWidth表示瀏覽器窗口的內(nèi)部寬度，并且不包含滾動(dòng)條的寬度。位置與尺寸及JavaScript的設(shè)置方法網(wǎng)頁(yè)元素的寬度和高度例：<head><style>body{margin:0;}#demo{width:100px;height:100px;padding:10px;border:5pxsolidgreen;background-color:red;overflow:auto;}</style></head><body><divid="demo"></div><script>varw=document.getElementById("demo").clientWidth;varh=document.getElementById("demo").clientHeight;document.write("網(wǎng)頁(yè)區(qū)域demo的寬度(不包含滾動(dòng)條在內(nèi))為"+w+"，高度為"+h);</script>位置與尺寸及JavaScript的設(shè)置方法以下代碼的功能是顯示瀏覽器窗口的內(nèi)部高度和內(nèi)部寬度，但不包括工具欄和滾動(dòng)條的高度和寬度，這是一個(gè)可用于所有瀏覽器的實(shí)用解決方案。varw=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;document.write("瀏覽器窗口的寬度為："+w+"<br>");varh=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;document.write("瀏覽器窗口的高度為："+h);網(wǎng)頁(yè)中的每個(gè)元素都有clientHeight和clientWidth屬性。這兩個(gè)屬性指元素的內(nèi)容部分再加上padding（邊距）所占據(jù)的視覺面積，不包括border（邊框）和滾動(dòng)條占用的空間，如圖6-7所示。因此，document對(duì)象的clientHeight和clientWidth屬性就代表了瀏覽器窗口的尺寸。位置與尺寸及JavaScript的設(shè)置方法（3）scrollWidth和scrollHeight屬性網(wǎng)頁(yè)上的每個(gè)元素都有scrollHeight和scrollWidth屬性，是指包含滾動(dòng)條在內(nèi)的該元素的高度和寬度。scrollWidth用于獲取網(wǎng)頁(yè)元素的滾動(dòng)寬度，scrollHeight用于獲取網(wǎng)頁(yè)元素的滾動(dòng)高度。document對(duì)象的scrollHeight和scrollWidth屬性可以表示網(wǎng)頁(yè)的尺寸，分別指滾動(dòng)條滾過的所有頁(yè)面區(qū)域的高度和寬度。仿照前面的getViewport()函數(shù)，可以寫出以下getPagearea()函數(shù)。functiongetPagearea(){if(patMode=="BackCompat"){return{width:document.body.scrollWidth,height:document.body.scrollHeight}}else{return{width:document.documentElement.scrollWidth,height:document.documentElement.scrollHeight}}}但是以上所定義的函數(shù)getPagearea()存在一個(gè)問題。如果網(wǎng)頁(yè)內(nèi)容能夠在瀏覽器窗口中全部顯示，不出現(xiàn)滾動(dòng)條，那么網(wǎng)頁(yè)的clientWidth和scrollWidth的值應(yīng)該相等。但是實(shí)際上，不同瀏覽器有不同的處理方式，這兩個(gè)屬性的值未必相等。因此，需要取它們之中較大的那個(gè)值，這就要對(duì)getPagearea()函數(shù)進(jìn)行改寫。位置與尺寸及JavaScript的設(shè)置方法（4）offsetWidth和offsetHeight屬性document.body.offsetWidth表示網(wǎng)頁(yè)可見區(qū)域的寬度，包括邊線的寬度；document.body.offsetHeight表示網(wǎng)頁(yè)可見區(qū)域的高度，包括邊線的高度。例如：<script>varw=document.body.offsetWidth;varh=document.body.offsetHeight;document.write("網(wǎng)頁(yè)的寬度為"+w+"，高度為"+h);</script>頁(yè)面元素的offsetWidth屬性是指頁(yè)面元素自身的寬度，單位為像素。頁(yè)面元素的offsetHeight屬性是指頁(yè)面元素自身的高度，單位為像素。例如：<script>varw=document.getElementById("demo").offsetWidth;varh=document.getElementById("demo").offsetHeight;document.write("網(wǎng)頁(yè)區(qū)域demo的寬度為"+w+"，高度為"+h);</script>位置與尺寸及JavaScript的設(shè)置方法2．屏幕分辨率的寬度和高度window.screen.width用于獲取屏幕分辨率的寬度，window.screen.height用于獲取屏幕分辨率的高度。例如：<script>varw=window.screen.width;varh=window.screen.height;document.write("屏幕分辨率寬度為"+w+"，高度為"+h);</script>位置與尺寸及JavaScript的設(shè)置方法3．屏幕可用工作區(qū)的寬度和高度window.screen.availWidth用于獲取屏幕可用工作區(qū)的寬度，window.screen.availHeight用于獲取屏幕可用工作區(qū)的高度。例如：<script>varw=window.screen.availWidth;varh=window.screen.availHeight;document.write("屏幕可用工作區(qū)寬度為"+w+"，高度為"+h);</script>位置與尺寸及JavaScript的設(shè)置方法1.offsetTop和offsetLeft屬性網(wǎng)頁(yè)元素的絕對(duì)位置是指該元素的左上角相對(duì)于整個(gè)網(wǎng)頁(yè)左上角的坐標(biāo)。這個(gè)絕對(duì)位置要通過計(jì)算才能得到。首先，每個(gè)元素都有offsetTop和offsetLeft屬性，它們分別表示該元素的左上角與父元素（offsetParent對(duì)象）左上角的距離，如圖6-8所示。其中，offsetTop屬性可以用于獲取頁(yè)面元素距離頁(yè)面上方或父元素上方的距離，offsetLeft屬性可以用于獲取頁(yè)面元素距離頁(yè)面左方或父元素左方的距離，單位都為像素。offsetParent是指元素最近的定位（relative、absolute）父元素，如果沒有定位父元素，則會(huì)指向<body>元素。網(wǎng)頁(yè)元素的偏移量（offsetLeft、offsetTop）就是以這個(gè)父元素為參考物的。位置與尺寸及JavaScript的設(shè)置方法網(wǎng)頁(yè)元素的位置2．scrollTop和scrollLeft屬性網(wǎng)頁(yè)元素的相對(duì)位置是指該元素左上角相對(duì)于瀏覽器窗口左上角的坐標(biāo)。有了絕對(duì)位置以后，獲得相對(duì)位置就很容易了，只要將絕對(duì)坐標(biāo)減去頁(yè)面的滾動(dòng)條滾動(dòng)的距離即可。通過document對(duì)象的scrollTop屬性可以設(shè)置或獲取頁(yè)面元素最頂端和窗口中可見內(nèi)容最頂端之間的距離。通過document對(duì)象的scrollLeft屬性可以設(shè)置或獲取頁(yè)面元素最左端和窗口中目前可見內(nèi)容的最左端之間的距離，如圖6-9所示。如果元素是可以滾動(dòng)的，則可以通過這2個(gè)屬性得到元素在水平和垂直方向上滾動(dòng)的距離，單位是像素。對(duì)于不可以滾動(dòng)的元素，其值總是0。位置與尺寸及JavaScript的設(shè)置方法網(wǎng)頁(yè)元素的位置3．screenTop和screenLeft屬性window對(duì)象的screenTop屬性可以用于獲取網(wǎng)頁(yè)內(nèi)容的上邊距，window對(duì)象的screenLeft屬性可以用于獲取網(wǎng)頁(yè)內(nèi)容的左邊距。例：代碼如下。<script>document.write("網(wǎng)頁(yè)內(nèi)容的上邊距為"+window.screenTop);document.write("網(wǎng)頁(yè)內(nèi)容的左邊距為"+window.screenLeft+"<br>");</script>位置與尺寸及JavaScript的設(shè)置方法網(wǎng)頁(yè)元素的位置位置與尺寸及JavaScript的設(shè)置方法網(wǎng)頁(yè)元素的位置4．getBoundingClientRect()方法使用getBoundingClientRect()方法可以立刻獲得網(wǎng)頁(yè)元素的位置，該方法返回的是一個(gè)對(duì)象，其中包含left、right、top和bottom這4

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論