JavaScript中的global對象，window對象以及document對象的區別和聯繫

時間 2020-06-09

標籤 javascript global 對象 window 以及 document 區別聯繫欄目 JavaScript 简体版

原文原文鏈接

JavaScript中的global對象，window對象以及document對象的區別和聯繫

1、概念區分：JavaScript中的global對象，window對象以及document對象

一、global對象（全局對象）javascript

《JS高級程序設計》中談到，global對象能夠說是ECMAScript中對特別的一個對象了，由於無論你從什麼角度上看，這個對象都是不存在的。從某種意義上講，它是一個終極的「兜底兒對象」，換句話說呢，就是不屬於任何其餘對象的屬性和方法，最終都是它的屬性和方法。我理解爲，這個global對象呢，就是整個JS的「老祖宗」，找不到歸屬的那些「子子孫孫」均可以到它這裏來認祖歸宗。全部在全局做用域中定義的屬性和函數，都是global對象的屬性和方法，好比isNaN()、parseInt()以及parseFloat()等，實際都是它的方法；還有就是常見的一些特殊值，如：NaN、undefined等都是它的屬性，以及一些構造函數Object、Array等也都是它的方法。總之，記住一點：global對象就是「老祖宗」，全部找不到歸屬的就都是它的。html

二、window對象java

前面說了global對象是「老祖宗」，那有人該問了，你把window對象置於何地呢？對，javascript這門語言如今這麼紅火很大部分緣由是由於W3C將它做爲寫頁面的官方腳本語言，但別忘了js它不單單能夠用來寫頁面，也就是不單單能夠用在瀏覽器中。window對象是相對於web瀏覽器而言的，它並非ECMAScripta規定的內置對象，內置對象的定義是：「由ECMAScript實現提供的、不依賴於宿主環境的對象，這些對象在ECMAScript程序執行以前就已經存在了。」window對象是宿主對象也就是在必定的環境中才會生成的對象（這裏也就是指瀏覽器），而global對象是在任何環境中都存在的。window對象具體也就是指瀏覽器打開的那個窗口。web

三、document對象瀏覽器

簡單來講，document對象是window對象的一個屬性，是顯示於窗口內的一個文檔。而window對象則是一個頂層對象，它不是另外一個對象的屬性。document能夠理解爲文檔，就是你的網頁，而window是你的窗口，就是你的瀏覽器包含的。它們倆在沒有框架的狀況下能夠說是等同的，在有框架的狀況下就要區別對待了。cookie

2、詳解HTML中的window對象和document對象

Window -- 表明瀏覽器中一個打開的窗口：網絡

對象屬性
　　window //窗口自身
　　window.self //引用本窗戶window=window.self
　　window.name //爲窗口命名
　　window.defaultStatus //設定窗戶狀態欄信息
　　window.location //URL地址，配備佈置這個屬性能夠打開新的頁面app

對象方法
　　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