javascript-進階對象

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

瀏覽器對象(Navigator)

　　　　提供有關瀏覽器的資訊

　　視窗對象(Window)

　　　　Window對象處於對象層次的最頂端，它提供了處理Navigator視窗的方法和屬性。

　　位置對象(Location)

　　　　Location對象提供了與當前開啟的URL一起工作的方法和屬性，它是一個靜態對象。

　　曆史對象(History)

　　　　History對象提供了與曆史清單有關的資訊。

　　文檔對象(Document)

　　　　document對象包含了與文件項目(elements)一起工作的對象，它將這些元素封裝起來供編程人員使用。

1.Window視窗對象
是JavaScript中最大的對象，它描述的是一個瀏覽器視窗。一般要引用它的屬性和方法時，不需要用“window.xxx”這種形式，而直接使用“xxx”。一個架構頁面也是一個視窗。
屬性：
   •   name 視窗的名稱，由開啟它的串連（<a target="...">）或架構頁（<frame name="...">）或某一個視窗調用的 open() 方法（見下）決定。一般我們不會用這個屬性。
   •   status 指視窗下方的“狀態列”所顯示的內容。通過對 status 賦值，可以改變狀態列的顯示。
   •   opener 用法：window.opener；返回開啟本視窗的視窗對象。注意：返回的是一個視窗對象。如果視窗不是由其他視窗開啟的，在 Netscape 中這個屬性返回 null；在 IE 中返回“未定義”（undefined）。undefined 在一定程度上等於 null。注意：undefined 不是 JavaScript 常數，如果你企圖使用“undefined”，那就真的返回“未定義”了。
   •   self 指視窗本身，它返回的對象跟 window 對象是一模一樣的。最常用的是“self.close()”，放在<a>標記中：“<a href="javascript:self.close()">關閉視窗</a>”。
   •   parent 返回視窗所屬的架構頁對象。
   •   top 返回佔據整個瀏覽器視窗的最頂端的架構頁對象。
   •   history 曆史對象，見下。
   •   location 地址對象，見下。
   •   document 文檔對象，見下。
方法：
open() 開啟一個視窗。
用法：
open(<URL字串>, <視窗名稱字串>, <參數字串>);
說明：
   •   <URL字串>：描述所開啟的視窗開啟哪一個網頁。如果留空（''），則不開啟任意網頁。
   •   <視窗名稱字串>：描述被開啟的視窗的名稱（window.name），可以使用'_top'、'_blank'等內建名稱。這裡的名稱跟“<a href="..." target="...">”裡的“target”屬性是一樣的。
   •   <參數字串>：描述被開啟的視窗的樣貌。如果只需要開啟一個普通視窗，該字串留空（''），如果要指定樣貌，就在字串裡寫上一到多個參數，參數之間用逗號隔開。
例：開啟一個 400 x 100 的乾淨的視窗：
open('','_blank','width=400,height=100,menubar=no,toolbar=no,location=no,directories=no,status=no, scrollbars=yes,resizable=yes')
open()的參數
   •   top=# 視窗頂部離開螢幕頂部的像素數
   •   left=# 視窗左端離開螢幕左端的像素數
   •   width=# 視窗的寬度
   •   height=# 視窗的高度
   •   menubar=... 視窗有沒有菜單，取值yes或no
   •   toolbar=... 視窗有沒有工具條，取值yes或no
   •   location=... 視窗有沒有地址欄，取值yes或no
   •   directories=... 視窗有沒有串連區，取值yes或no
   •   scrollbars=... 視窗有沒有捲軸，取值yes或no
   •   status=... 視窗有沒有狀態列，取值yes或no
   •   resizable=... 視窗給不給調整大小，取值yes或no

