JavaScript中的global對象,window對象以及document對象的區別和聯系
一、概念區分:JavaScript中的global對象,window對象以及document對象
1、global對象(全局對象)
《JS高級程序設計》中談到,global對象可以說是ECMAScript中對特別的一個對象了,因為不管你從什么角度上看,這個對象都是不存在的。從某種意義上講,它是一個終極的“兜底兒對象”,換句話說呢,就是不屬於任何其他對象的屬性和方法,最終都是它的屬性和方法。我理解為,這個global對象呢,就是整個JS的“老祖宗”,找不到歸屬的那些“子子孫孫”都可以到它這里來認祖歸宗。所有在全局作用域中定義的屬性和函數,都是global對象的屬性和方法,比如isNaN()、parseInt()以及parseFloat()等,實際都是它的方法;還有就是常見的一些特殊值,如:NaN、undefined等都是它的屬性,以及一些構造函數Object、Array等也都是它的方法。總之,記住一點:global對象就是“老祖宗”,所有找不到歸屬的就都是它的。
2、window對象
前面說了global對象是“老祖宗”,那有人該問了,你把window對象置於何地呢?對,javascript這門語言現在這么紅火很大部分原因是因為W3C將它作為寫頁面的官方腳本語言,但別忘了js它不僅僅可以用來寫頁面,也就是不僅僅可以用在瀏覽器中。window對象是相對於web瀏覽器而言的,它並不是ECMAScripta規定的內置對象,內置對象的定義是:“由ECMAScript實現提供的、不依賴於宿主環境的對象,這些對象在ECMAScript程序執行之前就已經存在了。”window對象是宿主對象也就是在一定的環境中才會生成的對象(這里也就是指瀏覽器),而global對象是在任何環境中都存在的。window對象具體也就是指瀏覽器打開的那個窗口。
3、document對象
簡單來說,document對象是window對象的一個屬性,是顯示於窗口內的一個文檔。而window對象則是一個頂層對象,它不是另一個對象的屬性。document可以理解為文檔,就是你的網頁,而window是你的窗口,就是你的瀏覽器包含的。它們倆在沒有框架的情況下可以說是等同的,在有框架的情況下就要區別對待了。
二、詳解HTML中的window對象和document對象
Window -- 代表瀏覽器中一個打開的窗口:
對象屬性
window //窗口自身
window.self //引用本窗戶window=window.self
window.name //為窗口命名
window.defaultStatus //設定窗戶狀態欄信息
window.location //URL地址,配備布置這個屬性可以打開新的頁面
對象方法
window.alert("text") //提示信息會話框
window.confirm("text") //確認會話框
window.prompt("text") //要求鍵盤輸入會話框
window.setIntervel("action",time) //每一隔指定的時間(毫秒)就執行一次操作
window.clearInterval() //清除時間配備布置作用就是終止輪回
window.setTimeout(action,time) //隔了指定的時間(毫秒)執行一次操作
window.open() //打開新的窗口
window.close() //關閉窗口
成員對象
window.event
window.document //見document對象詳解
window.history
window.screen
window.navigator
window.external
-------------------------------------------------- -------------------
window.history對象
window.history.length //瀏覽過的頁面數
history.back() //后退
history.forward() //前進
history.go(i) //前進或后退到歷史記錄的第i個頁面
//i>0進步,i<0 后退
------------------------------------------------- -------------------
window.screen對象
window.screen.width //屏幕寬度
window.screen.height //屏幕高度
window.screen.colorDepth //屏幕色深
window.screen.availWidth //可用寬度
window.screen.availHeight //可用高度(除去任務欄的高度)
-------------------------------------------------- -------------------
window.external對象
window.external.AddFavorite("地址","標題" ) //把網站新增到保藏夾
-------------------------------------------------- -------------------
window.navigator對象
window.navigator.appCodeName //瀏覽器代碼名
window.navigator.appName //瀏覽器應用程序名
window.navigator.appMinorVersion //瀏覽器補丁版本
window.navigator.cpuClass //cpu類型 x86
window.navigator.platform //操作體系類型 win32
window.navigator.plugins
window.navigator.opsProfile
window.navigator.userProfile
window.navigator.systemLanguage //客戶體系語言 zh-cn簡體中文
window.navigator.userLanguage //用戶語言,同上
window.navigator.appVersion //瀏覽器版本
window.navigator.userAgent
window.navigator.onLine //用戶否在線
window.navigator.cookieEnabled //瀏覽器是否撐持cookie
window.navigator.mimeTypes
document對象 -- 代表整個HTML 文檔,可用來訪問頁面中的所有元素:
對象屬性
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
常用對象方法
document.write() //動態向頁面寫入內容
document.createElement(Tag) //創建一個html標簽對象
document.getElementById(ID) //獲得指定ID值的對象
document.getElementsByName(Name) //獲得指定Name值的對象
document.body.appendChild(oTag)
body-主體子對象
document.body //指定文檔主體的開始和結束等價於<body></body>
document.body.bgColor //設置或獲取對象后面的背景顏色
document.body.link //未點擊過的鏈接顏色
document.body.alink //激活鏈接(焦點在此鏈接上)的顏色
document.body.vlink //已點擊過的鏈接顏色
document.body.text //文本色
document.body.innerText //設置<body>...</body>之間的文本
document.body.innerHTML //設置<body>...</body>之間的HTML代碼
document.body.topMargin //頁面上邊距
document.body.leftMargin //頁面左邊距
document.body.rightMargin //頁面右邊距
document.body.bottomMargin //頁面下邊距
document.body.background //背景圖片
document.body.appendChild(oTag) //動態生成一個HTML對象
常用對象事件
document.body.onclick="func()" //鼠標指針單擊對象是觸發
document.body.onmouseover="func()" //鼠標指針移到對象時觸發
document.body.onmouseout="func()" //鼠標指針移出對象時觸發
location-位置子對象
document.location.hash // #號后的部分
document.location.host // 域名+端口號
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目錄部分
document.location.port // 端口號
document.location.protocol // 網絡協議(http:)
document.location.search // ?號后的部分
常用對象事件
documeny.location.reload() //刷新網頁
document.location.reload(URL) //打開新的網頁
document.location.assign(URL) //打開新的網頁
document.location.replace(URL) //打開新的網頁
========================================================================
selection-選區子對象
document.selection
========================================================================
images集合(頁面中的圖象):
----------------------------
a)通過集合引用
document.images //對應頁面上的<img>標簽
document.images.length //對應頁面上<img>標簽的個數
document.images[0] //第1個<img>標簽
document.images[i] //第i-1個<img>標簽
----------------------------
b)通過nane屬性直接引用
<img name="oImage">
document.images.oImage //document.images.name屬性
----------------------------
c)引用圖片的src屬性
document.images.oImage.src //document.images.name屬性.src