Web 前端開(kāi)發(fā)技術(shù) 教案 項(xiàng)目九 JavaScript 對(duì)象_第1頁(yè)
Web 前端開(kāi)發(fā)技術(shù) 教案 項(xiàng)目九 JavaScript 對(duì)象_第2頁(yè)
Web 前端開(kāi)發(fā)技術(shù) 教案 項(xiàng)目九 JavaScript 對(duì)象_第3頁(yè)
Web 前端開(kāi)發(fā)技術(shù) 教案 項(xiàng)目九 JavaScript 對(duì)象_第4頁(yè)
Web 前端開(kāi)發(fā)技術(shù) 教案 項(xiàng)目九 JavaScript 對(duì)象_第5頁(yè)
已閱讀5頁(yè),還剩9頁(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)介

Web前端開(kāi)發(fā)技術(shù)教案設(shè)計(jì)項(xiàng)目課題JavaScript對(duì)象授課時(shí)間授課對(duì)象大學(xué)生學(xué)習(xí)目標(biāo)1.掌握對(duì)象創(chuàng)建和訪問(wèn)的方法。2.掌握各內(nèi)置對(duì)象的屬性和方法。3.掌握DOM和BOM中各對(duì)象的常用屬性和方法。學(xué)習(xí)重點(diǎn)掌握各內(nèi)置對(duì)象的屬性和方法。學(xué)習(xí)難點(diǎn)掌握DOM和BOM中各對(duì)象的常用屬性和方法。教學(xué)方法講授法、課堂演示法教學(xué)用具多媒體課件教學(xué)流程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)過(guò)程任務(wù)一對(duì)象概念對(duì)象是一種復(fù)合的數(shù)據(jù)類型,包括屬性和方法兩個(gè)基本要素。屬性實(shí)現(xiàn)對(duì)象相關(guān)信息的存儲(chǔ),一般與變量相關(guān)聯(lián);方法實(shí)現(xiàn)對(duì)象的特定操作,一般與函數(shù)代碼相關(guān)聯(lián)。JavaScript支持基于對(duì)象的編程。JavaScript中包括內(nèi)置對(duì)象和宿主對(duì)象。內(nèi)置對(duì)象是ECMAScript標(biāo)準(zhǔn)中定義的類型;宿主對(duì)象是機(jī)器環(huán)境提供的類型,包括DOM(DocumentObjectModel,文檔對(duì)象模型)和BOM(BrowserObjectModel,瀏覽器對(duì)象模型)。用戶也可以創(chuàng)建自定義對(duì)象。對(duì)象是一種抽象的數(shù)據(jù)類型。一般需要先創(chuàng)建對(duì)象實(shí)例,再訪問(wèn)對(duì)象實(shí)例的屬性和方法。但JavaScript中有少數(shù)內(nèi)置對(duì)象,不需要?jiǎng)?chuàng)建實(shí)例即可直接訪問(wèn)對(duì)象的屬性。一、創(chuàng)建對(duì)象實(shí)例在JavaScript中,創(chuàng)建對(duì)象實(shí)例的方法有以下3種。1.創(chuàng)建Object對(duì)象的實(shí)例Object是系統(tǒng)內(nèi)置對(duì)象,可以使用new運(yùn)算符創(chuàng)建Object對(duì)象的實(shí)例,其基本語(yǔ)法格式如下。Var對(duì)象實(shí)例名=newObject();2.創(chuàng)建已有對(duì)象的實(shí)例JavaScript中有許多內(nèi)置對(duì)象,用戶可以先創(chuàng)建自定義類型的對(duì)象,然后使用new運(yùn)算符創(chuàng)建對(duì)象的實(shí)例,其基本語(yǔ)法格式如下。var對(duì)象實(shí)例名=new已有對(duì)象名();3.采用列表賦值創(chuàng)建對(duì)象的實(shí)例直接采用列表賦值的方式創(chuàng)建自定義對(duì)象的實(shí)例,并設(shè)置對(duì)象實(shí)例的屬性、屬性值、方法和方法函數(shù),其基本語(yǔ)法格式如下。var對(duì)象實(shí)例名={屬性:屬性值,……方法:方法函數(shù),……}二、對(duì)象實(shí)例的屬性創(chuàng)建對(duì)象實(shí)例后,可以訪問(wèn)對(duì)象實(shí)例的屬性,包括設(shè)置和引用屬性值。對(duì)象實(shí)例的屬性具有屬性下標(biāo)和屬性名。訪問(wèn)對(duì)象實(shí)例的屬性有3種形式,其基本語(yǔ)法格式如下。對(duì)象實(shí)例名.屬性名對(duì)象實(shí)例名[屬性下標(biāo)]對(duì)象實(shí)例名["屬性名"]三、對(duì)象實(shí)例的方法創(chuàng)建對(duì)象實(shí)例后,可以訪問(wèn)對(duì)象實(shí)例的方法,包括設(shè)置方法的函數(shù)和運(yùn)行方法。1.設(shè)置對(duì)象實(shí)例的方法設(shè)置對(duì)象實(shí)例的方法有兩種,一種是在創(chuàng)建對(duì)象實(shí)例時(shí)設(shè)置,另一種是在對(duì)象實(shí)例創(chuàng)建完成后通過(guò)賦值設(shè)置,其基本語(yǔ)法格式如下。var對(duì)象實(shí)例名={……方法:函數(shù),……}或者對(duì)象實(shí)例名.方法名=函數(shù);2.運(yùn)行對(duì)象實(shí)例的方法運(yùn)行對(duì)象實(shí)例的方法實(shí)質(zhì)上是關(guān)聯(lián)了一個(gè)函數(shù)代碼,它同調(diào)用函數(shù)一樣,其基本語(yǔ)法格式如下。對(duì)象實(shí)例名.方法名(參數(shù));四、with語(yǔ)句圍當(dāng)多次訪問(wèn)對(duì)象實(shí)例的屬性和方法時(shí),需要重復(fù)引用對(duì)象實(shí)例名,語(yǔ)句會(huì)比較煩瑣。因此,可以用with語(yǔ)句,修改語(yǔ)句的作用域,減少大量重復(fù)的輸入,其基本語(yǔ)法格式如下。with(對(duì)象實(shí)例名){語(yǔ)法塊;}五、this關(guān)鍵字在JavaScript中,由于對(duì)象實(shí)例的引用是多層次的,容易造成混亂,因此可以采用this關(guān)鍵字表示當(dāng)前的對(duì)象實(shí)例。例如,下面的語(yǔ)句表示在定義對(duì)象實(shí)例student時(shí),用this.age表示引用當(dāng)前對(duì)象實(shí)例student的age屬性。varstudent={age:"12",show:function(){returnthis.age;}}任務(wù)二內(nèi)置對(duì)象一、Global對(duì)象Global對(duì)象又稱為全局對(duì)象,其包含的屬性和方法可以應(yīng)用于所有JavaScript內(nèi)置對(duì)象。1.Global對(duì)象的常用屬性在Global對(duì)象的屬性中,Infinity表示正無(wú)窮大;-Infinity表示負(fù)無(wú)窮大;NaN表示非數(shù)值;undefined表示未聲明或未賦值的變量。2.Global對(duì)象的常用方法二、Web相關(guān)概念RegExp對(duì)象是正則表達(dá)式對(duì)象,用于生成描述字符串匹配規(guī)則的正則表達(dá)式。正則表達(dá)式的語(yǔ)法包括匹配模式和搜索模式兩部分,其基本語(yǔ)法格式如下。NewRegExp(匹配模式,搜索模式)或簡(jiǎn)寫為:/匹配模式/搜索模式1.匹配模式2.搜索模式搜索模式有g(shù)和i兩個(gè)可選值。g表示全局搜索,搜索時(shí)將匹配所有符合條件的部分;i表示匹配時(shí)忽略大小寫,若未設(shè)置則默認(rèn)大小寫敏感。3.RegExp對(duì)象的方法RegExp對(duì)象實(shí)例創(chuàng)建完成后,有兩種方法用于檢索文本。三、Array(數(shù)組)對(duì)象數(shù)組對(duì)象用來(lái)存儲(chǔ)一系列的值。數(shù)組中的每個(gè)值稱為數(shù)組的元素,在數(shù)組中的序號(hào)稱為元素下標(biāo)。在JavaScript數(shù)組中,每個(gè)元素的類型可以不一樣。1.創(chuàng)建數(shù)組對(duì)象實(shí)例在JavaScript中,創(chuàng)建數(shù)組對(duì)象實(shí)例的方法有多種,其基本語(yǔ)法格式如下。var數(shù)組名=newArray();//創(chuàng)建空數(shù)組var數(shù)組名=newArray(逗號(hào)分隔的數(shù)據(jù)列表);//根據(jù)數(shù)據(jù)列表值創(chuàng)建數(shù)組var數(shù)組名=newArray(元素個(gè)數(shù));//創(chuàng)建空數(shù)組,數(shù)組長(zhǎng)度等于元素個(gè)數(shù)var數(shù)組名=[數(shù)據(jù)列表];//直接根據(jù)數(shù)據(jù)列表創(chuàng)建數(shù)組2.訪問(wèn)數(shù)組對(duì)象元素?cái)?shù)組元素下標(biāo)從0開(kāi)始編號(hào)。訪問(wèn)數(shù)組對(duì)象實(shí)例中的某個(gè)元素,可以采用數(shù)組對(duì)象實(shí)例名[下標(biāo)]的形式。訪問(wèn)數(shù)組對(duì)象實(shí)例名表示訪問(wèn)數(shù)組對(duì)象實(shí)例中的所有元素。3.數(shù)組對(duì)象的常用屬性length是數(shù)組對(duì)象的常用屬性,表示數(shù)組元素的個(gè)數(shù)。4.數(shù)組對(duì)象的常用方法數(shù)組對(duì)象的方法實(shí)現(xiàn)對(duì)數(shù)組的操作。四、String對(duì)象String對(duì)象包括字符串處理的屬性和方法。這些屬性和方法是字符串對(duì)象實(shí)例的屬性和方法,所以要用字符串對(duì)象實(shí)例名訪問(wèn)。1.String對(duì)象的常用屬性length屬性用于獲取String對(duì)象實(shí)例中字符的個(gè)數(shù)。例如,下面的語(yǔ)句表示定義字符串對(duì)象實(shí)例變量x,通過(guò)length屬性獲得變量x的長(zhǎng)度,賦值給變量y。varx="abc";y=x.length;2.String對(duì)象的常用方法String對(duì)象中有大量操作字符串的方法。五、Math對(duì)象Math對(duì)象包括數(shù)學(xué)運(yùn)算的屬性和方法。1.Math對(duì)象的常用屬性訪問(wèn)Math對(duì)象的屬性不需要?jiǎng)?chuàng)建對(duì)象實(shí)例,可以直接用對(duì)象名Math訪問(wèn)。Math對(duì)象的屬性是數(shù)學(xué)運(yùn)算中的一些常量。2.Math對(duì)象的常用方法訪問(wèn)Math對(duì)象的方法不需要?jiǎng)?chuàng)建對(duì)象實(shí)例,可以直接用對(duì)象名Math訪問(wèn)。Math對(duì)象的方法是一些數(shù)學(xué)運(yùn)算。六、Date對(duì)象Date對(duì)象處理與日期、時(shí)間有關(guān)的內(nèi)容。1.創(chuàng)建Date對(duì)象實(shí)例有4種方法可以創(chuàng)建Date對(duì)象實(shí)例,其基本語(yǔ)法格式如下。對(duì)象實(shí)例名=newDate();對(duì)象實(shí)例名=newDate(毫秒數(shù));對(duì)象實(shí)例名=newDate(日期時(shí)間字符串);對(duì)象實(shí)例名=newDate(年,月,日,時(shí),分,秒,毫秒);2.Date對(duì)象的常用方法任務(wù)三DOM和BOM一、文檔對(duì)象模型DOMdocument對(duì)象是JavaScript中最為常用的對(duì)象之一,在瀏覽器對(duì)象模型中,它位于Window對(duì)象的下一層級(jí)。document對(duì)象包含一些簡(jiǎn)單的屬性,這些屬性提供了有關(guān)瀏覽器中顯示文檔的相關(guān)信息,如該文檔的URL、文本顏色、修改日期等。另外,document對(duì)象還包含一些引用數(shù)組的屬性,這些屬性可以代表文檔中的表單、圖像、鏈接、錨和小程序。同其他對(duì)象一樣,document對(duì)象還定義了一系列的方法,使用這些方法,可以使JavaScript在解析文檔時(shí)動(dòng)態(tài)地將HTML文本添加到文檔中。HTMLDOM是HTML文檔對(duì)象模型的縮寫。根據(jù)W3CDOM規(guī)范,DOM是一種與瀏覽器、平臺(tái)、語(yǔ)言無(wú)關(guān)的接口,使用戶可以訪問(wèn)頁(yè)面中其他的標(biāo)準(zhǔn)組件。DOM與JavaScript的結(jié)合實(shí)現(xiàn)了Web網(wǎng)頁(yè)的行為與結(jié)構(gòu)分離。簡(jiǎn)單來(lái)說(shuō),DOM解決了Netscape的JavaScript和Microsoft的JavaScript之間的沖突,為Web設(shè)計(jì)師和開(kāi)發(fā)者提供了一個(gè)處理HTML文檔的標(biāo)準(zhǔn)方法,方便他們?cè)L問(wèn)站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象。1.DOM節(jié)點(diǎn)樹HTMLDOM定義了訪問(wèn)和操作HTML文檔的標(biāo)準(zhǔn)方法。HTML文檔結(jié)構(gòu)像一棵倒置的樹,其中,<html>標(biāo)記就是樹的根節(jié)點(diǎn),<head>和<body>標(biāo)記是樹的兩個(gè)子節(jié)點(diǎn)。這種描述頁(yè)面標(biāo)記關(guān)系的樹形結(jié)構(gòu)稱為DOM節(jié)點(diǎn)樹(文檔樹)。2.DOM節(jié)點(diǎn)根據(jù)W3CDOM規(guī)范,HTML文檔中的所有內(nèi)容都是節(jié)點(diǎn)。具體的規(guī)定如下:(1)整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)。(2)每個(gè)HTML元素是一個(gè)元素節(jié)點(diǎn)。(3)HTML元素中的文本是文本節(jié)點(diǎn)。(4)每個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn)。(5)注釋是注釋節(jié)點(diǎn)。通過(guò)document對(duì)象的documentElement屬性可以獲取整個(gè)DOM節(jié)點(diǎn)樹上的任何一個(gè)元素。通過(guò)節(jié)點(diǎn)的firstChild、lastChild屬性可以獲取它的第一個(gè)和最后一個(gè)子節(jié)點(diǎn)。DOM規(guī)定,一個(gè)頁(yè)面內(nèi)只有一個(gè)根節(jié)點(diǎn),根節(jié)點(diǎn)是沒(méi)有父節(jié)點(diǎn)的,除根節(jié)點(diǎn)之外,其他節(jié)點(diǎn)都可以通過(guò)parentNode屬性來(lái)獲取自己的父節(jié)點(diǎn)。同一父節(jié)點(diǎn)下位于同一層次的節(jié)點(diǎn)稱為兄弟節(jié)點(diǎn),一個(gè)子節(jié)點(diǎn)的前一個(gè)節(jié)點(diǎn)可以通過(guò)previousSibling屬性來(lái)獲取,后一個(gè)節(jié)點(diǎn)可以通過(guò)nextSibling屬性來(lái)獲取。由于不同節(jié)點(diǎn)對(duì)應(yīng)的HTML元素不同,因此節(jié)點(diǎn)有不同類型。節(jié)點(diǎn)樹中的每個(gè)節(jié)點(diǎn)對(duì)象都有nodeType屬性,該屬性返回節(jié)點(diǎn)的類型。常用的節(jié)點(diǎn)類型及說(shuō)明如表9-9所示。從表9-9中可以看出,如果某個(gè)節(jié)點(diǎn)的nodeType值為9,則說(shuō)明該節(jié)點(diǎn)的類型為document;如果某個(gè)節(jié)點(diǎn)的nodeType值為1,則說(shuō)明該節(jié)點(diǎn)的類型為element。不同類型的節(jié)點(diǎn)還可以包含其他類型的節(jié)點(diǎn),相互連接在一起就構(gòu)成了一個(gè)完整的樹形結(jié)構(gòu)。對(duì)于大多數(shù)HTML文檔來(lái)說(shuō),元素節(jié)點(diǎn)、文本節(jié)點(diǎn)及屬性節(jié)點(diǎn)是必不可少的。(1)元素節(jié)點(diǎn)。元素節(jié)點(diǎn)(ElementNode)構(gòu)成了DOM基礎(chǔ)。在文檔結(jié)構(gòu)中,<html><head><body><h1><p>和<ul>等標(biāo)記都是元素節(jié)點(diǎn)。各種標(biāo)記提供了元素的名稱,如文本段落元素的名稱是p,無(wú)序列表元素的名稱是ul等。元素可以包含其他元素,也可以被其他元素包含。(2)文本節(jié)點(diǎn)。元素節(jié)點(diǎn)只是節(jié)點(diǎn)樹中的一種類型,如果文檔完全由元素組成,那么這份文檔本身將不包含任何信息,因此文檔結(jié)構(gòu)也就失去了存在的價(jià)值。在HTML文檔中,文本節(jié)點(diǎn)(TextNode)包含在元素節(jié)點(diǎn)內(nèi),如h1、p、li等元素就可以包含一些文本節(jié)點(diǎn)。(3)屬性節(jié)點(diǎn)。元素一般都會(huì)包含一些屬性,屬性的作用是對(duì)元素做出更具體的描述。在編寫HTML代碼時(shí),在HTML標(biāo)簽中添加的屬性就是屬性節(jié)點(diǎn)(AttributeNode)。一般元素都有title屬性,該屬性能夠詳細(xì)地描述或說(shuō)明元素,以便用戶了解該元素的用途、作用或功能。3.DOM節(jié)點(diǎn)訪問(wèn)訪問(wèn)節(jié)點(diǎn)的方式有很多種,既可以通過(guò)document對(duì)象的方法來(lái)訪問(wèn)節(jié)點(diǎn),也可以通過(guò)元素節(jié)點(diǎn)的屬性來(lái)訪問(wèn)節(jié)點(diǎn)。如果要對(duì)例9-9中的用戶名文本框、密碼框及郵箱地址文本框進(jìn)行訪問(wèn),則可以通過(guò)以下4種方式進(jìn)行。(1)通過(guò)getElementById()方法訪問(wèn)節(jié)點(diǎn)。document對(duì)象的getElementById()方法可以訪問(wèn)頁(yè)面中的節(jié)點(diǎn),該方法在使用時(shí),必須指定一個(gè)目標(biāo)元素的id作為參數(shù)。①基本語(yǔ)法。vars=document.getElementById(id);//調(diào)用時(shí)參數(shù)需要加雙引號(hào)在使用該方法時(shí)需要注意以下兩點(diǎn)?!駃d為必選項(xiàng),對(duì)應(yīng)頁(yè)面元素屬性id的屬性值,為字符串型的數(shù)據(jù)。在頁(yè)面設(shè)計(jì)時(shí)最好給每一個(gè)需要交互的元素設(shè)定一個(gè)唯一的id,以便快速查找。●該方法返回的是一個(gè)頁(yè)面元素的引用,如果頁(yè)面上出現(xiàn)了不同元素使用同一個(gè)id的情況,則返回第一個(gè)找到的頁(yè)面元素;如果給定的id沒(méi)有找到對(duì)應(yīng)的元素,則返回null。(2)通過(guò)getElementsByName()方法訪問(wèn)節(jié)點(diǎn)。除了可以通過(guò)元素的id獲取對(duì)象,還可以通過(guò)元素的名字來(lái)訪問(wèn)。①基本語(yǔ)法。vars=document.getElementsByName(name);//調(diào)用時(shí)參數(shù)需要加雙引號(hào)在使用該方法時(shí)需要注意以下兩點(diǎn)。●name為必選項(xiàng),對(duì)應(yīng)頁(yè)面元素屬性name的屬性值,為字符串型的數(shù)據(jù)。該方法調(diào)用時(shí)返回的是一個(gè)數(shù)組,即使對(duì)應(yīng)該名字的元素只有一個(gè)?!袢绻付衷陧?yè)面中沒(méi)有相應(yīng)的元素存在,則返回一個(gè)長(zhǎng)度為0的數(shù)組,程序中可以通過(guò)判斷數(shù)組的length屬性值是否為0來(lái)判斷是否找到了相應(yīng)的元素。(3)通過(guò)getElementsByTagName()方法訪問(wèn)節(jié)點(diǎn)。除了可以通過(guò)元素的id和name獲取對(duì)應(yīng)的元素,還可以通過(guò)標(biāo)記名稱來(lái)獲取頁(yè)面上所有同類的元素,如表單中的所有input元素。①基本語(yǔ)法。vars=document.getElementsByTagName(tagname);//調(diào)用時(shí)參數(shù)需要加雙引號(hào)在使用該方法時(shí)需要注意以下兩點(diǎn)?!駎agname為必選項(xiàng),對(duì)應(yīng)頁(yè)面元素的類型,為字符串型的數(shù)據(jù)。該方法調(diào)用時(shí)返回的是一個(gè)數(shù)組,即使頁(yè)面中對(duì)應(yīng)該類型的元素只有一個(gè)。●通過(guò)數(shù)組的length屬性值來(lái)獲取頁(yè)面上該類型元素的總數(shù)。(4)通過(guò)form元素訪問(wèn)節(jié)點(diǎn)。如果要獲取頁(yè)面中的form對(duì)象,那么除了通過(guò)getElementById()、getElementsByName()方法,還可以通過(guò)document對(duì)象的forms屬性來(lái)獲取這個(gè)form對(duì)象。表單是用戶與網(wǎng)頁(yè)進(jìn)行交互的重要手段,通過(guò)表單可以一次性獲取表單中大量元素的信息。獲取例9-9文檔中form對(duì)象的方法如下。varmyform=document.forms;//通過(guò)document對(duì)象的forms屬性來(lái)獲得數(shù)組對(duì)象varmyloginform=myform[0];//獲取數(shù)組中的第一個(gè)form對(duì)象當(dāng)然,也可以通過(guò)form對(duì)象的name屬性來(lái)訪問(wèn)頁(yè)面中的form對(duì)象,格式如下。varmyform=document.loginform;//loginform為form對(duì)象的名稱獲取form對(duì)象之后,如果要得到form對(duì)象包含的其他元素,則可以通過(guò)form對(duì)象的elements屬性或name屬性來(lái)獲取。4.DOM節(jié)點(diǎn)操作前面介紹如何訪問(wèn)文檔中的不同節(jié)點(diǎn),只是使用DOM所能實(shí)現(xiàn)的功能中的一小部分。DOM的應(yīng)用非常廣泛,如可以通過(guò)document對(duì)象實(shí)現(xiàn)表格的動(dòng)態(tài)添加和刪除,也可以通過(guò)document對(duì)象替換文本節(jié)點(diǎn)的內(nèi)容等。(1)創(chuàng)建和修改節(jié)點(diǎn)。document對(duì)象有很多創(chuàng)建和修改不同類型節(jié)點(diǎn)的方法,其常用方法及說(shuō)明如表9-10所示。假設(shè)要在一個(gè)HTML頁(yè)面中添加一個(gè)p節(jié)點(diǎn),p節(jié)點(diǎn)內(nèi)的文本內(nèi)容是“HelloWorld!”那么可以利用createElement()、createTextNode()及appendChild()方法來(lái)實(shí)現(xiàn)。除了添加一個(gè)節(jié)點(diǎn),也可以利用removeChild()、insertBefore()及replaceChild()方法刪除、插入和替換節(jié)點(diǎn)。(2)節(jié)點(diǎn)的innerText和innerHTML屬性。在DOM中,有兩個(gè)很重要的屬性,分別是innerText和innerHTML,利用這兩個(gè)屬性可以更方便地進(jìn)行文檔操作。innerText屬性用來(lái)修改起始標(biāo)記和結(jié)束標(biāo)記之間的文本。例如,有一個(gè)空的div節(jié)點(diǎn),如果希望在該div節(jié)點(diǎn)中設(shè)置文本內(nèi)容為“中國(guó)你好!”則可以編寫如下代碼。oDiv.appendChild(document.createTextNode("中國(guó)你好!"));如果使用innerText屬性,則可以編寫如下代碼。oDiv.innerText="中國(guó)你好!";使用innerText屬性的代碼更加簡(jiǎn)潔,且更容易理解。另外,由于innerText會(huì)自動(dòng)將小于號(hào)、大于號(hào)、引號(hào)和連接符號(hào)進(jìn)行編碼,因此不需要擔(dān)心這些特殊字符。innerHTML屬性可以直接給元素分配字符串,而不需要考慮使用DOM的方法來(lái)創(chuàng)建元素。例如,若要為空的div節(jié)點(diǎn)創(chuàng)建strong子節(jié)點(diǎn),則使用DOM方法創(chuàng)建的代碼如下。varstrong1=document.createElement("strong");varotext=document.createTextNode("helloworld!");strongl.appendChild(otext);oDiv.appendchild(strongl);如果使用innerHTML屬性,則代碼變成:oDiv.innerHTML="<strong>helloworld!</strong>";還可以使用innerText屬性和innerHTML屬性獲取元素的內(nèi)容。如果元素只包含文本,則innerText和innerHTML將返回相同的值;如果元素同時(shí)包含文本和其他元素,則innerText將只返回文本的內(nèi)容,而innerHTML將返回所有元素和文本的HTML代碼。二、瀏覽器對(duì)象模型BOM瀏覽器對(duì)象模型是用于描述對(duì)象與對(duì)象之間層次關(guān)系的模型,瀏覽器對(duì)象模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu)。BOM由多個(gè)對(duì)象組成,其中代表瀏覽器窗口的Window對(duì)象是BOM的頂層對(duì)象,其他對(duì)象都是該對(duì)象的子對(duì)象。IE3.0和NetscapeNavigator3.0瀏覽器提供了瀏覽器對(duì)象模型特性,可以對(duì)瀏覽器窗口進(jìn)行訪問(wèn)和操作。開(kāi)發(fā)者可以使用BOM移動(dòng)窗口、改變狀態(tài)欄中的文本,以及執(zhí)行其他與頁(yè)面內(nèi)容不直接相關(guān)的操作。由于沒(méi)有相關(guān)的BOM標(biāo)準(zhǔn),因此每種瀏覽器都有各自的BOM實(shí)現(xiàn)方法。常見(jiàn)的BOM對(duì)象有Window對(duì)象、Screen對(duì)象、Location對(duì)象、History對(duì)象和Navigator對(duì)象。1.Window對(duì)象Window對(duì)象用來(lái)描述瀏覽器窗口的相關(guān)信息。Window對(duì)象是客戶端的全局對(duì)象,是客

溫馨提示

  • 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)論