網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā) 第7版 課件 第9章 JavaScript對(duì)象模型_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā) 第7版 課件 第9章 JavaScript對(duì)象模型_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā) 第7版 課件 第9章 JavaScript對(duì)象模型_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā) 第7版 課件 第9章 JavaScript對(duì)象模型_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā) 第7版 課件 第9章 JavaScript對(duì)象模型_第5頁
已閱讀5頁，還剩102頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

BOM（BrowserObjectModel）是指瀏覽器對(duì)象模型，瀏覽器對(duì)象模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu)。第9章JavaScript對(duì)象模型9.1BOM的對(duì)象目錄第9章JavaScript對(duì)象模型9.1BOM的對(duì)象9.2DOM的對(duì)象9.3DOM與CSS習(xí)題99.1BOM的對(duì)象9.1.1BOM概述瀏覽器對(duì)象關(guān)系的如圖所示。9.1BOM的對(duì)象9.1.2window對(duì)象1.window對(duì)象的屬性9.1BOM的對(duì)象2.window對(duì)象的方法9.1BOM的對(duì)象【例9-1】顯示窗口的寬、高和設(shè)置計(jì)時(shí)器，頁面初次加載時(shí)依次顯示3個(gè)的提示框，延時(shí)5000ms后再調(diào)用hello()函數(shù)，顯示其對(duì)話框，本例文件9-1.html在瀏覽器中顯示的效果，如圖所示。9.1BOM的對(duì)象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">functionhello(){window.alert("歡迎您！");}

window.setTimeout(hello,9000);//延時(shí)9000ms后再調(diào)用hello()函數(shù)

window.alert("窗口的寬="+window.innerWidth);//獲得窗口的寬度

window.alert("窗口的高="+window.innerHeight);//獲得窗口的高度

mpt("mpt()","默認(rèn)文本");//js中的提示輸入框

</script></head><body></body></html>9.1BOM的對(duì)象9.1.3document對(duì)象1.document對(duì)象的屬性9.1BOM的對(duì)象2.document對(duì)象的方法9.1BOM的對(duì)象【例9-2】使用getElementById()、getElementsByName()、getElementsByTagName()方法操作文檔中的元素。瀏覽者填寫表單中的選項(xiàng)后，單擊“統(tǒng)計(jì)結(jié)果”按鈕，彈出消息框顯示統(tǒng)計(jì)結(jié)果，本例文件9-2.html在瀏覽器中的顯示效果，如圖所示。9.1BOM的對(duì)象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>document對(duì)象</title><scripttype="text/javascript">functioncount(){varuserName=document.getElementById("userName");varhobby=document.getElementsByName("hobby");varinputs=document.getElementsByTagName("input");varresult="ID為userName的元素的值："+userName.value+"\nname為hobby的元素的個(gè)數(shù)："+hobby.length+"\n個(gè)人愛好：";for(vari=0;i<hobby.length;i++){if(hobby[i].checked){result+=hobby[i].value+"";}

}

9.1BOM的對(duì)象result+="\n標(biāo)簽為input的元素的個(gè)數(shù)："+inputs.length;alert(result);}</script></head><body><formname="myform">

用戶名：<inputtype="text"name="userName"id="userName"><br>

愛好：<inputtype="checkbox"name="hobby"value="音樂">音樂

<inputtype="checkbox"name="hobby"value="美食">美食

<inputtype="checkbox"name="hobby"value="旅游">旅游<br><inputtype="button"value="統(tǒng)計(jì)結(jié)果"onclick="count()"></form></body></html>

9.1BOM的對(duì)象9.1.4location對(duì)象1.location對(duì)象的屬性9.1BOM的對(duì)象2.location對(duì)象的方法9.1BOM的對(duì)象【例9-3】下面代碼通過location.href屬性獲得當(dāng)前頁面的URL鏈接，然后重定向并打開百度主頁。本例文件9-3.html在瀏覽器中顯示如圖9-4所示。<scripttype="text/javascript">window.onload=function(){alert(location.href);location.replace("");}</script>9.1BOM的對(duì)象9.1.5navigator對(duì)象9.1BOM的對(duì)象【例9-4】navigator.userAgent是最常用的屬性，用來完成瀏覽器判斷；然后返回客戶端瀏覽器的各種信息。本例文件9-4.html在瀏覽器中顯示如圖9-5所示。9.1BOM的對(duì)象<scripttype="text/javascript">if(window.navigator.userAgent.indexOf('MSIE')!=-1){alert('我是IE');}else{alert('我不是IE');}document.write(navigator.appName+"<br>");//返回運(yùn)行瀏覽器的名稱