注意：open() 方法有傳回值，返回的就是它開啟的視窗對象。比如var newWindow = open('','_blank');把一個新視窗賦值到“newWindow”變數中，以後通過“newWindow”變數就可以控制視窗了。
close() 關閉一個已開啟的視窗。
用法：
window.close()
或
self.close()
主要作用是關閉本視窗；
<視窗對象>.close()：關閉指定的視窗。注意如果該視窗有狀態列，調用該方法後瀏覽器會警告：“網頁正在試圖關閉視窗，是否關閉？”然後等待使用者選擇是否；如果沒有狀態列，調用該方法將直接關閉視窗。
另外Window視窗對象還有如下方法
   •   blur() 使焦點從視窗移走，視窗變為“非使用中視窗”。
   •   focus() 是視窗獲得焦點，變為“使用中視窗”。不過在 Windows 98，該方法只能使視窗的標題列和工作列上的相應按鈕閃爍，提示使用者該視窗正在試圖獲得焦點。
   •   scrollTo() 用法：[<視窗對象>.]scrollTo(x, y)；使視窗滾動，使文檔從左上方數起的(x, y)點滾動到視窗的左上方。
   •   scrollBy() 用法：[<視窗對象>.]scrollBy(deltaX, deltaY)；使視窗向右滾動 deltaX 像素，向下滾動 deltaY 像素。如果取負值，則向相反的方向滾動。
   •   resizeTo() 用法：[<視窗對象>.]resizeTo(width, height)；使視窗調整大小到寬 width 像素，高 height 像素。
   •   resizeBy() 用法：[<視窗對象>.]resizeBy(deltaWidth, deltaHeight)；使視窗調整大小，寬增大 deltaWidth 像素，高增大 deltaHeight 像素。如果取負值，則減少。
   •   alert() 用法：alert(<字串>)；彈出一個只包含“確定”按鈕的對話方塊，顯示<字串>的內容，整個文檔的讀取、Script 的運行都會暫停，直到使用者按下“確定”。
   •   confirm() 用法：confirm(<字串>)；彈出一個包含“確定”和“取消”按鈕的對話方塊，顯示<字串>的內容，要求使用者做出選擇，整個文檔的讀取、Script 的運行都會暫停。如果使用者按下“確定”，則返回 true 值，如果按下“取消”，則返回 false 值。
   •   prompt() 用法：prompt(<字串>[, <初始值>])；彈出一個包含“確認”“取消”和一個文字框的對話方塊，顯示<字串>的內容，要求使用者在文字框輸入一些資料，整個文檔的讀取、Script 的運行都會暫停。如果使用者按下“確認”，則返迴文本框裡已有的內容，如果使用者按下“取消”，則返回 null 值。如果指定<初始值>，則文字框裡會有預設值。

事件：
window.onload;發生在文檔全部下載完畢的時候。全部下載完畢意味著不但 HTML 檔案，而且包含的圖片，外掛程式，控制項，小程式等全部內容都下載完畢。本事件是 window 的事件，但是在 HTML 中指定事件處理常式的時候，我們是把它寫在<body>標記中的。
    •    window.onunload;發生在使用者退出文檔（或者關閉視窗，或者到另一個頁面去）的時候。與 onload 一樣，要寫在 HTML 中就寫到<body>標記裡。
   •   window.onresize;發生在視窗被調整大小的時候。
   •   window.onblur;發生在視窗失去焦點的時候。
   •   window.onfocus;發生在視窗得到焦點的時候。
   •   window.onerror;發生在錯誤發生的時候。它的事件處理常式通常就叫做“錯誤處理程式”(Error Handler)，用來處理錯誤。上邊已經介紹過，要忽略一切錯誤，就使用：function ignoreError() {
          return true;
       }
   •   window.onerror = ignoreError;

window.onbeforeunload="window.event.returnValue='確定要離開嗎？'"; 會彈出是否離開本頁的對話方塊；

瀏覽器是邊裝載邊解析並執行其中的javascript指令碼的，裝載完才會執行onload。

還有

navigate方法

setInterval方法：迴圈執行某段程式；

setTimeout方法：一段時間後執行某段程式

showModalDialog

showModalessDialog

2.Document文檔對象是window和frames對象的一個屬性,是顯示於視窗或架構內的一個文檔。它包含了文檔從<head>到</body>的內容。
用法：document （當前視窗）或 <視窗對象>.document （指定視窗）
屬性：
   •   document.title //設定文檔標題等價於HTML的<title>標籤
   •   document.bgColor //設定頁面背景色
   •   document.fgColor //設定前景色彩(文本顏色)
   •   document.linkColor //未點擊過的連結顏色
   •   document.alinkColor //啟用連結(焦點在此連結上)的顏色
   •   document.vlinkColor //已點擊過的連結顏色
   •   document.URL //設定URL屬性從而在同一視窗開啟另一網頁
   •   document.fileCreatedDate //檔案建立日期，唯讀屬性
   •   document.fileModifiedDate //檔案修改日期，唯讀屬性
   •   document.fileSize //檔案大小，唯讀屬性
   •   document.cookie //設定和讀出cookie
   •   document.charset //設定字元集簡體中文:gb2312
   •   cookie 關於 cookie 請參看“使用架構和 Cookies”一章。
   •   lastModified 當前文檔的最後修改日期，是一個 Date 對象。
   •   referrer 如果當前文檔是通過點擊串連開啟的，則 referrer 返回原來的 URL。
   •   title 指<head>標記裡用<title>...</title>定義的文字。在 Netscape 裡本屬性不接受賦值。
   •   fgColor 指<body>標記的 text 屬性所表示的文本顏色。
   •   bgColor 指<body>標記的 bgcolor 屬性所表示的背景顏色。
   •   linkColor 指<body>標記的 link 屬性所表示的串連顏色。
   •   alinkColor 指<body>標記的 alink 屬性所表示的活動串連顏色。
   •   vlinkColor 指<body>標記的 vlink 屬性所表示的已訪問串連顏色。

