《WEB前端開發(fā)技術(shù)實(shí)用教程》第09章 文檔對(duì)象模型(DOM)_第1頁(yè)
《WEB前端開發(fā)技術(shù)實(shí)用教程》第09章 文檔對(duì)象模型(DOM)_第2頁(yè)
《WEB前端開發(fā)技術(shù)實(shí)用教程》第09章 文檔對(duì)象模型(DOM)_第3頁(yè)
《WEB前端開發(fā)技術(shù)實(shí)用教程》第09章 文檔對(duì)象模型(DOM)_第4頁(yè)
《WEB前端開發(fā)技術(shù)實(shí)用教程》第09章 文檔對(duì)象模型(DOM)_第5頁(yè)
已閱讀5頁(yè)，還剩41頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1第9章文檔對(duì)象模型(DOM)目錄29.1DOM概述9.2DOM節(jié)點(diǎn)分類9.3節(jié)點(diǎn)屬性與文本操作9.4DOM節(jié)點(diǎn)訪問(wèn)方法9.5動(dòng)態(tài)創(chuàng)建HTML內(nèi)容9.6DOMStyle對(duì)象9.7表單元素對(duì)象9.8表單驗(yàn)證9.1DOM概述DOM：DocumentObjectModel即文檔對(duì)象模型，定義了用戶操作文檔對(duì)象的接口。DOM是面向HTML和XML文檔的API，為文檔提供了結(jié)構(gòu)化表示，并定義如何通過(guò)腳本來(lái)訪問(wèn)文檔結(jié)構(gòu)；文檔中的每個(gè)元素都是DOM的一部分，Javascript可以訪問(wèn)元素的屬性和方法39.1DOM概述文檔：DOM中的”D”沒(méi)有文檔，DOM就無(wú)從談起。當(dāng)創(chuàng)建一個(gè)網(wǎng)頁(yè)并把它加載到瀏覽器中，DOM就根據(jù)你編寫的網(wǎng)頁(yè)創(chuàng)建了一個(gè)文檔對(duì)象。對(duì)象：DOM中的”O(jiān)”我們把注意力放在瀏覽器對(duì)象上模型：DOM中的”M”當(dāng)網(wǎng)頁(yè)加載后，瀏覽器向我們提供了當(dāng)前網(wǎng)頁(yè)的模型，我們可以去提取這個(gè)模型。DOM把文檔表示成一顆樹。49.1DOM概述如下例：<html><head><title>domdemo</title><metaname="keywords"content="dom"></head><body><h2><ahref="#isaac">標(biāo)題一</a></h2><p>段落1</p><ulid="myul"><li>javascript</li><li>dom</li><li>css</li></ul></body></html>59.1DOM概述DOM層次結(jié)構(gòu)圖6DOM分層通過(guò)上圖可以看出，在文檔對(duì)象模型中，每一個(gè)對(duì)象都可以稱為一個(gè)節(jié)點(diǎn)(Node)。根節(jié)點(diǎn)在最頂層的<html>節(jié)點(diǎn)，稱為是根節(jié)點(diǎn)。父節(jié)點(diǎn)一個(gè)節(jié)點(diǎn)之上的節(jié)點(diǎn)是該節(jié)點(diǎn)的父節(jié)點(diǎn)(parent)。例如，<html>就是<head>和<body>的父節(jié)點(diǎn)，<head>就是<title>的父節(jié)點(diǎn)。子節(jié)點(diǎn)位于一個(gè)節(jié)點(diǎn)之下的節(jié)點(diǎn)就是該節(jié)點(diǎn)的子節(jié)點(diǎn)。例如，<head>和<body>就是<html>的子節(jié)點(diǎn)，<title>就是<head>的子節(jié)點(diǎn)。兄弟節(jié)點(diǎn)如果多個(gè)節(jié)點(diǎn)在同一個(gè)層次，并擁有著相同的父節(jié)點(diǎn)，這幾個(gè)節(jié)點(diǎn)就是兄弟節(jié)點(diǎn)(sibling)。例如，<head>和<body>就是兄弟節(jié)點(diǎn)，<head>和<body>就是兄弟節(jié)點(diǎn)。7DOM分層后代一個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)的結(jié)合可以稱為是該節(jié)點(diǎn)的后代(descendant)。例如，<head>和<body>就是<html>的后代，<h3>和<b>就是<body>的后代。葉子節(jié)點(diǎn)在樹形結(jié)構(gòu)最底部的節(jié)點(diǎn)稱為葉子節(jié)點(diǎn)。例如，“標(biāo)題內(nèi)容”、“3號(hào)標(biāo)題”和“加粗內(nèi)容”都是葉子節(jié)點(diǎn)。89.2DOM節(jié)點(diǎn)分類文檔模型中，節(jié)點(diǎn)的三種類型：元素節(jié)點(diǎn)在HTML中，<body>、<p>、<a>等一系列標(biāo)記，是這個(gè)文檔的元素節(jié)點(diǎn)。元素節(jié)點(diǎn)組成了文檔模型的語(yǔ)義邏輯結(jié)構(gòu)。文本節(jié)點(diǎn)包含在元素節(jié)點(diǎn)中的內(nèi)容部分，如<p>標(biāo)簽中的文本等等。一般情況下，不為空的文本節(jié)點(diǎn)都是可見(jiàn)并呈現(xiàn)于瀏覽器中的。屬性節(jié)點(diǎn)元素節(jié)點(diǎn)的屬性，如<a>標(biāo)簽的href屬性與title屬性等等。一般情況下，大部分屬性節(jié)點(diǎn)都是隱藏在瀏覽器背后，并且是不可見(jiàn)的。屬性節(jié)點(diǎn)總是被包含于元素節(jié)點(diǎn)當(dāng)中。99.2DOM節(jié)點(diǎn)分類<atitle=“CSS”href=/isaacshun>isaac’sBlog</a>109.2DOM節(jié)點(diǎn)分類每個(gè)節(jié)點(diǎn)都擁有包含著關(guān)于節(jié)點(diǎn)某些信息的屬性。這些屬性是：nodeName（節(jié)點(diǎn)名稱）nodeValue（節(jié)點(diǎn)值）nodeType（節(jié)點(diǎn)類型）119.2DOM節(jié)點(diǎn)分類節(jié)點(diǎn)信息如下表所示：元素類型節(jié)點(diǎn)類型節(jié)點(diǎn)名稱節(jié)點(diǎn)值元素節(jié)點(diǎn)1標(biāo)簽名null屬性節(jié)點(diǎn)2屬性名屬性值文本節(jié)點(diǎn)3#text文本文檔節(jié)點(diǎn)9#documentnull129.3節(jié)點(diǎn)屬性與文本操作節(jié)點(diǎn)屬性操作getAttribute()查詢對(duì)象的屬性值setAttribute()設(shè)置對(duì)象的屬性值節(jié)點(diǎn)文本操作innerHTML表示某個(gè)標(biāo)記之間的所有內(nèi)容，包括HTML標(biāo)記該屬性可以讀取，同時(shí)還可以設(shè)置innerText獲取標(biāo)記中的文本信息，不包括標(biāo)記本身139.4DOM節(jié)點(diǎn)訪問(wèn)方法通過(guò)DOM，您可訪問(wèn)HTML文檔中的每個(gè)節(jié)點(diǎn)。1、通過(guò)使用document的3個(gè)方法getElementById()：通過(guò)ID名訪問(wèn)唯一元素getElementsByName()：通過(guò)name訪問(wèn)具有相同名稱的同一類元素getElementsByTagName()：通過(guò)標(biāo)簽名訪問(wèn)同一類標(biāo)簽