document.write(navigator.appVersion+"<br>");//返回運(yùn)行瀏覽器的平臺(tái)和版本信息

document.write(navigator.cookieEnabled+"<br>");//返回瀏覽器中是否啟用cookie的布爾值

document.write(navigator.platform+"<br>");//返回運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)</script>9.1BOM的對(duì)象9.1.6screen對(duì)象9.1BOM的對(duì)象【例9-5】下面代碼顯示瀏覽器顯示屏幕的寬度和高度、顯示器屏幕的寬度和高度，本例文件9-5.html在瀏覽器中顯示如圖9-6所示，可以看到瀏覽器屏幕的高度與顯示器的高度相差一個(gè)Windows任務(wù)欄的高度。<scripttype="text/javascript">document.write(screen.availHeight+"<br>");//返回客戶端瀏覽器顯示屏幕的高度

document.write(screen.availWidth+"<br>");//返回瀏覽器顯示屏幕的寬度

document.write(screen.height+"<br>");//返回顯示器的高度

document.write(screen.width+"<br>");//返回顯示器的寬度</script>9.1BOM的對(duì)象9.1BOM的對(duì)象9.1.7history對(duì)象9.1BOM的對(duì)象例如，下面代碼在網(wǎng)頁中顯示網(wǎng)頁鏈接的數(shù)量，請(qǐng)輸入幾個(gè)網(wǎng)站后，返回到這個(gè)例子，鏈接數(shù)量將改變。document.write(history.length+"<br>");//初始時(shí)，該值為1history.back();//后退一頁//history.forward();//前進(jìn)一頁//history.go(-1);//后退一頁//history.go(1);//前進(jìn)一頁//history.go(2);//前進(jìn)兩頁祝賀你完成了這一節(jié)的學(xué)習(xí)《網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源DOM（DocumentObjectModel，文檔對(duì)象模型）是W3C標(biāo)準(zhǔn)，定義了用于HTML的一系列標(biāo)準(zhǔn)的對(duì)象，以及訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。第9章JavaScript對(duì)象模型9.2DOM的對(duì)象目錄第9章JavaScript對(duì)象模型9.1BOM的對(duì)象9.2DOM的對(duì)象9.3DOM與CSS習(xí)題99.2DOM的對(duì)象9.2.1節(jié)點(diǎn)和節(jié)點(diǎn)樹1.節(jié)點(diǎn)DOM把HTML文檔中的每一個(gè)元素都定義成一個(gè)一個(gè)的節(jié)點(diǎn)，整個(gè)HTML文檔是一個(gè)文檔節(jié)點(diǎn)，根元素<html>是根節(jié)點(diǎn)。每個(gè)HTML標(biāo)簽都是一個(gè)元素節(jié)點(diǎn)，包含在HTML標(biāo)簽中的文本內(nèi)容是文本節(jié)點(diǎn)；HTML標(biāo)簽的每一個(gè)屬性是一個(gè)屬性節(jié)點(diǎn)。注釋屬于注釋節(jié)點(diǎn)。9.2DOM的對(duì)象2.節(jié)點(diǎn)樹DOM對(duì)象被結(jié)構(gòu)化為對(duì)象樹，HTML文檔的所有節(jié)點(diǎn)組成一個(gè)節(jié)點(diǎn)樹，HTML文檔中的每個(gè)元素、屬性和文本內(nèi)容等都代表樹中的一個(gè)節(jié)點(diǎn)。例如，下面HTML文檔，代碼如下：<!DOCTYPEhtml><!--文檔節(jié)點(diǎn)--><html><!--<html>是元素節(jié)點(diǎn)--><head><!--<head>是元素節(jié)點(diǎn)-->