內部數組對象

在Javascript中為了方便內部對象的操作,可以使用表單(Forms)、架構(Frames)、元素(element)、連結(links)和錨(Anchors)數組實現對象的訪問。

例：

<A name="anchor1" href="test33.htm">連結到第三個文本</a>
<A href="#anchor1">第一錨點</a>

document.links.length==2，document.anchors.length==1。

方法：
   •   open() 開啟文檔以便 JavaScript 能向文檔的當前位置（指插入 JavaScript 的位置）寫入資料。通常不需要用這個方法，在需要的時候 JavaScript 自動調用。
   •   write(); writeln() 向文檔寫入資料，所寫入的會當成標準文檔 HTML 來處理。writeln() 與 write() 的不同點在於，writeln() 在寫入資料以後會加一個換行。這個換行只是在 HTML 中換行，具體情況能不能夠是顯示出來的文字換行，要看插入 JavaScript 的位置而定。如在<pre>標記中插入，這個換行也會體現在文檔中。
   •   clear() 清空當前文檔。
   •   close() 關閉文檔，停止寫入資料。如果用了 write[ln]() 或 clear() 方法，就一定要用 close() 方法來保證所做的更改能夠顯示出來。如果文檔還沒有完全讀取，也就是說，JavaScript 是插在文檔中的，那就不必使用該方法。

例如，典型的彈出式更新通知：
<script language="JavaScript">
var whatsNew = open('','_blank','top=50,left=50,width=200,height=300,' +
            'menubar=no,toolbar=no,directories=no,location=no,' +
            'status=no,resizable=no,scrollbars=yes');
whatsNew.document.write('<center><b>更新通知</b></center>');
whatsNew.document.write('<p>最後更新日期：00.08.01');
whatsNew.document.write('<p>00.08.01：增加了“我的最愛”欄目。');
whatsNew.document.write('<p align="right">' +
            '<a href="javascript:self.close()">關閉視窗</a>');
whatsNew.document.close();
</script>
也可以先寫好一個 HTML 檔案，在 open() 方法中直接 load 這個檔案。

write()

writeln();

clear();可以用write("")和close()方法來實現clear的功能；

createElement();

createStyleSheet();

在document.close()後的操作，是新開啟了一個document

當write('</script>')時，它可能會被誤認為是第一個script的結束標記，解決方案是改成write('</sc' + 'ript>');

3. forms[]; Form 表單對象 document.forms[] 是一個數組，包含了文檔中所有的表單（<form>）。要引用單個表單，可以用 document.forms[index]，但是一般來說，人們都會這樣做：在<form>標記中加上“name="..."”屬性，那麼直接用 “document.<表單名>”就可以引用了。
Form 對象的屬性
name 返回表單的名稱，也就是<form name="...">屬性。
action 返回/設定表單的提交地址，也就是<form action="...">屬性。
method 返回/設定表單的提交方法，也就是<form method="...">屬性。
target 返回/設定表單提交後返回的視窗，也就是<form target="...">屬性。
encoding 返回/設定表單提交內容的編碼方式，也就是<form enctype="...">屬性。
length 返回該表單所含元素的數目。
方法
reset() 重設表單。這與按下“重設”按鈕是一樣的。
submit() 提交表單。這與按下“提交”按鈕是一樣的。
事件
onreset; onsubmit

4.anchors數組對象

links數組對象

images數組對象

scripts數組對象

applets數組對象

all數組

styleSheets數組對象

body對象，

4.window的對象屬性

location對象：

window.location.href="" 等效於 widnow.navigate("") 的作用。

widnow.location.replace("")

widnow.location.reload

event對象：

altKey屬性

ctlKey屬性

shiftKey屬性

和事件來源相關的座標

clientX，clientY屬性

screenX,screenY屬性

offsetX，offsetY屬性

x，y屬性

returnValue屬性

cancelBubble屬性，為true時阻止某次事件向上傳遞。

srcElement屬性

keyCode屬性，碼值

frames數組對象

訪問幀視窗對象的方式：

window.parent.frame[1]...

window.parent.frame["framename1"]...

window.parent["framename1"]...

window.parent.framename1.....

window.parent.item[1]...

window.parent.item["framename1"]...

top屬性

screen對象

clipBoardData對象

history對象

navigator對象

document對象

body對象的事件：

onSelectStart

onScroll

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More