Web 前端開發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項(xiàng)目九　 JavaScript 對(duì)象

JavaScript對(duì)象Web前端開發(fā)技術(shù)篇3：JavaScript技術(shù)

本項(xiàng)目介紹JavaScript對(duì)象的創(chuàng)建和訪問、內(nèi)置對(duì)象、DOM和BOM的常用屬性和方法。通過使用和掌握J(rèn)avaScript對(duì)象的相關(guān)屬性,使學(xué)生明白基礎(chǔ)的重要性,只有基礎(chǔ)扎實(shí),才能挑戰(zhàn)未來的難題,才能實(shí)現(xiàn)競(jìng)進(jìn)有為、行穩(wěn)致遠(yuǎn)的目標(biāo)。學(xué)生在踏實(shí)中學(xué)真知,在細(xì)節(jié)處求真理,一步一個(gè)腳印,方能在今后的學(xué)習(xí)、工作中熟練運(yùn)用所學(xué)的知識(shí)和技術(shù)。序言目錄CONTENTS對(duì)象概念內(nèi)置對(duì)象DOM和BOM01020301對(duì)象概念Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.對(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(Document

ObjectModel,文檔對(duì)象模型)和BOM(BrowserObjectModel,瀏覽器對(duì)象模型)。用戶也可以創(chuàng)建自定義對(duì)象。對(duì)象是一種抽象的數(shù)據(jù)類型。一般需要先創(chuàng)建對(duì)象實(shí)例,再訪問對(duì)象實(shí)例的屬性和方法。但JavaScript中有少數(shù)內(nèi)置對(duì)象,不需要?jiǎng)?chuàng)建實(shí)例即可直接訪問對(duì)象的屬性。對(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í)例,其基本語法格式如下。Var對(duì)象實(shí)例名=newObject();2.創(chuàng)建已有對(duì)象的實(shí)例JavaScript中有許多內(nèi)置對(duì)象,用戶可以先創(chuàng)建自定義類型的對(duì)象,然后使用new運(yùn)算符創(chuàng)建對(duì)象的實(shí)例,其基本語法格式如下。var對(duì)象實(shí)例名=new已有對(duì)象名();對(duì)象概念創(chuàng)建對(duì)象實(shí)例3.采用列表賦值創(chuàng)建對(duì)象的實(shí)例直接采用列表賦值的方式創(chuàng)建自定義對(duì)象的實(shí)例,并設(shè)置對(duì)象實(shí)例的屬性、屬性值、方法和方法函數(shù),其基本語法格式如下。var對(duì)象實(shí)例名={屬性:屬性值,……方法:方法函數(shù),……}對(duì)象概念對(duì)象實(shí)例的屬性創(chuàng)建對(duì)象實(shí)例后,可以訪問對(duì)象實(shí)例的屬性,包括設(shè)置和引用屬性值。對(duì)象實(shí)例的屬性具有屬性下標(biāo)和屬性名。訪問對(duì)象實(shí)例的屬性有3種形式,其基本語法格式如下。對(duì)象實(shí)例名.屬性名對(duì)象實(shí)例名[屬性下標(biāo)]對(duì)象實(shí)例名["屬性名"]對(duì)象概念對(duì)象實(shí)例的方法創(chuàng)建對(duì)象實(shí)例后,可以訪問對(duì)象實(shí)例的方法,包括設(shè)置方法的函數(shù)和運(yùn)行方法。1.設(shè)置對(duì)象實(shí)例的方法設(shè)置對(duì)象實(shí)例的方法有兩種,一種是在創(chuàng)建對(duì)象實(shí)例時(shí)設(shè)置,另一種是在對(duì)象實(shí)例創(chuàng)建完成后通過賦值設(shè)置,其基本語法格式如下。var對(duì)象實(shí)例名={……方法:函數(shù),對(duì)象概念對(duì)象實(shí)例的方法……}或者對(duì)象實(shí)例名.方法名=函數(shù);2.運(yùn)行對(duì)象實(shí)例的方法運(yùn)行對(duì)象實(shí)例的方法實(shí)質(zhì)上是關(guān)聯(lián)了一個(gè)函數(shù)代碼,它同調(diào)用函數(shù)一樣,其基本語法格式如下。對(duì)象實(shí)例名.方法名(參數(shù));對(duì)象概念圍當(dāng)多次訪問對(duì)象實(shí)例的屬性和方法時(shí),需要重復(fù)引用對(duì)象實(shí)例名,語句會(huì)比較煩瑣。因此,可以用with語句,修改語句的作用域,減少大量重復(fù)的輸入,其基本語法格式如下。with(對(duì)象實(shí)例名){語法塊;}