<metacharset="utf-8"><!--<meta>是元素節(jié)點(diǎn)，其中的charset是屬性節(jié)點(diǎn)-->

<title>文檔標(biāo)題</title><!--<title>是元素節(jié)點(diǎn)，其中的“文檔標(biāo)題”是文本節(jié)點(diǎn)--></head><body><!--<body>是元素節(jié)點(diǎn)--><ahref="#">鏈接文字</a><!--<a>是元素節(jié)點(diǎn)，其中的href是屬性節(jié)點(diǎn)，“鏈接文字”是文本節(jié)點(diǎn)-->

<h1>標(biāo)題1</h1><!--<h1>是元素節(jié)點(diǎn)，其中的“標(biāo)題1”是文本節(jié)點(diǎn)--><p>段落文本</p><!--<p>是元素節(jié)點(diǎn)，其中的“段落文本”是文本節(jié)點(diǎn)--></body></html>9.2DOM的對(duì)象上面代碼構(gòu)成的節(jié)點(diǎn)樹，如圖所示。9.2DOM的對(duì)象9.2.2DOM的操作由于HTML文檔被瀏覽器解析后是一棵DOM樹，是一個(gè)樹形結(jié)構(gòu)。要改變HTML的結(jié)構(gòu)，就需要通過JavaScript來操作DOM。操作一個(gè)DOM節(jié)點(diǎn)就是以下幾個(gè)操作：添加。刪除。更新。遍歷。9.2DOM的對(duì)象9.2.3Node對(duì)象Node（節(jié)點(diǎn)）對(duì)象代表文檔樹中的一個(gè)節(jié)點(diǎn)，Node對(duì)象是整個(gè)DOM的核心對(duì)象。1.Node對(duì)象的屬性每個(gè)節(jié)點(diǎn)都有其節(jié)點(diǎn)的屬性，Node對(duì)象的常用屬性見表。9.2DOM的對(duì)象9.2DOM的對(duì)象（1）nodeNamenodeName屬性含有某個(gè)節(jié)點(diǎn)的名稱，其中：1）元素節(jié)點(diǎn)的nodeName值是標(biāo)簽名稱。2）屬性節(jié)點(diǎn)的nodeName值是屬性名稱。3）文本節(jié)點(diǎn)的nodeName值永遠(yuǎn)是#text。4）文檔節(jié)點(diǎn)的nodeName值永遠(yuǎn)是#document。9.2DOM的對(duì)象（2）nodeValue對(duì)于文本節(jié)點(diǎn)，nodeValue屬性包含文本內(nèi)容。對(duì)于屬性節(jié)點(diǎn)，nodeValue屬性包含屬性值。對(duì)于文檔節(jié)點(diǎn)和元素節(jié)點(diǎn)，nodeValue屬性不可用。9.2DOM的對(duì)象（3）nodeTypenodeType屬性返回節(jié)點(diǎn)的類型，其中最重要的節(jié)點(diǎn)類型見表。9.2DOM的對(duì)象2.Node對(duì)象的方法Node對(duì)象的方法包含對(duì)節(jié)點(diǎn)的各種操作。9.2DOM的對(duì)象9.2.4HTMLDOM對(duì)象HTMLDOM是HTML的標(biāo)準(zhǔn)對(duì)象模型和編程接口。它定義了：作為對(duì)象的HTML元素；所有HTML元素的屬性；訪問所有HTML元素的方法；所有HTML元素的事件。換言之，HTMLDOM是關(guān)于如何獲取、更改、添加或刪除HTML元素的標(biāo)準(zhǔn)。9.2DOM的對(duì)象HTMLDOM獨(dú)立于平臺(tái)和編程語言，它可被任何編程語言（如Java、JavaScript和VBScript）使用。HTMLDOM對(duì)象見表。9.2DOM的對(duì)象9.2DOM的對(duì)象9.2.5HTMLDocument對(duì)象HTMLDocument對(duì)象表示HTML文檔樹的根，在BOM和HTMLDOM中被稱為Document對(duì)象。每個(gè)載入瀏覽器的HTML文檔都會(huì)成為Document對(duì)象。Document對(duì)象可以用腳本對(duì)HTML頁面中的所有元素進(jìn)行訪問。9.2DOM的對(duì)象1.HTMLDocument對(duì)象的集合HTMLDocument對(duì)象的常用集合見表。9.2DOM的對(duì)象2.HTMLDocument對(duì)象的屬性HTMLDocument對(duì)象的常用屬性，見表。9.2DOM的對(duì)象3.HTMLDocument對(duì)象的方法HTMLDocument對(duì)象的常用方法見表。9.2DOM的對(duì)象9.2.6HTMLElement對(duì)象在HTMLDOM中，HTMLElement對(duì)象表示HTML文檔中的任意元素，它是HTMLDOM的基本對(duì)象，提供HTML元素對(duì)象的通用屬性和方法。Element對(duì)象可以擁有類型為元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)的子節(jié)點(diǎn)。NodeList對(duì)象表示節(jié)點(diǎn)列表，比如HTML元素的子節(jié)點(diǎn)集合。元素也可以擁有屬性。屬性是屬性節(jié)點(diǎn)。HTMLElement對(duì)象繼承了Node和Element對(duì)象的標(biāo)準(zhǔn)屬性和方法，也實(shí)現(xiàn)了非標(biāo)準(zhǔn)屬性。9.2DOM的對(duì)象1.HTMLElement對(duì)象的屬性表列出了HTMLElement對(duì)象的常用屬性，表中的屬性可用于所有HTML元素上。9.2DOM的對(duì)象2.HTMLElement對(duì)象的方法HTMLElement對(duì)象的常用方法見表。9.2DOM的對(duì)象9.2.7Node操作實(shí)例1.獲取節(jié)點(diǎn)（1）通過標(biāo)簽的id獲取document.getElementById('id屬性值')（2）通過標(biāo)簽name屬性獲取document.getElementsByName('name屬性值')9.2DOM的對(duì)象（3）通過class類別名獲取document.getElementsByClassName('class屬性值')（4）通過標(biāo)簽名獲取document.getElementsByTagName('標(biāo)簽名')9.2DOM的對(duì)象【例9-6】Node對(duì)象是用于解析DOM節(jié)點(diǎn)樹的入口，Node對(duì)象提供了對(duì)節(jié)點(diǎn)操作的屬性和方法。本例使用Node對(duì)象的屬性顯示節(jié)點(diǎn)信息。本例文件9-6.html在瀏覽器中的顯示效果，如圖所示。9.2DOM的對(duì)象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>顯示屬性值</title></head><body><pid="p1"name="text">我來自何方</p><scripttype="text/javascript">/*獲取指定元素節(jié)點(diǎn)*/varp=document.getElementById('p1');/*判斷指定節(jié)點(diǎn)的名稱-顯示標(biāo)簽名稱*/document.write(p.nodeName+"<br/>");//顯示大寫:P/*判斷指定節(jié)點(diǎn)的類型*/document.write(p.nodeType+"<br/>");//顯示元素節(jié)點(diǎn):1/*判斷指定節(jié)點(diǎn)的屬性值*/document.write(p.nodeValue+"<br/>");//顯示:null/*獲取指定元素節(jié)點(diǎn)的文本節(jié)點(diǎn)*/vartext=p.firstChild;/*判斷指定節(jié)點(diǎn)的名稱*/document.write(text.nodeName+"<br/>");//顯示文本節(jié)點(diǎn)的固定寫法:#text/*判斷指定節(jié)點(diǎn)的類型*/document.write(text.nodeType+"<br/>");//顯示文本節(jié)點(diǎn):39.2DOM的對(duì)象/*判斷指定節(jié)點(diǎn)的屬性值*/document.write(text.nodeValue+"<br/>");//顯示文本內(nèi)容:我來自何方/*獲取指定元素節(jié)點(diǎn)的屬性節(jié)點(diǎn)*/varmyAttr=p.getAttributeNode('name');/*判斷指定節(jié)點(diǎn)的名稱*/document.write(myAttr.nodeName+"<br/>");//顯示屬性名:name/*判斷指定節(jié)點(diǎn)的類型*/document.write(myAttr.nodeType+"<br/>");//顯示屬性節(jié)點(diǎn):2/*判斷指定節(jié)點(diǎn)的屬性值*/document.write(myAttr.nodeValue+"<br/>");//顯示屬性值:text/*判斷節(jié)點(diǎn)的類型-文檔節(jié)點(diǎn)*///document對(duì)象表示html文檔（html頁面）document.write(document.nodeName+"<br/>");//顯示節(jié)點(diǎn)的名稱:#document（document對(duì)象）document.write(document.nodeType+"<br/>");//顯示節(jié)點(diǎn)的類型:9（文檔節(jié)點(diǎn)）document.write(document.nodeValue+"<br/>");//顯示節(jié)點(diǎn)的值:null</script></body></html>9.2DOM的對(duì)象2.創(chuàng)建或增添節(jié)點(diǎn)（1）創(chuàng)建節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)使用下面方法。document.createElement("HTML元素名")//創(chuàng)建一個(gè)HTML元素document.createTextNode(String)//創(chuàng)建一個(gè)文本節(jié)點(diǎn)document.createAttribute("屬性名")//創(chuàng)建一個(gè)屬性節(jié)點(diǎn)9.2DOM的對(duì)象（2）增添節(jié)點(diǎn)增添節(jié)點(diǎn)使用下面方法。1）向element內(nèi)部最后添加（追加）一個(gè)節(jié)點(diǎn)，參數(shù)是節(jié)點(diǎn)類型：element.appendChild(Node)2）在element內(nèi)部的existingNode前插入newNode：element.insertBefore(newNode,existingNode)9.2DOM的對(duì)象【例9-7】本例創(chuàng)建新的HTML元素p節(jié)點(diǎn)，使用appendChild()方法添加新元素到尾部；然后在已存在的元素div1中添加它。本例文件9-7.html在瀏覽器中的顯示效果，如圖所示。9.2DOM的對(duì)象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>創(chuàng)建新的HTML元素(節(jié)點(diǎn))-appendChild()</title></head><body><divid="div1"><pid="p1">這是第一個(gè)段落。</p><pid="p2">這是第二個(gè)段落。</p></div><scripttype="text/javascript">varpara=document.createElement("p");//創(chuàng)建p元素

