JavaScript對象Web前端開發技術篇3：JavaScript技術

本項目介紹JavaScript對象的創建和訪問、內置對象、DOM和BOM的常用屬性和方法。通過使用和掌握JavaScript對象的相關屬性,使學生明白基礎的重要性,只有基礎扎實,才能挑戰未來的難題,才能實現競進有為、行穩致遠的目標。學生在踏實中學真知,在細節處求真理,一步一個腳印,方能在今后的學習、工作中熟練運用所學的知識和技術。序言目錄CONTENTS對象概念內置對象DOM和BOM01020301對象概念Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.對象概念對象是一種復合的數據類型,包括屬性和方法兩個基本要素。屬性實現對象相關信息的存儲,一般與變量相關聯;方法實現對象的特定操作,一般與函數代碼相關聯。JavaScript支持基于對象的編程。JavaScript中包括內置對象和宿主對象。內置對象是ECMAScript標準中定義的類型;宿主對象是機器環境提供的類型,包括DOM(Document

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

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