with語句在JavaScript中,由于對(duì)象實(shí)例的引用是多層次的,容易造成混亂,因此可以采用this關(guān)鍵字表示當(dāng)前的對(duì)象實(shí)例。例如,下面的語句表示在定義對(duì)象實(shí)例student時(shí),用this.age表示引用當(dāng)前對(duì)象實(shí)例student的age屬性。varstudent={age:"12",show:function(){returnthis.age;}}this關(guān)鍵字對(duì)象概念02內(nèi)置對(duì)象Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.Global對(duì)象Global對(duì)象又稱為全局對(duì)象,其包含的屬性和方法可以應(yīng)用于所有JavaScript內(nèi)置對(duì)象。1.Global對(duì)象的常用屬性在Global對(duì)象的屬性中,Infinity表示正無窮大;-Infinity表示負(fù)無窮大;NaN表示非數(shù)值;undefined表示未聲明或未賦值的變量。2.Global對(duì)象的常用方法Global對(duì)象的常用方法及說明如表9-1所示。內(nèi)置對(duì)象Web相關(guān)概念RegExp對(duì)象是正則表達(dá)式對(duì)象,用于生成描述字符串匹配規(guī)則的正則表達(dá)式。正則表達(dá)式的語法包括匹配模式和搜索模式兩部分,其基本語法格式如下。NewRegExp(匹配模式,搜索模式)或簡寫為:/匹配模式/搜索模式1.匹配模式正則表達(dá)式的常用匹配模式如表9-2所示。內(nèi)置對(duì)象Web相關(guān)概念內(nèi)置對(duì)象Web相關(guān)概念內(nèi)置對(duì)象Web相關(guān)概念內(nèi)置對(duì)象Web相關(guān)概念2.搜索模式搜索模式有g(shù)和i兩個(gè)可選值。g表示全局搜索,搜索時(shí)將匹配所有符合條件的部分;i表示匹配時(shí)忽略大小寫,若未設(shè)置則默認(rèn)大小寫敏感。3.RegExp對(duì)象的方法RegExp對(duì)象實(shí)例創(chuàng)建完成后,有兩種方法用于檢索文本。RegExp對(duì)象的常用方法及說明如表9-3所示。內(nèi)置對(duì)象件采購匯總表內(nèi)置對(duì)象Array(數(shù)組)對(duì)象數(shù)組對(duì)象用來存儲(chǔ)一系列的值。數(shù)組中的每個(gè)值稱為數(shù)組的元素,在數(shù)組中的序號(hào)稱為元素下標(biāo)。在JavaScript數(shù)組中,每個(gè)元素的類型可以不一樣。1.創(chuàng)建數(shù)組對(duì)象實(shí)例在JavaScript中,創(chuàng)建數(shù)組對(duì)象實(shí)例的方法有多種,其基本語法格式如下。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ù)組長度等于元素個(gè)數(shù)var數(shù)組名=[數(shù)據(jù)列表];//直接根據(jù)數(shù)據(jù)列表創(chuàng)建數(shù)組件采購匯總表內(nèi)置對(duì)象Array(數(shù)組)對(duì)象2.訪問數(shù)組對(duì)象元素?cái)?shù)組元素下標(biāo)從0開始編號(hào)。訪問數(shù)組對(duì)象實(shí)例中的某個(gè)元素,可以采用數(shù)組對(duì)象實(shí)例名[下標(biāo)]的形式。訪問數(shù)組對(duì)象實(shí)例名表示訪問數(shù)組對(duì)象實(shí)例中的所有元素。3.數(shù)組對(duì)象的常用屬性length是數(shù)組對(duì)象的常用屬性,表示數(shù)組元素的個(gè)數(shù)。4.數(shù)組對(duì)象的常用方法數(shù)組對(duì)象的方法實(shí)現(xiàn)對(duì)數(shù)組的操作。數(shù)組對(duì)象的常用方法及說明如表9-4所示。件采購匯總表內(nèi)置對(duì)象Array(數(shù)組)對(duì)象件采購匯總表內(nèi)置對(duì)象Array(數(shù)組)對(duì)象String對(duì)象String對(duì)象包括字符串處理的屬性和方法。這些屬性和方法是字符串對(duì)象實(shí)例的屬性和方法,所以要用字符串對(duì)象實(shí)例名訪問。1.String對(duì)象的常用屬性length屬性用于獲取String對(duì)象實(shí)例中字符的個(gè)數(shù)。例如,下面的語句表示定義字符串對(duì)象實(shí)例變量x,通過length屬性獲得變量x的長度,賦值給變量y。varx="abc";y=x.length;2.String對(duì)象的常用方法String對(duì)象中有大量操作字符串的方法。String對(duì)象的常用方法及說明如表9-5所示。內(nèi)置對(duì)象String對(duì)象內(nèi)置對(duì)象String對(duì)象內(nèi)置對(duì)象String對(duì)象內(nèi)置對(duì)象Math對(duì)象Math對(duì)象包括數(shù)學(xué)運(yùn)算的屬性和方法。1.Math對(duì)象的常用屬性訪問Math對(duì)象的屬性不需要?jiǎng)?chuàng)建對(duì)象實(shí)例,可以直接用對(duì)象名Math訪問。Math對(duì)象的屬性是數(shù)學(xué)運(yùn)算中的一些常量。Math對(duì)象的常用屬性及說明如表9-6所示。內(nèi)置對(duì)象Math對(duì)象2.Math對(duì)象的常用方法訪問Math對(duì)象的方法不需要?jiǎng)?chuàng)建對(duì)象實(shí)例,可以直接用對(duì)象名Math訪問。Math對(duì)象的方法是一些數(shù)學(xué)運(yùn)算。Math對(duì)象的常用方法及說明如表9-7所示。內(nèi)置對(duì)象件采購匯總表內(nèi)置對(duì)象Date對(duì)象Date對(duì)象處理與日期、時(shí)間有關(guān)的內(nèi)容。1.創(chuàng)建Date對(duì)象實(shí)例有4種方法可以創(chuàng)建Date對(duì)象實(shí)例,其基本語法格式如下。對(duì)象實(shí)例名=newDate();對(duì)象實(shí)例名=newDate(毫秒數(shù));對(duì)象實(shí)例名=newDate(日期時(shí)間字符串);對(duì)象實(shí)例名=newDate(年,月,日,時(shí),分,秒,毫秒);件采購匯總表內(nèi)置對(duì)象Date對(duì)象2.Date對(duì)象的常用方法Date對(duì)象的常用方法及說明如表9-8所示。件采購匯總表內(nèi)置對(duì)象Date對(duì)象03DOM和BOMLearningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.文檔對(duì)象模型DOMdocument對(duì)象是JavaScript中最為常用的對(duì)象之一,在瀏覽器對(duì)象模型中,它位于Window對(duì)象的下一層級(jí)。document對(duì)象包含一些簡單的屬性,這些屬性提供了有關(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)、語言無關(guān)的接口,使用戶可以訪問頁面中其他的標(biāo)準(zhǔn)組件。DOM與JavaScript的結(jié)合實(shí)現(xiàn)了Web網(wǎng)頁的行為與結(jié)構(gòu)分離。簡單來說,DOM解決了Netscape的JavaScript和Microsoft的JavaScript之間的沖突,為Web設(shè)計(jì)師和開發(fā)者提供了一個(gè)處理HTML文檔的標(biāo)準(zhǔn)方法,方便他們?cè)L問站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象。DOM和BOM文檔對(duì)象模型DOM1.DOM節(jié)點(diǎn)樹HTMLDOM定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法。HTML文檔結(jié)構(gòu)像一棵倒置的樹,其中,<html>標(biāo)記就是樹的根節(jié)點(diǎn),<head>和<body>標(biāo)記是樹的兩個(gè)子節(jié)點(diǎn)。這種描述頁面標(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)。DOM和BOM文檔對(duì)象模型DOM(4)每個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn)。(5)注釋是注釋節(jié)點(diǎn)。通過document對(duì)象的documentElement屬性可以獲取整個(gè)DOM節(jié)點(diǎn)樹上的任何一個(gè)元素。通過節(jié)點(diǎn)的firstChild、lastChild屬性可以獲取它的第一個(gè)和最后一個(gè)子節(jié)點(diǎn)。DOM規(guī)定,一個(gè)頁面內(nèi)只有一個(gè)根節(jié)點(diǎn),根節(jié)點(diǎn)是沒有父節(jié)點(diǎn)的,除根節(jié)點(diǎn)之外,其他節(jié)點(diǎn)都可以通過parentNode屬性來獲取自己的父節(jié)點(diǎn)。同一父節(jié)點(diǎn)下位于同一層次的節(jié)點(diǎn)稱為兄弟節(jié)點(diǎn),一個(gè)子節(jié)點(diǎn)的前一個(gè)節(jié)點(diǎn)可以通過previousSibling屬性來獲取,后一個(gè)節(jié)點(diǎn)可以通過nextSibling屬性來獲取。由于不同節(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)類型及說明如表9-9所示。DOM和BOM文檔對(duì)象模型DOM從表9-9中可以看出,如果某個(gè)節(jié)點(diǎn)的nodeType值為9,則說明該節(jié)點(diǎn)的類型為document;如果某個(gè)節(jié)點(diǎn)的nodeType值為1,則說明該節(jié)點(diǎn)的類型為element。不同類型的節(jié)點(diǎn)還可以包含其他類型的節(jié)點(diǎn),相互連接在一起就構(gòu)成了一個(gè)完整的樹形結(jié)構(gòu)。對(duì)于大多數(shù)HTML文檔來說,元素節(jié)點(diǎn)、文本節(jié)點(diǎn)及屬性節(jié)點(diǎn)是必不可少的。DOM和BOM文檔對(duì)象模型DOM(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,無序列表元素的名稱是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)DOM和BOM文檔對(duì)象模型DOM簽中添加的屬性就是屬性節(jié)點(diǎn)(AttributeNode)。一般元素都有title屬性,該屬性能夠詳細(xì)地描述或說明元素,以便用戶了解該元素的用途、作用或功能。3.DOM節(jié)點(diǎn)訪問訪問節(jié)點(diǎn)的方式有很多種,既可以通過document對(duì)象的方法來訪問節(jié)點(diǎn),也可以通過元素節(jié)點(diǎn)的屬性來訪問節(jié)點(diǎn)。如果要對(duì)例9-9中的用戶名文本框、密碼框及郵箱地址文本框進(jìn)行訪問,則可以通過以下4種方式進(jìn)行。(1)通過getElementById()方法訪問節(jié)點(diǎn)。document對(duì)象的getElementById()方法可以訪問頁面中的節(jié)點(diǎn),該方法在使用時(shí),必須指定一個(gè)目標(biāo)元素的id作為參數(shù)。DOM和BOM文檔對(duì)象模型DOM①基本語法。vars=document.getElementById(id);//調(diào)用時(shí)參數(shù)需要加雙引號(hào)在使用該方法時(shí)需要注意以下兩點(diǎn)?！駃d為必選項(xiàng),對(duì)應(yīng)頁面元素屬性id的屬性值,為字符串型的數(shù)據(jù)。在頁面設(shè)計(jì)時(shí)最好給每一個(gè)需要交互的元素設(shè)定一個(gè)唯一的id,以便快速查找。●該方法返回的是一個(gè)頁面元素的引用,如果頁面上出現(xiàn)了不同元素使用同一個(gè)id的情況,則返回第一個(gè)找到的頁面元素;如果給定的id沒有找到對(duì)應(yīng)的元素,則返回null。(2)通過getElementsByName()方法訪問節(jié)點(diǎn)。除了可以通過元素的id獲取對(duì)象,還可以通過元素的名字來訪問。DOM和BOM文檔對(duì)象模型DOM①基本語法。vars=document.getElementsByName(name);//調(diào)用時(shí)參數(shù)需要加雙引號(hào)在使用該方法時(shí)需要注意以下兩點(diǎn)?！駈ame為必選項(xiàng),對(duì)應(yīng)頁面元素屬性name的屬性值,為字符串型的數(shù)據(jù)。該方法調(diào)用時(shí)返回的是一個(gè)數(shù)組,即使對(duì)應(yīng)該名字的元素只有一個(gè)?！袢绻付衷陧撁嬷袥]有相應(yīng)的元素存在,則返回一個(gè)長度為0的數(shù)組,程序中可以通過判斷數(shù)組的length屬性值是否為0來判斷是否找到了相應(yīng)的元素。(3)通過getElementsByTagName()方法訪問節(jié)點(diǎn)。除了可以通過元素的id和name獲取對(duì)應(yīng)的元素,還可以通過標(biāo)記名稱來獲取頁面上所有同類的元素,如表單中的所有input元素。DOM和BOM文檔對(duì)象模型DOM①基本語法。vars=document.getElementsByTagName(tagname);//調(diào)用時(shí)參數(shù)需要加雙引號(hào)在使用該方法時(shí)需要注意以下兩點(diǎn)?！駎agname為必選項(xiàng),對(duì)應(yīng)頁面元素的類型,為字符串型的數(shù)據(jù)。該方法調(diào)用時(shí)返回的是一個(gè)數(shù)組,即使頁面中對(duì)應(yīng)該類型的元素只有一個(gè)?！裢ㄟ^數(shù)組的length屬性值來獲取頁面上該類型元素的總數(shù)。(4)通過form元素訪問節(jié)點(diǎn)。如果要獲取頁面中的form對(duì)象,那么除了通過getElementById()、getElementsByName()方法,還可以通過document對(duì)象的forms屬性來獲取這個(gè)form對(duì)象。表單是用戶與網(wǎng)頁進(jìn)行交互的重要手段，通DOM和BOM文檔對(duì)象模型DOM過表單可以一次性獲取表單中大量元素的信息。獲取例9-9文檔中form對(duì)象的方法如下。varmyform=document.forms;//通過document對(duì)象的forms屬性來獲得數(shù)組對(duì)象varmyloginform=myform[0];//獲取數(shù)組中的第一個(gè)form對(duì)象當(dāng)然,也可以通過form對(duì)象的name屬性來訪問頁面中的form對(duì)象,格式如下。varmyform=document.loginform;//loginform為form對(duì)象的名稱獲取form對(duì)象之后,如果要得到form對(duì)象包含的其他元素,則可以通過form對(duì)象的elements屬性或name屬性來獲取。4.DOM節(jié)點(diǎn)操作前面介紹如何訪問文檔中的不同節(jié)點(diǎn),只是使用DOM所能實(shí)現(xiàn)的功能中的一小部分。DOM的應(yīng)用非常DOM和BOM文檔對(duì)象模型DOM廣泛,如可以通過document對(duì)象實(shí)現(xiàn)表格的動(dòng)態(tài)添加和刪除,也可以通過document對(duì)象替換文本節(jié)點(diǎn)的內(nèi)容等。(1)創(chuàng)建和修改節(jié)點(diǎn)。document對(duì)象有很多創(chuàng)建和修改不同類型節(jié)點(diǎn)的方法,其常用方法及說明如表9-10所示。DOM和BOM文檔對(duì)象模型DOM假設(shè)要在一個(gè)HTML頁面中添加一個(gè)p節(jié)點(diǎn),p節(jié)點(diǎn)內(nèi)的文本內(nèi)容是“HelloWorld!”那么可以利用createElement()、createTextNode()及appendChild()方法來實(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屬性用來修改起始標(biāo)記和結(jié)束標(biāo)記之間的文本。例如,有一個(gè)空的div節(jié)點(diǎn),如果希望在該div節(jié)點(diǎn)中設(shè)置文本內(nèi)容為“中國你好!”則可以編寫如下代碼。oDiv.appendChild(document.createTextNode("中國你好!"));DOM和BOM文檔對(duì)象模型DOM如果使用innerText屬性,則可以編寫如下代碼。oDiv.innerText="中國你好!";使用innerText屬性的代碼更加簡潔,且更容易理解。另外,由于innerText會(huì)自動(dòng)將小于號(hào)、大于號(hào)、引號(hào)和連接符號(hào)進(jìn)行編碼,因此不需要擔(dān)心這些特殊字符。innerHTML屬性可以直接給元素分配字符串,而不需要考慮使用DOM的方法來創(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);DOM和BOM文檔對(duì)象模型DOMoDiv.appendchild(strongl);如果使用innerHTML屬性,則代碼變成:oDiv.innerHTML="<strong>helloworld!</strong>";還可以使用innerText屬性和innerHTML屬性獲取元素的內(nèi)容。如果元素只包含文本,則innerText和innerHTML將返回相同的值;如果元素同時(shí)包含文本和其他元素,則innerText將只返回文本的內(nèi)容,而innerHTML將返回所有元素和文本的HTML代碼。DOM和BOM瀏覽器對(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)行訪問和操作。開發(fā)者可以使用BOM移動(dòng)窗口、改變狀態(tài)欄中的文本,以及執(zhí)行其他與頁面內(nèi)容不直接相關(guān)的操作。由于沒有相關(guān)的BOM標(biāo)準(zhǔn),因此每種瀏覽器都有各自的BOM實(shí)現(xiàn)方法。常見的BOM對(duì)象有Window對(duì)象、Screen對(duì)象、Location對(duì)象、History對(duì)象和Navigator對(duì)象。1.Window對(duì)象Window對(duì)象用來描述瀏覽器窗口的相關(guān)信息。Window對(duì)象是客戶端的全局對(duì)象,是客戶端對(duì)象的“根”,其他子對(duì)象可以作為Window對(duì)象的屬性引用,訪問時(shí)不用注明Window