varnode=document.createTextNode("這是一個(gè)新的段落。");//為<p>元素創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)

para.appendChild(node);//將文本節(jié)點(diǎn)添加到<p>元素中

varelement=document.getElementById("div1");//查找已存在的元素div1element.appendChild(para);//添加到已存在的元素中

</script></body></html>9.2DOM的對(duì)象【例9-8】本例創(chuàng)建新的HTML元素(節(jié)點(diǎn))，使用insertBefore()方法將新元素添加到指定位置。本例文件9-8.html在瀏覽器中顯示如圖所示9.2DOM的對(duì)象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>創(chuàng)建新的HTML元素(節(jié)點(diǎn))-appendChild()</title></head><body><divid="div1"><pid="p1">這是第一個(gè)段落。</p><pid="p2">這是第二個(gè)段落。</p></div><scripttype="text/javascript">varpara=document.createElement("p");//創(chuàng)建p元素varnode=document.createTextNode("這是一個(gè)新的段落。");//為<p>元素創(chuàng)建文本節(jié)點(diǎn)para.appendChild(node);//將文本節(jié)點(diǎn)添加到<p>元素中varelement=document.getElementById("div1");//查找已存在的元素div1varchild=document.getElementById("p2");//查找已存在的元素p2element.insertBefore(para,child);//把新建的元素插入到p2前</script></body></html>9.2DOM的對(duì)象3.刪除（移除）節(jié)點(diǎn)刪除節(jié)點(diǎn)使用下面方法：element.removeChild(Node)本方法的功能是刪除當(dāng)前節(jié)點(diǎn)下指定的子節(jié)點(diǎn)，刪除成功返回該被刪除的節(jié)點(diǎn)，否則返回null。9.2DOM的對(duì)象【例9-9】HTML文檔中<div>元素包含兩個(gè)子節(jié)點(diǎn)（兩個(gè)<p>元素），刪除第一個(gè)段落。本例文件9-9.html在瀏覽器中的顯示效果，如圖所示。9.2DOM的對(duì)象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>移除第一個(gè)段落</title></head><body><divid="div1"><pid="p1">這是第一個(gè)段落。</p><pid="p2">這是第二個(gè)段落。</p></div><scripttype="text/javascript">varparent=document.getElementById("div1");//查找id="div1"的元素，父元素