特點(diǎn)：可查找整個(gè)HTML文檔中的任何HTML元素，這些方法會(huì)忽略文檔的結(jié)構(gòu)149.4DOM節(jié)點(diǎn)訪問(wèn)方法實(shí)例：返回文檔中所有<p>元素的一個(gè)節(jié)點(diǎn)列表：varx=document.getElementsByTagName("p");變量x包含著頁(yè)面中所有<p>元素的一個(gè)列表，并且我們可以通過(guò)它們的索引號(hào)來(lái)訪問(wèn)這些<p>元素。注釋：索引號(hào)從0

開始?？梢酝ㄟ^(guò)使用length屬性來(lái)循環(huán)遍歷節(jié)點(diǎn)列表：for(vari=0;i<x.length;i++){ alert(x[i].innerText);

}159.4DOM節(jié)點(diǎn)訪問(wèn)方法2. 遍歷文檔樹通過(guò)使用一個(gè)元素節(jié)點(diǎn)的parentNode、firstChild以及l(fā)astChild屬性特點(diǎn)：遵循文檔的結(jié)構(gòu)，在文檔中進(jìn)行“短距離的旅行”。169.4DOM節(jié)點(diǎn)訪問(wèn)方法childNodes屬性(集合，用索引值0開始)從給定文檔的節(jié)點(diǎn)樹里把任何一個(gè)元素的所有子元素檢索出來(lái)，返回一個(gè)數(shù)組。firstChild和lastChild屬性返回第一個(gè)節(jié)點(diǎn)和最后一個(gè)節(jié)點(diǎn)，類似node.childNodes[0]和node.childNodes[node.childNodes.length-1]parentNode屬性返回目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)nextSibling屬性返回目標(biāo)節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)previousSibling屬性返回目標(biāo)節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)17ul中l(wèi)i子節(jié)點(diǎn)的兼容性問(wèn)題Ul中定義li時(shí)，如換行定義，瀏覽器會(huì)認(rèn)為中間的空行是文本信息，也會(huì)當(dāng)成ul的子節(jié)點(diǎn)來(lái)處理，如只處理ul中的li信息，兼容性寫法可以這樣來(lái)做：for(vari=0;i<oUl.childNodes.length;i++){ if(oUl.childNodes[i].nodeType==1){ oUl.childNodes[i].style.background=‘red’; }}for(vari=0;i<oUl.children.length;i++){ oUl.children[i].style.background=‘red’;

}也可以這樣處理：children只獲取元素節(jié)點(diǎn)，且是第一層的子節(jié)點(diǎn)189.5動(dòng)態(tài)創(chuàng)建HTML內(nèi)容createElement(“標(biāo)簽名”)創(chuàng)建一個(gè)元素節(jié)點(diǎn)（標(biāo)簽）createTextNode(“文本”)創(chuàng)建一個(gè)文本節(jié)點(diǎn)appendChild(創(chuàng)建的節(jié)點(diǎn))把新創(chuàng)建的節(jié)點(diǎn)插入某個(gè)文檔中removeChild(子節(jié)點(diǎn)名)刪除某一節(jié)點(diǎn)的子節(jié)點(diǎn)insertBefore(newNode,targetNode)將節(jié)點(diǎn)newNode作為當(dāng)前元素的子節(jié)點(diǎn)插入到targetNode子節(jié)點(diǎn)元素的前面replaceChild(newNode,oldNode)將節(jié)點(diǎn)oldNode替換為節(jié)點(diǎn)newNodecloneNode(true)復(fù)制當(dāng)前節(jié)點(diǎn)，true表示復(fù)制當(dāng)前節(jié)點(diǎn)以及它的所有子孫節(jié)點(diǎn)199.6DOMStyle對(duì)象Style對(duì)象Style對(duì)象代表一個(gè)單獨(dú)的樣式聲明。可從應(yīng)用樣式的文檔或元素訪問(wèn)Style對(duì)象。使用Style對(duì)象屬性的語(yǔ)法：20document.getElementById("id").perty="值"9.6DOMStyle對(duì)象Style對(duì)象的屬性：背景邊框和邊距布局列表定位表格文本滾動(dòng)條注：詳細(xì)用法參考w3school手冊(cè)21JavaScript改變字體樣式實(shí)現(xiàn)思路1、創(chuàng)建改變樣式的JavaScript代碼this.style.fontSize='24px'this.style.fontSize='14px‘2、利用鼠標(biāo)相關(guān)事件調(diào)用JavaScript代碼onMouseOver="this.style.fontSize='24px'“onMouseOut="this.style.fontSize='14px'"樣式表：font-size腳本代碼：fontSize使用了style屬性用事件來(lái)觸發(fā)9.6DOMStyle對(duì)象22請(qǐng)編寫如下圖所示，實(shí)現(xiàn)隨鼠標(biāo)移入改變邊框色的效果鼠標(biāo)移入邊框變成紅色JavaScript改變邊框樣式9.6DOMStyle對(duì)象23JavaScript改變圖片按鈕樣式如何實(shí)現(xiàn)如下圖所示，按鈕的圖片背景效果？鼠標(biāo)移入按鈕改變背景9.6DOMStyle對(duì)象24JavaScript改變圖片按鈕樣式我們除了可以用行內(nèi)樣式來(lái)改變圖片按鈕的樣式，也可以調(diào)用不同的內(nèi)嵌css樣式來(lái)改變圖片按鈕的樣式。實(shí)現(xiàn)思路：1、定義鼠標(biāo)移入和離開的兩個(gè)圖片按鈕的css類選擇器樣式2、然后用onmouseover和onmouseout調(diào)用不用的css樣式的名稱調(diào)用不同的css樣式名稱用：onmouseover=“this.className=‘css類選擇器名稱’”9.6DOMStyle對(duì)象25<STYLEtype="text/css">.mouseOverStyle{background-image:url(images/back2.jpg);color:#CC0099;border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;}.mouseOutStyle{background-image:url(images/back1.jpg);color:#0000FF;border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;}</STYLE>……<TR><TDheight="30"colSpan=2align=center><INPUTname=Buttontype="button"class="mouseOutStyle"value="登錄"onMouseOver="this.className='mouseOverStyle'"onMouseOut="this.className='mouseOutStyle'"></TD></TR>……實(shí)現(xiàn)代碼9.6DOMStyle對(duì)象26Style設(shè)置與className的區(qū)別這兩種方式存在著細(xì)微的差別，它們的區(qū)別在于：第一種方式通過(guò)style直接設(shè)置的樣式屬性是以行內(nèi)樣式的方式添加到這個(gè)元素上的；className方式指定的樣式是通過(guò)類別樣式添加到此元素上的，且它會(huì)覆蓋掉之前在這個(gè)元素上的類別樣式。279.7表單元素對(duì)象表單對(duì)象(Form)提供一個(gè)讓客戶端輸入文字或進(jìn)行選擇的功能，例如：?jiǎn)芜x按鈕、復(fù)選框、選擇列表等。由<FORM>標(biāo)記組構(gòu)成，JavaScript自動(dòng)建立一個(gè)表單對(duì)象，并將用戶端的信息送至服務(wù)器進(jìn)行處理。表單對(duì)象是文件對(duì)象(document)的子對(duì)象，同時(shí)，它也包含許多子對(duì)象。289.7表單元素對(duì)象form對(duì)象最主要的功能就是能夠直接訪問(wèn)HTML文檔中的form表單。一個(gè)web頁(yè)面可以有一個(gè)或多個(gè)from表單，使用document.forms數(shù)組對(duì)象可以訪問(wèn)到各表單。可以將<form>對(duì)象的屬性，來(lái)引用該表單字段元素所對(duì)應(yīng)的對(duì)象。document.forms[索引].屬性document.forms[索引].方法（參數(shù)）document.表單名稱.屬性document.表單名稱.方法（參數(shù)）299.7表單元素對(duì)象表單對(duì)象屬性：表單方法：reset()表單重置submit()表單提交action表單動(dòng)作elements以索引表示的所有表單元素encodingMIME的類型length表單元素的個(gè)數(shù)method方法name表單名稱309.7表單元素對(duì)象文本框事件onBlur文本框失去焦點(diǎn)onChange文本框的值被修改onFocus光標(biāo)進(jìn)入文本框中方法focus()獲得焦點(diǎn)，即獲得鼠標(biāo)光標(biāo)select()選中文本內(nèi)容，突出顯示輸入?yún)^(qū)域?qū)傩詒eadOnly

