javascript Window及document對象詳細整理

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

上載者：User

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

一、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對象

對象屬性:
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
----------------------------
d)建立一個圖象
var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"
同時在頁面上建立一個<img>標籤與之對應就可以顯示
----------------------------
範例程式碼(動態建立圖象)：
<html>
<img name=oImage>
<script language="javascript">
var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"
</script>
</html>

<html>
<script language="javascript">
oImage=document.caeateElement("IMG")
oImage.src="1.jpg"
</script>

本文章原先以中文撰寫並發佈於 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