varchild=document.getElementById("p1");//查找id="p1"的<p>元素

parent.removeChild(child);//從父元素中移除子節(jié)點(diǎn)p1</script></body></html>9.2DOM的對(duì)象4.替換HTML元素可以使用replaceChild()方法來替換HTMLDOM中的元素。parent.replaceChild(para,child);【例9-10】本例用新段落替換第一個(gè)段落。本例文件9-10.html在瀏覽器中的顯示效果，如圖所示。9.2DOM的對(duì)象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>替換HTML元素-replaceChild()</title></head><body><divid="div1"><pid="p1">這是第一個(gè)段落。</p><pid="p2">這是第二個(gè)段落。</p></div><scripttype="text/javascript">varpara=document.createElement("p");varnode=document.createTextNode("這是一個(gè)新的段落。");para.appendChild(node);varparent=document.getElementById("div1");varchild=document.getElementById("p1");parent.replaceChild(para,child);</script></body></html>9.2DOM的對(duì)象5.獲取或設(shè)置元素的屬性值對(duì)獲取的節(jié)點(diǎn)，可以得到節(jié)點(diǎn)的屬性值，也可以設(shè)置節(jié)點(diǎn)的屬性值。其語法格式如下：節(jié)點(diǎn)對(duì)象名.getAttribute(attributeName)節(jié)點(diǎn)對(duì)象名.setAttribute(attributeName,attributeValue)9.2DOM的對(duì)象【例9-11】本例定義了一個(gè)文本節(jié)點(diǎn)和元素節(jié)點(diǎn)，并為一級(jí)標(biāo)題元素設(shè)置title屬性，最后把它們添加到文檔結(jié)構(gòu)中。本例文件9-11.html在瀏覽器中的顯示效果，如圖所示。9.2DOM的對(duì)象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">window.onload=function(){varhello=document.createTextNode("HelloWorld!");//創(chuàng)建一個(gè)文本節(jié)點(diǎn)varh1=document.createElement("h1");//創(chuàng)建一個(gè)一級(jí)標(biāo)題h1.setAttribute("title","你好，歡迎光臨！");//為一級(jí)標(biāo)題定義title屬性h1.appendChild(hello);//把文本節(jié)點(diǎn)增加到一級(jí)標(biāo)題中document.body.appendChild(h1);//把一級(jí)標(biāo)題增加到文檔}</script></head><body><p>ppp</p></body></html>9.2DOM的對(duì)象【例9-12】修改節(jié)點(diǎn)列表中所有<p>元素的背景顏色。本例文件9-12.html在瀏覽器中顯示如圖所示。9.2DOM的對(duì)象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTMLDOM集合(Collection)</title></head><body><h2>JavaScriptHTMLDOM!</h2><p>HelloWorld!</p><p>你好!</p><p>點(diǎn)擊按鈕修改所有p元素的背景顏色。</p><buttononclick="myFunction()">點(diǎn)我</button><scripttype="text/javascript">functionmyFunction(){varmyCollection=document.getElementsByTagName("p");vari;for(i=0;i<myCollection.length;i++){myCollection[i].style.color="red";}}</script></body></html>《網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā)（第7版）》劉瑞新主編配套資源自由思想，獨(dú)立思考DOM（DocumentObjectModel，文檔對(duì)象模型）是W3C標(biāo)準(zhǔn)，定義了用于HTML的一系列標(biāo)準(zhǔn)的對(duì)象，以及訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。第9章JavaScript對(duì)象模型9.3DOM與CSS目錄第9章JavaScript對(duì)象模型9.1BOM的對(duì)象9.2DOM的對(duì)象9.3DOM與CSS習(xí)題99.3DOM與CSS9.3.1style對(duì)象使用style對(duì)象屬性的格式為：document.getElementById("id").style.屬性名="新樣式值"例如，下面代碼獲取的樣式是內(nèi)聯(lián)樣式的值：<styletype="text/css">//內(nèi)部樣式