只讀，文本框中的內(nèi)容不能修改，屬性的取值為true或false

319.7表單元素對(duì)象單選按鈕事件onBlur單選按鈕失去焦點(diǎn)onFocus

單選按鈕獲得焦點(diǎn)onClick單選按鈕被選定或取消選定屬性checked單選按鈕是否被選中，選中為true，未選中為false。您可以使用此屬性查看單選按鈕的狀態(tài)或設(shè)置單選按鈕是否被選中value設(shè)置或獲取單選按鈕的值32制作全選效果實(shí)現(xiàn)思路：創(chuàng)建一組同名的復(fù)選框編寫腳本1、使用getElementsByName()方法獲得一組同名的復(fù)選框?qū)ο蟆?、通過(guò)循環(huán)來(lái)改變復(fù)選框是否被選中屬性checked的值。復(fù)選框選中屬性是checked若是把所有復(fù)選框的checked值逐個(gè)賦值為true，很麻煩，那我們?nèi)绾谓鉀Q呢？9.7表單元素對(duì)象33<SCRIPTlanguage="javascript">varallCheckBoxs=document.getElementsByName("isBuy");functioncheckAll(boolValue){for(vari=0;i<allCheckBoxs.length;i++){if(allCheckBoxs[i].type=="checkbox")

allCheckBoxs[i].checked=boolValue;}}functioncheckrev(){for(vari=0;i<allCheckBoxs.length;i++){

allCheckBoxs[i].checked=!(allCheckBoxs[i].checked);} }</SCRIPT>……<TR><TDwidth="6%"><Ahref="javascript:checkAll(true)">全選</TD><TDwidth="6%"><Ahref="javascript:checkAll(false)">全不選</A></TD><TDwidth=“6%”><Ahref=“javascript:checkrev()”>反選</A></TD></TR>獲取一組name相同的元素，保存為數(shù)組判斷是否是復(fù)選框元素全選效果代碼9.7表單元素對(duì)象通過(guò)取反符號(hào)，將選中狀態(tài)設(shè)為未選中，未選中設(shè)為選中349.7表單元素對(duì)象下拉列表框事件onBlur下拉列表框失去焦點(diǎn)onChange當(dāng)選項(xiàng)發(fā)生改變時(shí)產(chǎn)生onFocus下拉列表框獲得焦點(diǎn)屬性value下拉列表框中，被選選項(xiàng)的值options所有的選項(xiàng)組成一個(gè)數(shù)組，options表示整個(gè)選項(xiàng)數(shù)組，第一個(gè)選項(xiàng)即為options[0]，第二個(gè)即為options[1]，其他以此類推selectedIndex返回被選擇的選項(xiàng)的索引號(hào)，如果選中第一個(gè)返回0，第二個(gè)返回1，其他類推方法add(選項(xiàng)對(duì)象)添加一個(gè)列表項(xiàng)remove(索引)刪除一個(gè)列表項(xiàng)359.7表單元素對(duì)象<selectid=“selcity“onchange=“showcity();”>

