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

下載本文檔

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

文檔簡(jiǎn)介

DOM（DocumentObjectModel，文檔對(duì)象模型）是W3C標(biāo)準(zhǔn)，定義了用于HTML的一系列標(biāo)準(zhǔn)的對(duì)象，以及訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。

JavaScript對(duì)象模型DOM的對(duì)象目錄

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)題定義ti

溫馨提示

  • 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. 人人文庫網(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)論