#div{color:gray;}</div><divid="div"style="color:red;"></div>//內(nèi)聯(lián)樣式document.getElementById('id').style.color;//值為red9.3DOM與CSS1．Background屬性style對(duì)象的Background屬性見表。9.3DOM與CSS2．Border和Margin屬性style對(duì)象的Border和Margin屬性見表9-20。9.3DOM與CSS9.3DOM與CSS3．Layout屬性style對(duì)象的Layout屬性見表。9.3DOM與CSS9.3DOM與CSS4．List屬性style對(duì)象的List屬性見表。9.3DOM與CSS5．Positioning屬性style對(duì)象的Positioning屬性見表。9.3DOM與CSS6．Table屬性style對(duì)象的Table屬性見表。9.3DOM與CSS7．Text屬性style對(duì)象的Text屬性見表。9.3DOM與CSS9.3DOM與CSS【例9-13】本例改變<p>元素的樣式。本例文件9-13.html在瀏覽器中顯示如圖9-15所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTMLDOM-改變CSS</title></head><body><pid="p1">HelloWorld!</p><pid="p2">HelloWorld!</p><scripttype="text/javascript">document.getElementById("p2").style.color="blue";document.getElementById("p2").style.fontFamily="Arial";document.getElementById("p2").style.fontSize="30px";</script><p>以上段落通過腳本修改。</p></body></html>9.3DOM與CSS【例9-14】本例通過style對(duì)象獲得CSS的屬性值。當(dāng)頁面載入后，單擊“請(qǐng)單擊本按鈕”，將在消息框中顯示CSS值。本例文件9-14.html在瀏覽器中顯示如圖9-16所示。9.3DOM與CSS<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>得到CSS值</title><scripttype="text/javascript">window.onload=function(){document.getElementById("btn").onclick=function(){alert(document.getElementById("mycss").style.width);//200alert(document.getElementById("mycss").style.background);//greenyellowalert(document.getElementById("mycss").style.color);//沒有這個(gè)值，為空白

}}</script></head>9.3DOM與CSS<body><divid="mycss"class="ss"style="width:200px;height:100px;background:greenyellow">JS獲取CSS屬性值</div><inputtype="button"id="btn"value="請(qǐng)單擊本按鈕"/></body></html>9.3DOM與CSS9.3.2currentStyle對(duì)象其格式如下：varostyle=window.getComputedStyle(element[,psevdo-element])9.3DOM與CSS【例9-15】currentStyle對(duì)象的使用，顯示樣式屬性值。本例文件9-15.html在瀏覽器中顯示如圖9-17所示。9.3DOM與CSS<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>currentStyle對(duì)象</title><styletype="text/css">#myDiv{background-color:blue;width:200px;height:100px;}</style></head>9.3DOM與CSS<body><divid="myDiv"style="background-color:red;border:1pxsolidblack"></div><scripttype="text/javascript">varmyDiv=document.getElementById("myDiv");varcomputedStyle=document.defaultView.getComputedStyle(myDiv,null);alert(computedStyle.backgroundColor);//"red"，因內(nèi)嵌樣式優(yōu)先級(jí)高

alert(computedStyle.width);//"200px"alert(computedStyle.height);//"100px"alert(computedStyle.border);//在某些瀏覽器中是“1pxsolidblack”</script></body></html>9.3DOM與CSS【例9-16】currentStyle對(duì)象的使用。當(dāng)頁面載入后，單擊“請(qǐng)單擊本按鈕”，將在消息框中顯示段落字體的大小。本例文件9-16.html在瀏覽器中顯示如圖9-18所示。9.3DOM與CSS<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>currentStyle對(duì)象</title><scripttype="text/javascript">window.onload=function(){document.getElementById("btn").onclick=function(){varop=document.getElementById("p1");varocurrentStyle=window.getComputedStyle(op,null);alert(ocurrentStyle.fontSize);

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(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)論