<option>--請(qǐng)選擇開戶帳號(hào)的城市--</option><optionvalue="北京市">北京市</option><optionvalue="上海市">上海市</option><optionvalue="重慶市">重慶市</option><optionvalue="天津市">天津市</option><optionvalue="四川省">四川省</option><optionvalue="山東省">山東省</option><optionvalue="湖北省">湖北省</option></select>369.7表單元素對(duì)象<scriptlanguage=“javascript”>functionshowcity(){varselobj=document.getelementbyid(“selcity”);vari=selobj.selectedIndex;alert(“您選擇了”+selobj.options[i].value);}</script>操作代碼：37如果很多用戶將格式驗(yàn)證交給服務(wù)器端，那么服務(wù)器壓力會(huì)很大。所以我們要在客戶端先對(duì)用戶填寫的表單進(jìn)行格式驗(yàn)證，這樣大大減輕服務(wù)器的負(fù)擔(dān)。9.8表單驗(yàn)證我們?yōu)槭裁葱枰韱悟?yàn)證呢？服務(wù)器IE客戶端用戶輸入客戶端用戶輸入……客戶端用戶輸入……發(fā)送請(qǐng)求返回響應(yīng)發(fā)送請(qǐng)求返回響應(yīng)發(fā)送請(qǐng)求返回響應(yīng)38用戶名為郵箱，不能為空并且必須包含“@”和“.”9.8表單驗(yàn)證表單驗(yàn)證示例-139<scriptlanguage="javascript">functioncheckemail(){varstremail=document.myform.txtemail.value;if(stremail.length==0){alert("電子郵件不能為空!");returnfalse;}if(stremail.indexof("@",0)==-1){alert("電子郵件格式不正確\n必須包含@符號(hào)！");returnfalse;}if(stremail.indexof(".",0)==-1){alert("電子郵件格式不正確\n必須包含.符號(hào)！");returnfalse;}returntrue;}</script>……<formname=“myform”method=“post”action=“reg_success.htm”onsubmit=“returncheckemail()”><inputname="registerbutton"type="submit"id="registerbutton"value="注冊(cè)">……驗(yàn)證表單的方法，如果返回true則提交，放回false則不提交9.8表單驗(yàn)證表單驗(yàn)證示例-140表單驗(yàn)證示例-2用戶名不能為空用戶名不能包含數(shù)字密碼不能為空密碼不能少于6位9.8表單驗(yàn)證41表單驗(yàn)證示例-2<SCRIPTlanguage="JavaScript">functioncheckUserName(){//驗(yàn)證用戶名varfname=document.myform.txtUser.value;if(fname.length!=0){for(i=0;i<fname.length;i++){varftext=fname.substring(i,i+1);if(ftext<=‘9’&&ftext>=‘0’){ alert("名字中包含數(shù)字\n"+"請(qǐng)刪除名字中的數(shù)字和特殊字符"); returnfalse;}}}else{alert("請(qǐng)輸入“名字”文本框");document.myfo

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝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ù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 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)論